[Test] control css

by Francisco

HTML

<script src="https://mapea4-sigc.juntadeandalucia.es/js/mapea-5.1.0.ol.min.js"></script>
<link rel="stylesheet" href="https://mapea4-sigc.juntadeandalucia.es/assets/css/mapea-5.1.0.ol.min.css">
<script src="https://mapea4-sigc.juntadeandalucia.es/js/configuration-5.1.0.js"></script>
<div id="map"></div>

CSS

.m-scale-container {
  height: 21px !important;
  color: white;
  background-color: rgb(226, 17, 17) !important;
}

.m-unit:before {
  color: white !important;
}

.m-areas>div.m-area>div.m-panel>div.m-panel-controls .m-mouse-position {
  /*.m-mouse-position {*/
  /* height no funciona */
  height: 21px !important;
  /*color: rgb(247, 10, 10);*/
  color: white;
  /* background-color no funciona */
  background-color: rgb(226, 17, 17) !important;
}


.m-mouse-position:before {
  color: white;
  background-color: rgb(226, 17, 17) !important;
}

.ol-scale-line,
.ol-scale-line-inner {
  color: white !important;
  background-color: rgb(226, 17, 17) !important;
}

#map {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.basic-tool {
  position: absolute;
  z-index: 1000;
  width: 30px;
  height: 30px;
  border: 0.1px solid rgb(231, 230, 230);
  background-color: white;
  padding: 4px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  font-size: 24px;
  line-height: 32px;
  float: left;
  color: dodgerblue;
}

.basic-tool:hover {
  color: darksalmon;
  /* opacity: 0.50;
        -moz-opacity: .50; */
  filter: alpha (opacity=50);
}

.m-report-container {
  margin: 0px;
  padding: 0px;
  top: -1px;
  left: 160px;
}

.m-locator-container {
  margin: 0px;
  padding: 0px;
  top: -1px;
  left: 200px;
}

JavaScript

// OPCION 1: En el constructor del mapa, en modo cadena u objeto
  mapajs = M.map({
    container: "map",
    layers: [
      new M.layer.WMS({
        url: 'http://www.ideandalucia.es/wms/dea100_divisiones_administrativas?',
        name: 'terminos_municipales',
        legend: 'Municipios',
        transparent: false,
        tiled: true
      })
    ],
    controls:['mouse','scale']
  });