From 52a4cce012c7e3cb6c4b6863e104288f8aafce36 Mon Sep 17 00:00:00 2001 From: Zandre Engelbrecht Date: Mon, 22 Jan 2024 14:57:05 +0200 Subject: [PATCH 1/7] add HTML template --- corehq/apps/geospatial/templates/map_visualization.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/corehq/apps/geospatial/templates/map_visualization.html b/corehq/apps/geospatial/templates/map_visualization.html index 1774f3c427b4..eb2ae55d32a7 100644 --- 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 %} -
+
+
+

+ {% trans 'Layers' %} +

+
+
From e9db230a492cde4aa0873225fec34205744b9267 Mon Sep 17 00:00:00 2001 From: Zandre Engelbrecht Date: Mon, 22 Jan 2024 14:57:31 +0200 Subject: [PATCH 2/7] add styling for layers template --- corehq/apps/geospatial/templates/base_template.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/corehq/apps/geospatial/templates/base_template.html b/corehq/apps/geospatial/templates/base_template.html index 2c5e99c10c08..7ae2a549f15a 100644 --- a/corehq/apps/geospatial/templates/base_template.html +++ b/corehq/apps/geospatial/templates/base_template.html @@ -14,6 +14,19 @@ {{ block.super }} + + {% endblock %} From ca2a055c88c42f323daeed26e681a622528bbc38 Mon Sep 17 00:00:00 2001 From: Zandre Engelbrecht Date: Mon, 22 Jan 2024 14:59:14 +0200 Subject: [PATCH 3/7] implement func to add streets layers to map --- .../geospatial/static/geospatial/js/models.js | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/corehq/apps/geospatial/static/geospatial/js/models.js b/corehq/apps/geospatial/static/geospatial/js/models.js index 5f6d06eb90b4..488f0f888611 100644 --- a/corehq/apps/geospatial/static/geospatial/js/models.js +++ b/corehq/apps/geospatial/static/geospatial/js/models.js @@ -132,8 +132,56 @@ hqDefine('geospatial/js/models', [ if (self.usesClusters) { createClusterLayers(); } + + loadMapBoxStreetsLayers(); }; + 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 createClusterLayers() { // const mapInstance = self.mapInstance; self.mapInstance.on('load', () => { From 62d86c52944ad9bcb61b7cd606a30e54dadd6d76 Mon Sep 17 00:00:00 2001 From: Zandre Engelbrecht Date: Mon, 22 Jan 2024 15:00:39 +0200 Subject: [PATCH 4/7] implement func to toggle streets layers --- .../geospatial/static/geospatial/js/models.js | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/corehq/apps/geospatial/static/geospatial/js/models.js b/corehq/apps/geospatial/static/geospatial/js/models.js index 488f0f888611..6f86320ba50f 100644 --- a/corehq/apps/geospatial/static/geospatial/js/models.js +++ b/corehq/apps/geospatial/static/geospatial/js/models.js @@ -134,6 +134,7 @@ hqDefine('geospatial/js/models', [ } loadMapBoxStreetsLayers(); + addLayersToPanel(); }; function loadMapBoxStreetsLayers() { @@ -182,6 +183,42 @@ hqDefine('geospatial/js/models', [ }); } + 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); + } + }); + } + function createClusterLayers() { // const mapInstance = self.mapInstance; self.mapInstance.on('load', () => { From 4c1b9a0d1e0fff2cbf662183701284b085fa85ae Mon Sep 17 00:00:00 2001 From: Zandre Engelbrecht Date: Mon, 22 Jan 2024 15:00:50 +0200 Subject: [PATCH 5/7] remove commented code --- corehq/apps/geospatial/static/geospatial/js/models.js | 1 - 1 file changed, 1 deletion(-) diff --git a/corehq/apps/geospatial/static/geospatial/js/models.js b/corehq/apps/geospatial/static/geospatial/js/models.js index 6f86320ba50f..28e204efca13 100644 --- a/corehq/apps/geospatial/static/geospatial/js/models.js +++ b/corehq/apps/geospatial/static/geospatial/js/models.js @@ -220,7 +220,6 @@ hqDefine('geospatial/js/models', [ } function createClusterLayers() { - // const mapInstance = self.mapInstance; self.mapInstance.on('load', () => { self.mapInstance.addSource('caseWithGPS', { type: 'geojson', From a1c4a8893509b5096c01ac8de2d5c55174ad8b3d Mon Sep 17 00:00:00 2001 From: Zandre Engelbrecht Date: Mon, 22 Jan 2024 15:15:37 +0200 Subject: [PATCH 6/7] conditionally load streets layers --- .../geospatial/static/geospatial/js/geospatial_map.js | 2 +- corehq/apps/geospatial/static/geospatial/js/models.js | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/corehq/apps/geospatial/static/geospatial/js/geospatial_map.js b/corehq/apps/geospatial/static/geospatial/js/geospatial_map.js index bbb3f0f979cb..58c996b0b957 100644 --- 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 index 28e204efca13..1d37ec69878d 100644 --- 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; @@ -133,8 +134,10 @@ hqDefine('geospatial/js/models', [ createClusterLayers(); } - loadMapBoxStreetsLayers(); - addLayersToPanel(); + if (self.usesStreetsLayers) { + loadMapBoxStreetsLayers(); + addLayersToPanel(); + } }; function loadMapBoxStreetsLayers() { From a665c41aaf5cbbea90b153ba58b8e56101cac005 Mon Sep 17 00:00:00 2001 From: Zandre Engelbrecht Date: Mon, 22 Jan 2024 15:15:57 +0200 Subject: [PATCH 7/7] hide layers toggle menu until loaded --- corehq/apps/geospatial/static/geospatial/js/models.js | 1 + corehq/apps/geospatial/templates/map_visualization.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/corehq/apps/geospatial/static/geospatial/js/models.js b/corehq/apps/geospatial/static/geospatial/js/models.js index 1d37ec69878d..965030040530 100644 --- a/corehq/apps/geospatial/static/geospatial/js/models.js +++ b/corehq/apps/geospatial/static/geospatial/js/models.js @@ -219,6 +219,7 @@ hqDefine('geospatial/js/models', [ menuElement.appendChild(link); } + menuElement.classList.remove('hidden'); }); } diff --git a/corehq/apps/geospatial/templates/map_visualization.html b/corehq/apps/geospatial/templates/map_visualization.html index eb2ae55d32a7..77195945853b 100644 --- a/corehq/apps/geospatial/templates/map_visualization.html +++ b/corehq/apps/geospatial/templates/map_visualization.html @@ -107,7 +107,7 @@ {% endblocktrans %}
-
+