added geocoding to circuit editor interface. Made geojson layers adde…

…d through circuit editor attach to the main leaflet control instead of creating a new control
dpinney · Mar 12, 2024 · 4c4803c · 4c4803c
1 parent bddcbfe
commit 4c4803c
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 13 deletions.
diff --git a/omf/static/geoJsonMap/v3/geojsonModal.js b/omf/static/geoJsonMap/v3/geojsonModal.js
@@ -174,8 +174,8 @@ class GeojsonModal { // implements ModalInterface, ObserverInterface
             removeButton.addEventListener('click', function() {
                 if (attachments.hasOwnProperty('geojsonFiles')) {
                     delete attachments.geojsonFiles[filename];
-                    that.#filenameToLayerGroup[filename].layerGroup.remove();
-                    that.#filenameToLayerGroup[filename].layerControl.remove();
+                    LeafletLayer.map.removeLayer(that.#filenameToLayerGroup[filename].layerGroup);
+                    LeafletLayer.control.removeLayer(that.#filenameToLayerGroup[filename].layerGroup);
                     delete that.#filenameToLayerGroup[filename];
                     if (Object.keys(attachments.geojsonFiles).length === 0) {
                         delete attachments.geojsonFiles;
@@ -296,16 +296,14 @@ class GeojsonModal { // implements ModalInterface, ObserverInterface
                     const featureCollection = JSON.parse(obj.json);
                     const layerGroup = L.featureGroup();
                     featureCollection.features.map(f => new Feature(f)).map(f => new LeafletLayer(f, that.#controller)).forEach(ll => layerGroup.addLayer(ll.getLayer()));
-                    const layerControl = L.control.layers(null, {[filename]: layerGroup}, { position: 'topleft', collapsed: false });
                     if (this.#filenameToLayerGroup.hasOwnProperty(filename)) {
-                        this.#filenameToLayerGroup[filename].layerGroup.remove();
-                        this.#filenameToLayerGroup[filename].layerControl.remove();
+                        LeafletLayer.map.removeLayer(that.#filenameToLayerGroup[filename].layerGroup);
+                        LeafletLayer.control.removeLayer(that.#filenameToLayerGroup[filename].layerGroup);
                     }
                     this.#filenameToLayerGroup[filename] = {
                         layerGroup: layerGroup,
-                        layerControl: layerControl
                     };
-                    layerControl.addTo(LeafletLayer.map);
+                    LeafletLayer.control.addOverlay(layerGroup, filename);
                     if (renderContent) {
                         if (obj.displayOnLoad) {
                             layerGroup.addTo(LeafletLayer.map);

diff --git a/omf/static/geoJsonMap/v3/main.js b/omf/static/geoJsonMap/v3/main.js
@@ -76,10 +76,11 @@ function main() {
         renderer: L.canvas()
     });
     LeafletLayer.map.fitBounds(LeafletLayer.nodeLayers.getBounds());
-    addZoomToFitButon();
-    addClusterButton();
     LeafletLayer.control = L.control.layers(baseMaps, overlayMaps, { position: 'topleft', collapsed: false });
     LeafletLayer.control.addTo(LeafletLayer.map);
+    addZoomToFitButon();
+    addClusterButton();
+    addGeocoding();
     // - Disable the following annoying default Leaflet keyboard shortcuts:
     //  - TODO: do a better job and stop the event(s) from propagating in text inputs instead
     document.getElementById('map').onkeydown = function(e) {
@@ -342,21 +343,46 @@ function addClusterButton() {
     button.textContent = 'Toggle Node Grouping';
     button.addEventListener('click', function() {
         LeafletLayer.map.removeLayer(LeafletLayer.nodeLayers);
-        LeafletLayer.control.removeLayer(LeafletLayer.nodeLayers);
+        const overlayMap = [];
+        for (const layer of LeafletLayer.control._layers) {
+            if (layer.overlay === true) {
+                overlayMap.push(layer);
+            }
+        }
+        overlayMap.forEach(layer => LeafletLayer.control.removeLayer(layer.layer));
         if (LeafletLayer.nodeLayers instanceof L.MarkerClusterGroup) {
             LeafletLayer.nodeLayers = L.featureGroup(LeafletLayer.nodeLayers.getLayers());
         } else {
             const nodeLayers = LeafletLayer.nodeLayers.getLayers();
             LeafletLayer.nodeLayers = L.markerClusterGroup();
             nodeLayers.forEach(l => LeafletLayer.nodeLayers.addLayer(l));
         }
-        LeafletLayer.control.addOverlay(LeafletLayer.nodeLayers, 'Nodes');
+        const nodeLayerIndex = overlayMap.findIndex(layer => layer.name === 'Nodes');
+        overlayMap[nodeLayerIndex] = {layer: LeafletLayer.nodeLayers, name: 'Nodes'};
+        for (const layer of overlayMap) {
+            LeafletLayer.control.addOverlay(layer.layer, layer.name);
+        }
         LeafletLayer.map.addLayer(LeafletLayer.nodeLayers);
     });
     div.appendChild(button);
     leafletHookDiv.appendChild(div);
 }
 
+function addGeocoding() {
+    const provider = new GeoSearch.OpenStreetMapProvider();
+    const search = new GeoSearch.GeoSearchControl({
+        provider: provider,
+        position: 'topleft',
+        updateMap: false // - don't update the map because we don't like the default zoom level
+    });
+    // - Custom zoom behavior
+    LeafletLayer.map.on('geosearch/showlocation', function(e) {
+        // - The max zoom level without losing the map is 19
+        LeafletLayer.map.flyTo([e.location.y, e.location.x], 19, {duration: .3});
+    });
+    LeafletLayer.map.addControl(search);
+}
+
 (function loadInterface() {
     const modalInsert = document.createElement('div');
     modalInsert.id = 'modalInsert';

diff --git a/omf/templates/geoJson.html b/omf/templates/geoJson.html
@@ -11,11 +11,14 @@
     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
     <script src="https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script>
-    <!-- Use Graphology library for graph operations -->
-    <script src="/static/geoJsonMap/v3/lib/graphology-0.25.1.min.js"></script>
     <!-- jQuery -->
     <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
     <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
+    <!-- Geocoding -->
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/geosearch.css"/>
+    <script src="https://unpkg.com/[email protected]/dist/geosearch.umd.js"></script>
+    <!-- Use Graphology library for graph operations -->
+    <script src="/static/geoJsonMap/v3/lib/graphology-0.25.1.min.js"></script>
     <!-- CSV parsing -->
     <script type="text/javascript" src="/static/geoJsonMap/v3/lib/papaparse.min.js"></script>
     <!-- Color scale -->

diff --git a/omf/templates/geoJson_offline.html b/omf/templates/geoJson_offline.html
@@ -14,6 +14,9 @@
     <!-- jQuery -->
     <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
     <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
+    <!-- Geocoding -->
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/geosearch.css"/>
+    <script src="https://unpkg.com/[email protected]/dist/geosearch.umd.js"></script>
     <!-- Local --> 
     {{ css }}
     <meta charset="utf-8">