Merge remote-tracking branch 'upstream/master'

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

diff --git a/src/components/Map.svelte b/src/components/Map.svelte
index 2d1270d37b1695dd60812ec48a4896a6df469fc1..7b1318713d7516946a5f438a896603464255eb24 100644 (file)
--- a/src/components/Map.svelte
+++ b/src/components/Map.svelte
@@ -6,33 +6,43 @@
   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 { 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 = [];
 
   function createMap(container) {
-    const attribution = get_config_value('Map_Tile_Attribution') || null;
+    const attribution = Nominatim_Config.Map_Tile_Attribution;
+
     let map = new L.map(container, {
-      attributionControl: (attribution && attribution.length),
+      attributionControl: false,
       scrollWheelZoom: true, // !L.Browser.touch,
       touchZoom: false,
       center: [
-        get_config_value('Map_Default_Lat'),
-        get_config_value('Map_Default_Lon')
+        Nominatim_Config.Map_Default_Lat,
+        Nominatim_Config.Map_Default_Lon
       ],
-      zoom: get_config_value('Map_Default_Zoom')
+      zoom: Nominatim_Config.Map_Default_Zoom
     });
+    if (typeof Nominatim_Config.Map_Default_Bounds !== 'undefined'
+      && Nominatim_Config.Map_Default_Bounds) {
+      map.fitBounds(Nominatim_Config.Map_Default_Bounds);
+    }
+
+    if (attribution && attribution.length) {
+      L.control.attribution({ prefix: '<a href="https://leafletjs.com/">Leaflet</a>' }).addTo(map);
+    }
 
-    L.tileLayer(get_config_value('Map_Tile_URL'), {
+    L.tileLayer(Nominatim_Config.Map_Tile_URL, {
       attribution: attribution
     }).addTo(map);
 
     if (display_minimap) {
-      let osm2 = new L.TileLayer(get_config_value('Map_Tile_URL'), {
+      let osm2 = new L.TileLayer(Nominatim_Config.Map_Tile_URL, {
         minZoom: 0,
         maxZoom: 13,
         attribution: attribution
@@ -52,10 +62,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();
+      }
     };
   }
 
@@ -90,11 +103,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,
@@ -105,6 +117,7 @@
           clickable: false
         }
       );
+      cm.bindTooltip(`Search (${position_marker[0]},${position_marker[1]})`).openTooltip();
       cm.addTo(map);
       dataLayers.push(cm);
     }
@@ -114,17 +127,19 @@
     if (viewbox) {
       let coords = viewbox.split(','); // <x1>,<y1>,<x2>,<y2>
       let bounds = L.latLngBounds([coords[1], coords[0]], [coords[3], coords[2]]);
-      L.rectangle(bounds, {
+      let viewbox_on_map = L.rectangle(bounds, {
         color: '#69d53e',
         weight: 3,
         dashArray: '5 5',
         opacity: 0.8,
-        fill: false
-      }).addTo(map);
+        fill: false,
+        interactive: false
+      });
+      map.addLayer(viewbox_on_map);
+      dataLayers.push(viewbox_on_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;
@@ -134,6 +149,9 @@
       let circle = L.circleMarker([lat, lon], {
         radius: 10, weight: 2, fillColor: '#ff7800', color: 'blue', opacity: 0.75
       });
+      if (position_marker) { // reverse result
+        circle.bindTooltip('Result').openTooltip();
+      }
       map.addLayer(circle);
       dataLayers.push(circle);
     }
@@ -141,7 +159,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 +170,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';
@@ -172,9 +187,9 @@
 
 <MapPosition />
 <div id="map" use:mapAction />
-<div id="show-map-position" class="leaflet-bar btn btn-sm btn-outline-secondary"
+<button id="show-map-position" class="leaflet-bar btn btn-sm btn-outline-secondary"
       on:click|stopPropagation={show_map_position_click}
->show map bounds</div>
+>show map bounds</button>
 
 <style>
   #map {
@@ -196,4 +211,4 @@
     }
   }
 
-</style>
\ No newline at end of file
+</style>