Fixed map bounds and view. Fixed logic for clicking regions

public/js/centropais_periurbano.js

@@ -20,8 +20,9 @@ let dateArray = [],
     timeLayer,
     layerControl;
 
-let isZoomed = undefined,
-    bboxes = {};
+let bboxes = {},
+    previousClick,
+    currentClick;
 
 const baseUrl = new URL(window.location.href).origin; // returns "http://localhost:8090"
 // use `${baseUrl}/something`
@@ -86,13 +87,11 @@ const setupMap = (dates) => {
             attribution: "Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL."
         });
 
-        //let bounds = cuencaBufferMask.getBounds();
-        let southWest = L.latLng(19.87, -102.87),
-            northEast = L.latLng(23.02, -99.31),
+        let southWest = L.latLng(19.65, -103.10),
+            northEast = L.latLng(22.65, -99.12),
             bounds = L.latLngBounds(southWest, northEast);
 
         map = L.map("mexmap", {
-            //center: [17.22, -92.28],
             minZoom: 8,
             zoom: 6,
             attributionControl: false,
@@ -128,7 +127,7 @@ const setupMap = (dates) => {
             scrollWheelZoom: true,
             attributionControl: false,
             zoomAnimation: true
-        }).setView([16.96, -92.97], 8);
+        }).setView([21.15, -100.94], 8);
 
         cartoDarkLayerOverlay.addTo(overlay);
         L.control.attribution({ position: "bottomright" }).addTo(overlay);
@@ -255,26 +254,24 @@ const populateMap = async (mapData) => {
             let region = feature.properties.Region;
             // populate bboxes object
             bboxes[region] = layer.getBounds();
-            // what to do when clicking on polygons
+            // what to do when clicking on regions
             layer.on( "click", () => {
-                if (!isZoomed) {
+                currentClick = region;
+                if (currentClick != previousClick) {
                     map.fitBounds(layer.getBounds());
-                    isZoomed = true;
-                    $('#regionSelect').val(region).change();
+                    $("#regionSelect").val(region).change();
                 } else {
-                    map.setView([16.96, -92.97], 8)
-                    isZoomed = false;
-                    $('#regionSelect')[0].selectedIndex = 0
+                    map.setView([21.15, -100.94], 8);
+                    $("#regionSelect")[0].selectedIndex = 0;
+                    currentClick = undefined;
                 }
-                // 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.
+                previousClick = currentClick;
             });
         }
     });
 
     let periurbanoBajio = omnivore.geojson("data/periurbanoBajio.geojson", null, periurbanoBajioLayer)
-        .on('ready', () => {
+        .on("ready", () => {
             // populate combobox
             $("#regionSelect").append("<option disabled value=\"0\"> -- Selecciona una regi&oacute;n --</option>");
             Object.keys(bboxes).forEach( region => {
@@ -286,7 +283,7 @@ const populateMap = async (mapData) => {
             $("#regionSelect").on("change", () => {
                 let region = $("#regionSelect").val();
                 map.fitBounds(bboxes[region]);
-                isZoomed = true;
+                previousClick = region;
             });
         });
     periurbanoBajio.addTo(map);
@@ -321,7 +318,7 @@ const populateMap = async (mapData) => {
             if (layer == userFiles[0]) {
                 glmap.getMapboxMap().setPaintProperty(layer, "fill-opacity", 0.7);
             }
-        })
+        });
 
 /*        glmap.getMapboxMap().addSource("munisLayer", {
             //type: "vector",
@@ -350,9 +347,9 @@ const populateMap = async (mapData) => {
                     "line-color": "grey",
                     "line-width": 5,
                 },
-                'layout': {
-                    'line-join': 'round',
-                    'line-cap': 'round'
+                "layout": {
+                    "line-join": "round",
+                    "line-cap": "round"
                 },
             });
 */
@@ -516,7 +513,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
             } else {
                 glmap.getMapboxMap().setPaintProperty(layer, "fill-opacity", 0.7);
             }
-        })
+        });
     }
 });