Handle all page changes via page store (#70)

[nominatim-ui.git] / src / components / Map.svelte

diff --git a/src/components/Map.svelte b/src/components/Map.svelte
index 948bfe0a61f5a1665af4f393370eda255bfae71b..d77b81ddb17983bad5c39f63fb513d8ccbd55ec7 100644 (file)
--- a/src/components/Map.svelte
+++ b/src/components/Map.svelte
@@ -1,16 +1,18 @@
 
 <script>
   import * as L from 'leaflet';
-  import * as LMM from 'leaflet-minimap';
+  import 'leaflet-minimap';
   import 'leaflet/dist/leaflet.css';
   import 'leaflet-minimap/dist/Control.MiniMap.min.css';
 
   import { get } from 'svelte/store';
-  import { get_config_value } from '../lib/config_reader.js'
-  import { map_store, current_result_store, current_request_latlon } from '../lib/stores.js';
+  import { get_config_value } from '../lib/config_reader.js';
+  import { map_store } from '../lib/stores.js';
   import MapPosition from '../components/MapPosition.svelte';
 
   export let display_minimap = false;
+  export let current_result = null;
+  export let position_marker = null;
 
   let dataLayers = [];
 
@@ -42,7 +44,7 @@
 
     const MapPositionControl = L.Control.extend({
       options: { position: 'topright' },
-      onAdd: () => { return document.getElementById('show-map-position') }
+      onAdd: () => { return document.getElementById('show-map-position'); }
     });
     map.addControl(new MapPositionControl());
 
@@ -52,10 +54,13 @@
   function mapAction(container) {
     let map = createMap(container);
     map_store.set(map);
-    setMapData(get(current_result_store));
+    setMapData(current_result);
 
     return {
-      destroy: () => { map.remove() }
+      destroy: () => {
+        map_store.set(null);
+        map.remove();
+      }
     };
   }
 
@@ -79,9 +84,9 @@
     let map = get(map_store);
     if (!map) { return; }
 
-    dataLayers.forEach(function(layer) {
+    dataLayers.forEach(function (layer) {
       map.removeLayer(layer);
-    })
+    });
   }
 
   function setMapData(aFeature) {
@@ -90,11 +95,10 @@
 
     resetMapData();
 
-    let request_latlon = get(current_request_latlon);
-    if (request_latlon) {
-      // We don't need a marker, but an L.circle instance changes radius once you zoom in/out
+    if (position_marker) {
+      // We don't need a marker, but L.circle would change radius when you zoom in/out
       let cm = L.circleMarker(
-        request_latlon,
+        position_marker,
         {
           radius: 5,
           weight: 2,
@@ -123,8 +127,7 @@
       }).addTo(map);
     }
 
-    // nothing to do
-    if (!aFeature) { return; }
+    if (!aFeature) return;
 
     let lat = aFeature.centroid ? aFeature.centroid.coordinates[1] : aFeature.lat;
     let lon = aFeature.centroid ? aFeature.centroid.coordinates[0] : aFeature.lon;
@@ -141,7 +144,7 @@
 
     if (geojson) {
       var geojson_layer = L.geoJson(
-        // https://leafletjs.com/reference-1.0.3.html#path-option
+        // https://leafletjs.com/reference-1.7.1.html#path-option
         parse_and_normalize_geojson_string(geojson),
         {
           style: function () {
@@ -152,17 +155,14 @@
       map.addLayer(geojson_layer);
       dataLayers.push(geojson_layer);
       map.fitBounds(geojson_layer.getBounds());
+    } else if (lat && lon && position_marker) {
+      map.fitBounds([[lat, lon], position_marker], { padding: [50, 50] });
     } else if (lat && lon) {
       map.setView([lat, lon], 10);
-    } else {
-      map.fitWorld();
     }
   }
 
-  current_result_store.subscribe(aFeature => {
-    setMapData(aFeature);  
-  });
-
+  $: setMapData(current_result);
 
   function show_map_position_click(e) {
     e.target.style.display = 'none';
@@ -196,4 +196,4 @@
     }
   }
 
-</style>
\ No newline at end of file
+</style>