svelte 4.x => 5.0

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

diff --git a/src/components/Map.svelte b/src/components/Map.svelte
index 763495d420c8936f9f5b57aae4cffcd9a892110f..bc2489f35ba74efd03015d562433e7a9c94dccdf 100644 (file)
--- a/src/components/Map.svelte
+++ b/src/components/Map.svelte
@@ -17,8 +17,9 @@
 
   function createMap(container) {
     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: [
@@ -27,6 +28,14 @@
       ],
       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(Nominatim_Config.Map_Tile_URL, {
       attribution: attribution
@@ -118,13 +127,16 @@
     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);
     }
 
     if (!aFeature) return;
@@ -174,10 +186,10 @@
 </script>
 
 <MapPosition />
-<div id="map" use:mapAction />
-<div id="show-map-position" class="leaflet-bar btn btn-sm btn-outline-secondary"
+<div id="map" use:mapAction></div>
+<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 {