♻️ [leafletMap] rewrite to composition API

src/components/LeafletMap.vue

@@ -0,0 +1,80 @@
+<template>
+    <div :id="mapId"></div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+
+import { useEventStore } from '@stores/event';
+
+import type { FeatureGroup, Layer, Map as LMap } from 'leaflet';
+const leafletMap = ref<LMap>();
+
+const props = withDefaults(
+    defineProps<{
+        id: string;
+        height?: string;
+        startLat?: number;
+        startLong?: number;
+        startZoom?: number;
+        layers?: Layer[];
+        centerGroup?: FeatureGroup;
+    }>(),
+    {
+        height: '500px',
+        startLat: 48.783_200_898_738_78,
+        startLong: 9.180_364_608_764_65,
+        startZoom: 15,
+        layers: () => [],
+        centerGroup: undefined,
+    }
+);
+
+const mapId = computed(() => `map-${props.id}`);
+
+const redraw = () => {
+    leafletMap.value?.remove();
+
+    const map = window.L.map(mapId.value, {
+        layers: props.layers,
+    }).setView([props.startLat, props.startLong], props.startZoom);
+
+    leafletMap.value = map;
+
+    window.L.tileLayer('https://{s}/{z}/{x}/{y}.png', {
+        attribution:
+            '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors',
+        subdomains: ['maps.leitstellenspiel.de/tiles/osm'],
+        maxZoom: 17,
+        noWrap: true,
+    }).addTo(map);
+
+    if (props.centerGroup) map.fitBounds(props.centerGroup.getBounds());
+
+    useEventStore().createAndDispatchEvent({
+        name: 'leaflet-map-loaded',
+        detail: { id: mapId.value, map },
+    });
+
+    return map;
+};
+
+const setView = (lat: number, long: number, zoom: number = undefined) =>
+    leafletMap.value?.setView(
+        [lat, long],
+        zoom ?? leafletMap.value?.getZoom() ?? 15
+    );
+
+const $emit = defineEmits<{ (event: 'mounted', map: LMap): void }>();
+
+defineExpose({ map: leafletMap, redraw, setView });
+
+onMounted(() => {
+    $emit('mounted', redraw());
+});
+</script>
+
+<style scoped lang="sass">
+div
+    height: v-bind(height)
+</style>

src/components/setting/location/LocationSelect.vue

@@ -10,7 +10,7 @@
             :start-lat="location[0]"
             :start-long="location[1]"
             :start-zoom="location[2]"
-            :layers="[locationMarker]"
+            :layers="locationMarker ? [locationMarker] : []"
             @mounted="mapMounted"
         ></leaflet-map>
     </lightbox>
@@ -21,7 +21,7 @@ import { computed, onBeforeMount, ref } from 'vue';
 
 import { useRootStore } from '@stores/index';
 
-import LeafletMap from '../../leaflet-map.vue';
+import LeafletMap from '../../LeafletMap.vue';
 import Lightbox from '../../LightboxWrapper.vue';
 import { useI18n } from '../../../i18n';
 

src/modules/extendedMap/components/mapCSSFilter/preview.vue

@@ -28,7 +28,7 @@ export default Vue.extend<
     components: {
         LeafletMap: () =>
             import(
-                /* webpackChunkName: "components/leaflet-map" */ '../../../../components/leaflet-map.vue'
+                /* webpackChunkName: "components/leafletMap" */ '../../../../components/LeafletMap.vue'
             ),
     },
     props: {

src/modules/generalExtensions/assets/mapSearches.ts

@@ -125,13 +125,12 @@ export default (
         window.map.addEventListener('moveend', resetNewBuildingMarker);
     }
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    window.addEventListener(
-        'lssmv4-map-loaded',
-        ({ detail: { id, map } }: CustomEvent<{ id: string; map: LMap }>) =>
-            addToMap(map, id)
-    );
+    LSSM.$stores.event.addListener({
+        name: 'leaflet-map-loaded',
+        listener: ({
+            detail: { id, map },
+        }: CustomEvent<{ id: string; map: LMap }>) => addToMap(map, id),
+    });
 
     if (window.location.pathname === '/' && !mapSearchOnMap) return;
 

src/modules/heatmap/main.ts

@@ -307,12 +307,11 @@ export default <ModuleMainFunction>(async ({
     if (window.location.pathname.startsWith(`/profile/${window.user_id}`)) {
         if (window.map) initHeatmap(window.map);
 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        window.addEventListener(
-            'lssmv4-map-loaded',
-            ({ detail: { map } }: CustomEvent<{ id: string; map: Map }>) =>
-                initHeatmap(map)
-        );
+        LSSM.$stores.event.addListener({
+            name: 'leaflet-map-loaded',
+            listener: ({
+                detail: { map },
+            }: CustomEvent<{ id: string; map: Map }>) => initHeatmap(map),
+        });
     }
 });

src/modules/redesign/components/profile.vue

@@ -682,7 +682,7 @@ export default Vue.extend<
     components: {
         LeafletMap: () =>
             import(
-                /* webpackChunkName: "components/leaflet-map" */ '../../../components/leaflet-map.vue'
+                /* webpackChunkName: "components/leafletMap" */ '../../../components/LeafletMap.vue'
             ),
     },
     data() {

src/modules/redesign/components/verband/bsr.vue

@@ -85,7 +85,7 @@ export default Vue.extend<
     components: {
         LeafletMap: () =>
             import(
-                /* webpackChunkName: "components/leaflet-map" */ '../../../../components/leaflet-map.vue'
+                /* webpackChunkName: "components/leafletMap" */ '../../../../components/LeafletMap.vue'
             ),
         EnhancedTable: () =>
             import(

src/modules/redesign/components/verband/gebauede.vue

@@ -114,7 +114,7 @@ export default Vue.extend<
     components: {
         LeafletMap: () =>
             import(
-                /* webpackChunkName: "components/leaflet-map" */ '../../../../components/leaflet-map.vue'
+                /* webpackChunkName: "components/leafletMap" */ '../../../../components/LeafletMap.vue'
             ),
         EnhancedTable: () =>
             import(