update to style in maps

reports/static/reports/css/control-map.css

 .mapControl{
-  width: auto;
+  width: 33%;
   height: auto;
   position: absolute;
-  right: 0;
-  top:14em;
-  z-index: 2;
+  right: 15px;
+  bottom: 0px;
+  z-index: 10;
 }
 
 .controlContainer{
   width: auto;
-  overflow-y: scroll;
   max-height: 60vh;
   border-radius: 8px;
   padding: 3px;
   padding-right: 5px;
 }
 
-.controlContainer::-webkit-scrollbar{
-  background-color: #ffffff;
-  border-radius: 20px;
-  width: 10px;
-}
-
-.controlContainer::-webkit-scrollbar-track{
-  border-radius: 20px;
-}
-
-.controlContainer::-webkit-scrollbar-thumb{
-  background-color: #A6A6A6;
-  border: 2px solid #ffffff;
-  border-radius: 10px;
-}
-
 .baseMap{
-  height: 158px;
-  width: 296px;
+  height: 61px;
+  width: 78px;
   padding:3px;
   cursor: pointer;
   background-color: white;
@@ -61,9 +44,5 @@
   padding: 4px;
   background-color: rgba(0, 0, 0, 0.7);
   color: white;
-}
-
-#mapId{
-	width: 500px;
-	height: 500px;
+  font-size: 12px;
 }

reports/static/reports/js/minimap.js

@@ -24,20 +24,6 @@ const streets = new ol.layer.Tile({
   })
 });
 
-const cycle = new ol.layer.Tile({
-  name: 'mapbox',
-  source: new ol.source.XYZ({
-    url: 'https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=6ca0387fb7d64c68b9af3a636f384d53'
-  })
-});
-
-const traffic = new ol.layer.Tile({
-  name: 'mapbox',
-  source: new ol.source.XYZ({
-    url: 'https://api.mapbox.com/styles/v1/mapbox/traffic-day-v2/tiles/256/{z}/{x}/{y}?access_token=' + MAPBOX_ACCESS_TOKEN
-  })
-});
-
 const night = new ol.layer.Tile({
   name: 'mapbox',
   source: new ol.source.XYZ({
@@ -45,12 +31,6 @@ const night = new ol.layer.Tile({
   })
 });
 
-const satellite = new ol.layer.Tile({
-  name: 'mapbox',
-  source: new ol.source.XYZ({
-    url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v10/tiles/256/{z}/{x}/{y}?access_token=' + MAPBOX_ACCESS_TOKEN
-  })
-});
 
 const polygonLayer = new ol.layer.Vector({
   name: 'polygon',
@@ -288,64 +268,6 @@ function setCompareDirection(direction){
 
 /************************* Functions de layer Sources ******************************/
 let currentMap = light;
-function initControlMap(){
-  let baseMaps = {
-    "light": {
-      layer: light,
-      name: "Claro",
-      imgURL: "../../static/images/light.png",
-      active: true
-    },
-    "streets": {
-      layer: streets,
-      name: "Calles",
-      imgURL: "../../static/images/Streets.png",
-      active: true
-    },
-    "cycle": {
-      layer: cycle,
-      name: "Rutas",
-      imgURL: "../../static/images/cycle.png",
-      active: false
-    },
-    "traffic": {
-      layer: traffic,
-      name: "Trafico",
-      imgURL: "../../static/images/traffic.png",
-      active: false
-    },
-    "night": {
-      layer: night,
-      name: "Oscuro",
-      imgURL: "../../static/images/night.png",
-      active: false
-    },
-    "satellite": {
-      layer: satellite,
-      name: "Satelital",
-      imgURL: "../../static/images/satellite.png",
-      active: false
-    }
-  };
-
-  let controlMap = $('#controlMap');
-  for (let map in baseMaps) {
-    let htmlString = '';
-    htmlString = '<div class="baseMap" onclick="changeMap(\'' + map + '\')">';
-    htmlString += '<img src="' + baseMaps[map].imgURL + '" width="100%" height="100%"/>';
-    htmlString += '<span class="mapSelector">';
-    if (map === 'light') {
-      htmlString += '<input id="' + map + '" type="radio" name="layerOption" checked><span>' + baseMaps[map].name + '</span>';
-    } else {
-      htmlString += '<input id="' + map + '" type="radio" name="layerOption"><span>' + baseMaps[map].name + '</span>';
-    }
-    htmlString += '</span>';
-    htmlString += '</div>';
-    controlMap.append(htmlString);
-  }
-}
-
-initControlMap();
 
 function changeMap(selectedMap) {
   map.getLayers().getArray().forEach(function (layer) {
@@ -363,22 +285,10 @@ function changeMap(selectedMap) {
       map.getLayers().insertAt(0, streets);
       currentMap = streets;
       break;
-    case 'cycle':
-      map.getLayers().insertAt(0, cycle);
-      currentMap = cycle;
-      break;
-    case 'traffic':
-      map.getLayers().insertAt(0, traffic);
-      currentMap = traffic;
-      break;
     case 'night':
       map.getLayers().insertAt(0, night);
       currentMap = night;
       break;
-    case 'satellite':
-      map.getLayers().insertAt(0, satellite);
-      currentMap = satellite;
-      break;
   }
 }
 

reports/templates/sclData.html

@@ -156,11 +156,44 @@
         </div>
     </div>
     
-    <div id="reportPage" class="wrapper" style="background-color: #ecf0f5">
-        <div id="minimap" class="minimap"></div>
     <div class="mapControl" style="display: none">
-            <div id="controlMap" class="controlContainer"></div>
+        <div class="mapControl" style="">
+            <div id="controlMap" class="controlContainer">
+                <div class="row">
+                    <div class="col-lg-4">
+                        <div class="baseMap" onclick="changeMap('light')">
+                            <img src="../../static/images/light.png" width="100%" height="100%">
+                            <span class="mapSelector">
+                                <input id="light" type="radio" name="layerOption" checked="">
+                                <span>Noon</span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="col-lg-4">
+                        <div class="baseMap" onclick="changeMap('streets')">
+                            <img src="../../static/images/Streets.png" width="100%" height="100%">
+                            <span class="mapSelector">
+                                <input id="streets" type="radio" name="layerOption">
+                                <span>Streets</span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="col-lg-4">
+                        <div class="baseMap" onclick="changeMap('night')">
+                            <img src="../../static/images/night.png" width="100%" height="100%">
+                            <span class="mapSelector">
+                                <input id="night" type="radio" name="layerOption">
+                                <span>Night</span>
+                            </span>
+                        </div>
                     </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="reportPage" class="wrapper" style="background-color: #ecf0f5">
+        <div id="minimap" class="minimap"></div>
 
         <section class="content">
             <div class="row col-lg-11 title">