Refacotring: update to maplibre 3.4, drop dependency on intermediate …

…library

UI/Map/MaplibreMap.svelte

@@ -1,50 +1,78 @@
 <script lang="ts">
-  /**
-   * The 'MaplibreMap' maps various event sources onto MapLibre.
-   *
-   * As it replaces the old 'MinimapObj' onto MapLibre and the existing codebase, this is sometimes a bit awkward
-   */
-  import { onMount } from "svelte"
-  import { Map } from "@onsvisual/svelte-maps"
-  import type { Map as MaplibreMap } from "maplibre-gl"
-  import type { Readable, Writable } from "svelte/store"
-  import { AvailableRasterLayers } from "../../Models/RasterLayers"
-  import { writable } from "svelte/store"
-
-  /**
-   * Beware: this map will _only_ be set by this component
-   * It should thus be treated as a 'store' by external parties
-   */
-  export let map: Writable<MaplibreMap>
-
-  export let attribution = false
-  export let center: Readable<{ lng: number; lat: number }> = writable({ lng: 0, lat: 0 })
-
-  onMount(() => {
-    $map.on("load", function () {
-      $map.resize()
+    /**
+     * The 'MaplibreMap' maps various event sources onto MapLibre.
+     *
+     * As it replaces the old 'MinimapObj' onto MapLibre and the existing codebase, this is sometimes a bit awkward
+     */
+    import {onDestroy, onMount} from "svelte"
+    import type {Map} from "maplibre-gl"
+    import * as maplibre from "maplibre-gl"
+    import type {Readable, Writable} from "svelte/store"
+    import {get, writable} from "svelte/store"
+    import {AvailableRasterLayers} from "../../Models/RasterLayers"
+    import {Utils} from "../../Utils";
+
+    /**
+     * Beware: this map will _only_ be set by this component
+     * It should thus be treated as a 'store' by external parties
+     */
+    export let map: Writable<Map>
+
+    let container: HTMLElement
+
+
+    export let attribution = false
+    export let center: Readable<{ lng: number; lat: number }> = writable({lng: 0, lat: 0})
+    export let zoom: Readable<number> = writable(1)
+
+    const styleUrl = AvailableRasterLayers.maplibre.properties.url
+
+    let _map: Map
+    onMount(() => {
+
+
+        _map = new maplibre.Map({
+            container,
+            style: styleUrl,
+            zoom: get(zoom),
+            center: get(center),
+            maxZoom: 24,
+            interactive: true,
+            attributionControl: false,
+
+        });
+
+        _map.on("load", function () {
+            _map.resize()
+        })
+        map.set(_map)
+
     })
-  })
-  const styleUrl = AvailableRasterLayers.maplibre.properties.url
+    onDestroy(async () => {
+        await Utils.waitFor(250);
+        if (_map) _map.remove();
+        map = null;
+    });
+
 </script>
 
+<svelte:head>
+    <link
+            href="./maplibre-gl.css"
+            rel="stylesheet"
+    />
+</svelte:head>
+
 <main>
-  <Map
-    bind:center
-    bind:map={$map}
-    {attribution}
-    css="./maplibre-gl.css"
-    id="map"
-    location={{ lng: 0, lat: 0, zoom: 0 }}
-    maxzoom="24"
-    style={styleUrl}
-  />
+    <div bind:this={container} class="map" id="map" style="      position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;"></div>
+
 </main>
 
 <style>
-  main {
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
+
+    
 </style>

UI/Map/ShowDataLayer.ts

@@ -161,13 +161,13 @@ class PointRenderingLayer {
             })
         }
 
-        const marker = new Marker(el).setLngLat(loc).setOffset(iconAnchor).addTo(this._map)
+        const marker = new Marker({ element: el}).setLngLat(loc).setOffset(iconAnchor).addTo(this._map)
         store
             .map((tags) => this._config.pitchAlignment.GetRenderValue(tags).Subs(tags).txt)
-            .addCallbackAndRun((pitchAligment) => marker.setPitchAlignment(pitchAligment))
+            .addCallbackAndRun((pitchAligment) => marker.setPitchAlignment(<any> pitchAligment))
         store
             .map((tags) => this._config.rotationAlignment.GetRenderValue(tags).Subs(tags).txt)
-            .addCallbackAndRun((pitchAligment) => marker.setRotationAlignment(pitchAligment))
+            .addCallbackAndRun((pitchAligment) => marker.setRotationAlignment(<any> pitchAligment))
         if (feature.geometry.type === "Point") {
             // When the tags get 'pinged', check that the location didn't change
             store.addCallbackAndRunD(() => {