Added styled periurbano region and custom pane for tiles. Hide/show tiles on layer control switch

public/js/centropais_periurbano.js

@@ -8,8 +8,7 @@
 /* globals Promise, omnivore */
 /* exported layerControl */
 
-let monthArray = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
-    dateArray = [],
+let dateArray = [],
     userFiles = [],
     dateMin,
     dateMax,
@@ -19,8 +18,7 @@ let monthArray = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio"
     glmap,
     osmLayer, cartoLightLayer, cartoDarkLayer,
     timeLayer,
-    layerControl,
-    tiles;
+    layerControl;
 
 const baseUrl = new URL(window.location.href).origin; // returns "http://localhost:8090"
 // use `${baseUrl}/something`
@@ -163,11 +161,9 @@ const setupMap = (dates) => {
 
 const populateMap = async (mapData) => {
 
-    //tiles = mapboxLayer("urbanization_year");
-
     let map = mapData.map;
 
-    let munisLayer = L.geoJson(null, {
+/*    let munisLayer = L.geoJson(null, {
         style: {
             stroke: true,
             weight: 5,
@@ -177,8 +173,8 @@ const populateMap = async (mapData) => {
         },
         interactive: false
     });
-    //let munis = omnivore.geojson("data/municipios.geojson", null, munisLayer);
-    //munis.addTo(map);
+    let munis = omnivore.geojson("data/municipios.geojson", null, munisLayer);
+    munis.addTo(map);
 
     let corredorLayer = L.geoJson(null, {
         style: {
@@ -192,8 +188,8 @@ const populateMap = async (mapData) => {
         },
         interactive: false
     });
-    //let corredor = omnivore.geojson("data/corredor_bajio.geojson", null, corredorLayer);
-    //corredor.addTo(map);
+    let corredor = omnivore.geojson("data/corredor_bajio.geojson", null, corredorLayer);
+    corredor.addTo(map);
 
     let bufferConLayer = L.geoJson(null, {
         style: {
@@ -207,8 +203,8 @@ const populateMap = async (mapData) => {
         },
         interactive: false
     });
-    //let bufferCon = omnivore.geojson("data/buffer_corredor_con_locs.geojson", null, bufferConLayer);
-    //bufferCon.addTo(map);
+    let bufferCon = omnivore.geojson("data/buffer_corredor_con_locs.geojson", null, bufferConLayer);
+    bufferCon.addTo(map);
 
     let bufferSinLayer = L.geoJson(null, {
         style: {
@@ -222,21 +218,57 @@ const populateMap = async (mapData) => {
         },
         interactive: false
     });
-    //let bufferSin = omnivore.geojson("data/buffer_corredor_sin_locs.geojson", null, bufferSinLayer);
-    //bufferSin.addTo(map);
+    let bufferSin = omnivore.geojson("data/buffer_corredor_sin_locs.geojson", null, bufferSinLayer);
+    bufferSin.addTo(map);
+*/
+
+    let colors = {
+        "Aguascalientes": "#f40b1f",
+        "San Luis Potosi": "#f40b1f",
+        "Rioverde": "#f40b1f",
+        "La Piedad-Pénjamo": "#f40b1f",
+        "Moroleón-Uriangato": "#f40b1f",
+        "Corredor del Bajío": "#f40b1f",
+        "Tramo San Juan del Rio - Querétaro": "#fddfb9",
+        "Tramo Querétaro - Celaya": "#fb9a99",
+        "Tramo Celaya - Salamanca": "#33a09b",
+        "Tramo Salamanca - Irapuato": "#de6eb4",
+        "Tramo Irapuato - León": "#4db0ec",
+        "Tramo León - San Fracisco del Rincón": "#2be829"
+    };
+
+    let periurbanoBajioLayer = L.geoJson(null, {
+        style: feature => {
+            return {stroke: true,
+                weight: 1,
+                color: colors[feature.properties["Region"]],
+                opacity: 0.2,
+                fill: true,
+                fillOpacity: 0.2,
+                fillColor: colors[feature.properties["Region"]]};
+        },
+        interactive: false
+    });
+    let periurbanoBajio = omnivore.geojson("data/periurbanoBajio.geojson", null, periurbanoBajioLayer);
+    periurbanoBajio.addTo(map);
 
     // create mvt layers
     userFiles.forEach(f => {
         mapboxLayer(f);
     });
 
+    // define leaflet pane with higher z-index so tiles are on top of other stuff
+    map.createPane("urbanizationPane");
+    map.getPane("urbanizationPane").style.zIndex = 650;
+
     glmap = L.mapboxGL({
         accesToken: "no-token",
         style: {
             "version": 8,
             "sources": {},
             "layers": []
-        }
+        },
+        pane: "urbanizationPane"
     }).addTo(map);
 
     // after mapboxGL map is ready with styles do this:
@@ -252,28 +284,39 @@ const populateMap = async (mapData) => {
             }
         })
 
-        //glmap.getMapboxMap().addLayer(tiles);
-
-        /*glmap.getMapboxMap().addSource("munisvt", {
-            type: "vector",
-            tiles: [`${baseUrl}/periurbano_2015/mvt/{z}/{x}/{y}?geom_column=geom&columns=gridcode`],
-            //data: "http://localhost:8090/centropais/data/municipios.geojson",
-            maxzoom: 19,
-            minzoom: 6
+/*        glmap.getMapboxMap().addSource("munisLayer", {
+            //type: "vector",
+            //tiles: [`${baseUrl}/periurbano_2015/mvt/{z}/{x}/{y}?geom_column=geom&columns=gridcode,grd_urb`],
+            type: "geojson",
+            data: "http://localhost:8090/centropais/data/municipios.geojson",
+            tolerance: 5
         });
 
         glmap.getMapboxMap().addLayer({
-            id: "munisvt",
-            source: "munisvt",
-            "source-layer": "periurbano_2015", //table name
-            //"layout": {},
+            id: "munisFill",
+            source: "munisLayer",
+            //"source-layer": "periurbano_2015", //table name
             type: "fill",
             paint: {
-                "fill-opacity": 0.5,
-                "fill-color": "#088"
+                "fill-opacity": 0.1,
+                "fill-color": "grey"
             }
-        });*/
-
+        })
+            .addLayer({
+                id: "munisBorder",
+                source: "munisLayer",
+                type: "line",
+                paint: {
+                    "line-opacity": 0.15,
+                    "line-color": "grey",
+                    "line-width": 5,
+                },
+                'layout': {
+                    'line-join': 'round',
+                    'line-cap': 'round'
+                },
+            });
+*/
         timeDimensionControl.addTo(map);
         // Pass dummy geojson layer to timeDimension in order to register and sync
         timeLayer = L.timeDimension.layer.Tile(L.geoJSON(), {
@@ -290,11 +333,13 @@ const populateMap = async (mapData) => {
             "OpenStreetMap": osmLayer
         };
         var overlays = {
-            //"<span id=\"bufferSin\"><svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(196,60,57,0.25)\" stroke=\"#c43c39\"></rect></svg>&nbsp; Interfaz periurbana del Corredor del Baj&iacute;o de<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2km <b>sin</b> localidades de m&aacute;s 10mil habitantes</span>": bufferSin,
-            //"<span id=\"bufferCon\"><svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(213,190,245,0.25)\" stroke=\"#d5bef5\"></rect></svg>&nbsp; Interfaz periurbana del Corredor del Baj&iacute;o de<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2km <b>con</b> localidades de m&aacute;s 10mil habitantes</span>": bufferCon,
-            //"<span id=\"corredor\"><svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(0,240,2,0.05)\" stroke=\"#00ff00\"></rect></svg>&nbsp; Corredor del Baj&iacute;o</span>": corredor,
-            //"<span id=\"munis\"><svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(128,128,128, 0.05)\" stroke=\"#808080\"></rect></svg>&nbsp; Contexto municipal</span>": munis,
-        };
+            "<span id=\"gradoUrbanizacion\">&nbsp; Grado de urbanizaci&oacute;n</span>": timeLayer,
+            "<span id=\"periurbanoBajio\">Regi&oacute;n periurbana y del corredor del Baj&iacute;o</span>": periurbanoBajio,
+            /*"<span id=\"bufferSin\"><svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(196,60,57,0.25)\" stroke=\"#c43c39\"></rect></svg>&nbsp; Interfaz periurbana del Corredor del Baj&iacute;o de<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2km <b>sin</b> localidades de m&aacute;s 10mil habitantes</span>": bufferSin,
+            "<span id=\"bufferCon\"><svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(213,190,245,0.25)\" stroke=\"#d5bef5\"></rect></svg>&nbsp; Interfaz periurbana del Corredor del Baj&iacute;o de<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2km <b>con</b> localidades de m&aacute;s 10mil habitantes</span>": bufferCon,
+            "<span id=\"corredor\"><svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(0,240,2,0.05)\" stroke=\"#00ff00\"></rect></svg>&nbsp; Corredor del Baj&iacute;o</span>": corredor,
+            "<span id=\"munis\"><svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(128,128,128, 0.05)\" stroke=\"#808080\"></rect></svg>&nbsp; Contexto municipal</span>": munis,
+        */};
 
         // fix for leaflet-mapbox-gl v. 0.0.11 that adds map's to tile pane:
         // get children of map tile pane, create array from it and iterate
@@ -324,10 +369,10 @@ const mapboxLayer = (table) => {
             "fill-color": [
                 "match",
                 ["get", "grd_urb"],
-                "Bajo", "rgb(49,54,149)",
+                "Bajo", "rgb(49,149,54)",
                 "Medio", "rgb(255,255,191)",
                 "Alto", "rgb(158,1,66)",
-                /* other values */ "#ccc"
+                "#ccc" // other values
             ]
         }
     }
@@ -365,7 +410,7 @@ const setupTimeDimensionControl = () => {
 }
 
 L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
-    _setAvailableTimes: function() {
+    _setAvailableTimes: function () {
         if (this.options.times) {
             return L.TimeDimension.Util.parseTimesExpression(this.options.times);
         } else if (this.options.timeInterval) {
@@ -379,7 +424,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
         }
     },
 
-    onAdd: function(map) {
+    onAdd: function (map) {
         // Don't call prototype so this_update() does not get called twice
         //L.TimeDimension.Layer.prototype.onAdd.call(this, map);
         this._map = map;
@@ -393,24 +438,24 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
         this._update();
     },
 
-    onRemove: function(map) {
+    onRemove: function (map) {
         this._timeDimension.unregisterSyncedLayer(this);
         this._timeDimension.off("timeloading", this._onNewTimeLoading, this);
         this._timeDimension.off("timeload", this._update, this);
         //this._baseLayer.getContainer().style.display = "none";
-        /*Object.keys(allTiles).forEach(layer => { // hide all tiles
+        Object.keys(allTiles).forEach(layer => { // hide all tiles
             glmap.getMapboxMap().setPaintProperty(layer, "fill-opacity", 0);
-        });*/
+        });
         //this.eachLayer(map.removeLayer, map);
         //this._map = null;
     },
 
-    isReady: function(time) {
+    isReady: function (time) {
         // to be implemented for each type of layer
         return true;
     },
 
-    _update: function() {
+    _update: function () {
         if (!this._baseLayer || !this._map) {
             return;
         }
@@ -420,17 +465,11 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
         //TODO: get current time, parse quarter and compare tile value. Incremental add over time
         // get data for time
         let d = new Date(time),
-            year = d.getFullYear().toString(),
-            m = d.getUTCMonth(),
-            yeartrimester = year + "." + (m / 3 + 1),
-            yearQ = `Q${m/3+1} ${year}`;
-            //month = monthArray[m].toLowerCase(),
-            //monthYear = `${month}_${year}`;
+            year = d.getFullYear().toString();
 
         // Update title
         let title = $("#title");
         title.html(`<h2>Crecimiento urbano en la regi&oacute;n metropolitana centro pa&iacute;s en ${year}</h2>`);
-        // styleTiles based on yeartrimester value
 
         Object.keys(allTiles).forEach(layer => {
             if (layer.split("periurbano_")[1] !== year) { // hide all other years
@@ -458,9 +497,6 @@ $("#mexmap").show();
 $("#odTableRow").removeClass("align-self-center");
 $("#odCard").hide();
 
-/*setupMap()
-    .then(map => populateMap(map));*/
-
 d3.json("https://unpkg.com/d3-time-format@2.1.1/locale/es-MX.json").then(async locale => {
 
     d3.timeFormatDefaultLocale(locale);