Botones cambio de mapa en catalog

catalog/static/catalog/css/body.css

@@ -413,7 +413,7 @@ div .draw-button {
 
 div .sidebar-input {
     border-radius: 3px;
-    border: 1px solid #374850;
+    border: 1px solid #1397d4;
     margin: 10px 10px;
 }
 

catalog/static/catalog/css/map.css

@@ -5,6 +5,7 @@
 	margin:0;
 	padding:0;
 	position:fixed;
+	/* display: none; */
 /*	border: 2px solid red;*/
 }
 html, body
@@ -37,3 +38,15 @@ html, body
 #cloudPercentageSelector {
   background: transparent;
 }
+
+.mapControl{
+	width: 20%;
+	height: auto;
+	position: absolute;
+	right: 15px;
+	bottom: 15px;
+	z-index: 100;
+	background-color: white;  
+	border-radius: 5px;
+	padding: 3px;
+  }
\ No newline at end of file

catalog/static/catalog/js/openLayers4.js

@@ -3,6 +3,27 @@
 /// @date 2016-04-14
 /// 
 
+
+MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
+
+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
+	}),
+	visible: true,
+});
+
+const cycle = new ol.layer.Tile({
+    name: 'mapbox',
+    source: new ol.source.XYZ({
+		url: 'https://api.tiles.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token=' + MAPBOX_ACCESS_TOKEN
+
+        // url: 'http://tile.openstreetmap.org/{z}/{x}/{y}.png'
+	}),
+	visible: false,
+});
+
 //------------------------------------------------------------------------------
 /**
  * Definitions for the languages.
@@ -11,18 +32,19 @@
  * @param  lat Latitude
  * @param  z Zoom
  * @return OpenStreetMapsClass object
+ *
  */
 function OpenStreetMapsClass(divID, lng, lat, z)
 {
 	//this.vectorLayers = [];
 	var self=this;
 	this.vectorLayer = new ol.layer.Vector({source: new ol.source.Vector({features: []})});
+	this.layers = [
+		light, cycle,
+		this.vectorLayer,
+	]
 	this.map = new ol.Map({
-				layers: [new ol.layer.Tile({
-							//source: new ol.source.OSM()
-							source: new ol.source.XYZ({url:'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'})
-
-							}),this.vectorLayer],
+				layers: this.layers,
 				target: 'map',
 				controls: ol.control.defaults({attributionOptions: ({collapsible: true})}),
 				view: new ol.View({ center: ol.proj.fromLonLat([lng,lat]),  zoom: z})
@@ -271,4 +293,27 @@ function getRandomColor() {
 		color += letters[Math.floor(Math.random() * 16)];
 	}
 	return color;
-}
\ No newline at end of file
+}
+
+
+
+OpenStreetMapsClass.prototype.changeMap = function (selectedMap) {
+
+	console.log("selectedMap: ", selectedMap)
+	console.log("this.map: ", this.map)
+	// map.selectedMap.setVisible(false);
+	// console.log(this.map.getLayers('selectedMap'));
+	
+	if(selectedMap == "light"){
+		this.layers[0].setVisible(true)
+		this.layers[1].setVisible(false)
+		
+	}else{
+		this.layers[1].setVisible(true)
+		this.layers[0].setVisible(false)
+		
+	}
+	
+}
+
+var cambio = new OpenStreetMapsClass();

catalog/static/catalog/js/sidtMap.js

@@ -2,6 +2,7 @@
 /// @author Mario Chirinos Colunga
 /// @date 2016-04-15
 ///
+
 Number.prototype.toRadians = function()
 {
 	return this * Math.PI / 180;
@@ -160,3 +161,4 @@ sidtMap.prototype.onMapClick = function(e)
 };
 
 //------------------------------------------------------------------------------
+

catalog/templates/map.html

@@ -239,6 +239,38 @@
 
 {% block content %}
     <div id="map" class="map" tabindex="0"></div>
+
+    <!-- control de version de mapas -->
+    <div class="mapControl">
+        <div id="controlMap" class="controlContainer">
+            <div class="row">
+                <div class="col-lg-6">
+                    <label>
+                        <div class="baseMap" onclick="cambio.changeMap('light')">
+                            <img src="../../static/images/light.png" width="100%" height="100%">
+                            <span class="mapSelector">
+                                <input id="light" type="radio" name="layerOption" checked="">
+                                <span>light</span>
+                            </span>
+                        </div>
+                    </label>
+                </div>
+                <div class="col-lg-6">
+                    <label>
+                        <div class="baseMap" onclick="cambio.changeMap('cycle')">
+                            <img src="../../static/images/cycle.png" width="100%" height="100%">
+                            <span class="mapSelector">
+                                <input id="streets" type="radio" name="layerOption">
+                                <span>cycle</span>
+                            </span>
+                        </div>
+                    </label>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- control de version de mapas -->
+
     <footer class=" page-footer font-small special-color-dark pt-5" style="bottom: 0; position: absolute">
         <!-- Footer Elements -->
         <div class="container">
@@ -275,6 +307,7 @@
         </div>
         <!-- Footer Elements -->
 
+        
         <!-- Copyright -->
         <div class="footer-copyright text-center py-3">© 2019 Copyright:
             <a href="http://geoint.mx/"> Centro de Investigación en Ciencias de Información Geoespacial.</a>
@@ -285,6 +318,8 @@
     <div class="waitingModal"></div>
 {% endblock %}
 
+
+
 {% block templates %}{% include "templates.html" %}{% endblock %}
 {% block modal1 %}{% include "mssgModal.html" %}{% endblock %}