controlMap added to proyect

catalog/templates/map.html

@@ -437,7 +437,6 @@
             }
         ],
         end: function () {
-            console.log("Finished")
             $('.main-header').removeClass('activateMainHeader');
         }
     });

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

+.mapControl{
+  width: auto;
+  height: auto;
+  position: absolute;
+  right: 0;
+  top:14em;
+  z-index: 2;
+}
+
+.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;
+  padding:3px;
+  cursor: pointer;
+  background-color: white;
+  border-radius: 2px;
+}
+
+.mapSelector input[type="radio"]{
+  margin-right: 2px;
+  vertical-align: sub;
+}
+
+.mapSelector span{
+  font-weight: bold;
+}
+
+
+.baseMap img{
+  border-radius: 8px;
+}
+
+.mapSelector{
+  position: relative;
+  bottom: 2em;
+  padding: 4px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+}
+
+#mapId{
+	width: 500px;
+	height: 500px;
+}
\ No newline at end of file

reports/static/reports/js/minimap.js

@@ -10,13 +10,48 @@ const polygonFeature = wktFormat.readFeature(polygon, {
 });
 
 // Create layers
-const mapLayer = new ol.layer.Tile({
+const light = new ol.layer.Tile({
   name: 'mapbox',
   source: new ol.source.XYZ({
     url:'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token='+MAPBOX_ACCESS_TOKEN
   })
 });
 
+const streets = new ol.layer.Tile({
+  name: 'mapbox',
+  source: new ol.source.XYZ({
+    url: 'http://tile.openstreetmap.org/{z}/{x}/{y}.png'
+  })
+});
+
+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({
+    url: 'https://api.mapbox.com/styles/v1/mapbox/navigation-guidance-night-v2/tiles/256/{z}/{x}/{y}?access_token=' + MAPBOX_ACCESS_TOKEN
+  })
+});
+
+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',
   source: new ol.source.Vector({
@@ -29,7 +64,7 @@ const layers = new Map();
 // create map
 const map = new ol.Map({
   target: 'minimap',
-  layers: [mapLayer, polygonLayer],
+  layers: [light, polygonLayer],
   view: new ol.View({
     center: ol.proj.fromLonLat([-99.19, 19.61]),
     zoom: 4,
@@ -250,3 +285,111 @@ function setCompareDirection(direction){
 }
 //  Fin funciones de comparacion
 //******************************
+
+/************************* 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) {
+    if (layer.values_.name == "mapbox") {
+      map.removeLayer(layer)
+    }
+  })
+  $('#' + selectedMap).prop('checked', true);
+  switch (selectedMap) {
+    case 'light':
+      map.getLayers().insertAt(0, light);
+      currentMap = light;
+      break;
+    case 'streets':
+      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;
+  }
+}
+
+function showControlMap(){
+  if ($('#showControlMap').is(':visible')) {
+    $("#showControlMap").hide();
+    $("#hideControlMap").show();
+    $(".mapControl").show();
+  } else {
+    $("#showControlMap").show();
+    $("#hideControlMap").hide();
+    $(".mapControl").hide();
+  }
+}
\ No newline at end of file

reports/templates/aside.html

@@ -284,6 +284,18 @@
             </ul>
         </li>
 
+        <li>
+            <a class="treeview " href="#" onclick="showControlMap()">
+                <i class="fa fa-globe"></i>
+                <i class="fa fa-globe" style="display:none"></i>
+                <span id="showControlMap">Show Maps</span>
+                <span id="hideControlMap" style="display:none">Hide Maps</span>
+                <span class="pull-right-container">
+                    <span class="label label-primary pull-right"></span>
+                </span>
+            </a>
+        </li>
+
 
   <!--      <li>
             <a class="treeview " href="#" onclick="showComparisons()">

reports/templates/sclData.html

@@ -5,6 +5,7 @@
     <link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'reports/css/scldata.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'reports/css/crossrange.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'reports/css/control-map.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'reports/css/ol-ext.css' %}" type="text/css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
@@ -157,6 +158,9 @@
 
     <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>
 
         <section class="content">
             <div class="row col-lg-11 title">