Merge pull request #34002 from dimagi/ze/add-mapbox-streets-layers

Add Mapbox Streets Layers
dimagi · Jan 24, 2024 · 36cce77 · 36cce77
2 parents 3e5e386 + a665c41
commit 36cce77
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 4 deletions.
diff --git a/corehq/apps/geospatial/static/geospatial/js/geospatial_map.js b/corehq/apps/geospatial/static/geospatial/js/geospatial_map.js
@@ -225,7 +225,7 @@ hqDefine("geospatial/js/geospatial_map", [
     };
 
     function initMap() {
-        mapModel = new models.Map();
+        mapModel = new models.Map(false, true);
         mapModel.initMap(MAP_CONTAINER_ID);
 
         let selectedCases = ko.computed(function () {

diff --git a/corehq/apps/geospatial/static/geospatial/js/models.js b/corehq/apps/geospatial/static/geospatial/js/models.js
@@ -91,10 +91,11 @@ hqDefine('geospatial/js/models', [
         };
     };
 
-    var Map = function (usesClusters) {
+    var Map = function (usesClusters, usesStreetsLayers) {
         var self = this;
 
         self.usesClusters = usesClusters;
+        self.usesStreetsLayers = usesStreetsLayers;
 
         self.mapInstance;
         self.drawControls;
@@ -132,10 +133,97 @@ hqDefine('geospatial/js/models', [
             if (self.usesClusters) {
                 createClusterLayers();
             }
+
+            if (self.usesStreetsLayers) {
+                loadMapBoxStreetsLayers();
+                addLayersToPanel();
+            }
         };
 
+        function loadMapBoxStreetsLayers() {
+            self.mapInstance.on('load', () => {
+                self.mapInstance.addSource('mapbox-streets', {
+                    type: 'vector',
+                    url: 'mapbox://mapbox.mapbox-streets-v8',
+                });
+
+                self.mapInstance.addLayer({
+                    id: 'landuse_overlay',
+                    source: 'mapbox-streets',
+                    'source-layer': 'landuse_overlay',
+                    type: 'line',
+                    paint: {
+                        'line-color': '#800080', // purple
+                    },
+                    layout: {
+                        'visibility': 'none',
+                    },
+                });
+                self.mapInstance.addLayer({
+                    id: 'road',
+                    source: 'mapbox-streets',
+                    'source-layer': 'road',
+                    type: 'line',
+                    paint: {
+                        'line-color': '#000000', // black
+                    },
+                    'layout': {
+                        'visibility': 'none',
+                    },
+                });
+                self.mapInstance.addLayer({
+                    id: 'admin',
+                    source: 'mapbox-streets',
+                    'source-layer': 'admin',
+                    type: 'line',
+                    paint: {
+                        'line-color': '#800080', // purple
+                    },
+                    'layout': {
+                        'visibility': 'none',
+                    },
+                });
+            });
+        }
+
+        function addLayersToPanel() {
+            self.mapInstance.on('idle', () => {
+                const toggleableLayerIds = ['landuse_overlay', 'admin', 'road'];
+                const menuElement = document.getElementById('layer-toggle-menu');
+                for (const layerId of toggleableLayerIds) {
+                    // Skip if layer doesn't exist or button is already present
+                    if (!self.mapInstance.getLayer(layerId) || document.getElementById(layerId)) {
+                        continue;
+                    }
+
+                    const link = document.createElement('a');
+                    link.id = layerId;
+                    link.role = 'button';
+                    link.href = '#';
+                    link.textContent = layerId;
+                    link.className = 'btn btn-secondary';
+                    link.onclick = function (e) {
+                        const clickedLayer = this.textContent;
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        const visibility = self.mapInstance.getLayoutProperty(clickedLayer, 'visibility');
+                        if (visibility === 'visible') {
+                            self.mapInstance.setLayoutProperty(clickedLayer, 'visibility', 'none');
+                            this.classList.remove('active');
+                        } else {
+                            this.classList.add('active');
+                            self.mapInstance.setLayoutProperty(clickedLayer, 'visibility', 'visible');
+                        }
+                    };
+
+                    menuElement.appendChild(link);
+                }
+                menuElement.classList.remove('hidden');
+            });
+        }
+
         function createClusterLayers() {
-            // const mapInstance = self.mapInstance;
             self.mapInstance.on('load', () => {
                 self.mapInstance.addSource('caseWithGPS', {
                     type: 'geojson',

diff --git a/corehq/apps/geospatial/templates/base_template.html b/corehq/apps/geospatial/templates/base_template.html
@@ -14,6 +14,19 @@
  {{ block.super }}
  <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css">
  <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.0/mapbox-gl-draw.css" type="text/css">
+ <style>
+    #layer-toggle-menu {
+      background: #fff;
+      position: absolute;
+      z-index: 1;
+      top: 10px;
+      left: 10px;
+      max-height: 150px;
+      border: 1px solid rgba(0, 0, 0, 0.4);
+      overflow-y: auto;
+    }
+  </style>
+
  {% endblock %}
 
 

diff --git a/corehq/apps/geospatial/templates/map_visualization.html b/corehq/apps/geospatial/templates/map_visualization.html
@@ -106,7 +106,13 @@
         Previous disbursement was cleared.
     {% endblocktrans %}
 </div>
-<div id="geospatial-map" style="height: 500px"></div>
+<div id="geospatial-map" style="height: 500px">
+    <div id="layer-toggle-menu" class="btn-group-vertical hidden">
+        <h4 class="text-center">
+            {% trans 'Layers' %}
+        </h4>
+    </div>
+</div>
 
 <!-- For Pagination -->
 <div class="panel-body-datatable">