Zoom to regions on click and with combo box

public/centropais/index.html

@@ -66,7 +66,7 @@
             <div class="row d-flex flex-fill">
                 <div class="col-6" id="mexmap">
                     <div class="picker">
-                        <select id="indicatorSelect"></select>
+                        <select id="regionSelect"></select>
                     </div>
                     <div class="text-center loader">
                         <i class="fa fa-spinner2 fa-spin fa-5x loadSpinner"></i><br>

public/js/centropais_periurbano.js

@@ -20,6 +20,9 @@ let dateArray = [],
     timeLayer,
     layerControl;
 
+let isZoomed = undefined,
+    bboxes = {};
+
 const baseUrl = new URL(window.location.href).origin; // returns "http://localhost:8090"
 // use `${baseUrl}/something`
 
@@ -247,9 +250,45 @@ const populateMap = async (mapData) => {
                 fillOpacity: 0.2,
                 fillColor: colors[feature.properties["Region"]]};
         },
-        interactive: false
+        interactive: true,
+        onEachFeature: (feature, layer) => {
+            let region = feature.properties.Region;
+            // populate bboxes object
+            bboxes[region] = layer.getBounds();
+            // what to do when clicking on polygons
+            layer.on( "click", () => {
+                if (!isZoomed) {
+                    map.fitBounds(layer.getBounds());
+                    isZoomed = true;
+                    $('#regionSelect').val(region).change();
+                } else {
+                    map.setView([16.96, -92.97], 8)
+                    isZoomed = false;
+                    $('#regionSelect')[0].selectedIndex = 0
+                }
+                // TODO: what to do if user clicks, pans, and then clicks another polygon
+                //       right now it zooms out...
+                // need to check if clicked polygon is the same as before.
+            });
+        }
     });
-    let periurbanoBajio = omnivore.geojson("data/periurbanoBajio.geojson", null, periurbanoBajioLayer);
+
+    let periurbanoBajio = omnivore.geojson("data/periurbanoBajio.geojson", null, periurbanoBajioLayer)
+        .on('ready', () => {
+            // populate combobox
+            $("#regionSelect").append("<option disabled value=\"0\"> -- Selecciona una regi&oacute;n --</option>");
+            Object.keys(bboxes).forEach( region => {
+                $("#regionSelect").append(`<option value="${region}"> ${region}</option>`);
+            });
+            // select disabled option
+            $("#regionSelect")[0].selectedIndex = 0
+            // zoom to region when user selects something
+            $("#regionSelect").on("change", () => {
+                let region = $("#regionSelect").val();
+                map.fitBounds(bboxes[region]);
+                isZoomed = true;
+            });
+        });
     periurbanoBajio.addTo(map);
 
     // create mvt layers
@@ -268,7 +307,7 @@ const populateMap = async (mapData) => {
             "sources": {},
             "layers": []
         },
-        pane: "urbanizationPane"
+        //pane: "urbanizationPane"
     }).addTo(map);
 
     // after mapboxGL map is ready with styles do this:
@@ -334,7 +373,7 @@ const populateMap = async (mapData) => {
         };
         var overlays = {
             "<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=\"periurbanoBajio\">&nbsp; 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,
@@ -487,7 +526,6 @@ L.timeDimension.layer.Tile = (layer, options) => {
 
 // hide initial screen and show map
 $("#startHeader").remove();
-$(".picker").remove();
 $("#initial-backdrop").remove();
 $("#mainContainer")[0].style.setProperty("display", "flex", "important");
 let title = $("#title");