@dative-gpi/foundation-shared-components 0.0.196 → 0.0.198

package/components/map/FSMap.vue

@@ -96,9 +96,8 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, type PropType, ref, watch } from "vue";
 
-import * as L from "leaflet";
+import type * as L from "leaflet";
 import "leaflet.markercluster";
-import { MarkerClusterGroup } from "leaflet";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
@@ -197,6 +196,8 @@ export default defineComponent({
     const { getColors } = useColors();
     const { $tr } = useTranslationsProvider();
 
+    const LL = window.L;
+
     const innerSelectedLayer = ref(props.selectedLayer);
     const innerModelValue = ref(props.modelValue);
     const editingLocation = ref(false);
@@ -205,23 +206,23 @@ export default defineComponent({
     const defaultZoom = 15;
     const markers: { [key: string]: L.Marker } = {};
     const sites: { [key: string]: L.Polygon } = {};
-    const siteLayerGroup = new L.FeatureGroup();
-    const baseLayerGroup = new L.LayerGroup();
-    const myLocationLayerGroup = new L.LayerGroup();
+    const siteLayerGroup = new LL.FeatureGroup();
+    const baseLayerGroup = new LL.LayerGroup();
+    const myLocationLayerGroup = new LL.LayerGroup();
 
     let map: L.Map;
-    let markerLayerGroup: L.FeatureGroup | MarkerClusterGroup;
+    let markerLayerGroup: L.FeatureGroup | any;
 
     if (props.editable) {
-      markerLayerGroup = new L.FeatureGroup();
+      markerLayerGroup = new LL.FeatureGroup();
     }
     else {
-      markerLayerGroup = new MarkerClusterGroup({
+      markerLayerGroup = new LL.MarkerClusterGroup({
         spiderfyOnMaxZoom: false,
         showCoverageOnHover: false,
         disableClusteringAtZoom: 17,
         iconCreateFunction: function (cluster: any) {
-          return L.divIcon({
+          return LL.divIcon({
             html: `<div>
                     <span>${cluster.getChildCount()}</span>
                    </div>`,
@@ -236,7 +237,7 @@ export default defineComponent({
       {
         name: "osm",
         label: $tr("ui.map.layer.osm", "Map"),
-        layer: L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        layer: LL.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
           maxZoom: 20,
           attribution: '© OpenStreetMap'
         })
@@ -244,7 +245,7 @@ export default defineComponent({
       {
         name: "imagery",
         label: $tr("ui.map.layer.imagery", "Imagery"),
-        layer: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+        layer: LL.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
           attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
           maxZoom: 19
         }),
@@ -264,13 +265,13 @@ export default defineComponent({
       markerLayerGroup.clearLayers();
       innerModelValue.value.forEach((location) => {
         const iconHtml = `<div class="fs-map-location-pin"><i class="${location.icon} mdi v-icon notranslate v-theme--DefaultTheme fs-icon" aria-hidden="true" style="--fs-icon-font-size: 22px;"  ></i></div>`;
-        const icon = L.divIcon({
+        const icon = LL.divIcon({
           html: iconHtml,
           className: 'fs-map-location',
           iconSize: [36, 36],
           iconAnchor: [18, 18],
         });
-        const marker = L.marker([location.address.latitude, location.address.longitude], { icon }).addTo(markerLayerGroup);
+        const marker = LL.marker([location.address.latitude, location.address.longitude], { icon }).addTo(markerLayerGroup);
         markers[location.id] = marker;
         marker.on('click', () => emit('update:selectedLocationId', location.id));
 
@@ -280,7 +281,7 @@ export default defineComponent({
     const displaySites = () => {
       siteLayerGroup.clearLayers();
       props.sites.forEach((site) => {
-        const sitePolygon = L.polygon(site.coordinates.map((coord) => [coord.latitude, coord.longitude]), {
+        const sitePolygon = LL.polygon(site.coordinates.map((coord) => [coord.latitude, coord.longitude]), {
           color: site.color,
           fillColor: site.color + "50",
           fillOpacity: 0.5,
@@ -311,12 +312,12 @@ export default defineComponent({
         zoomControl: false,
         scrollWheelZoom: false,
         minZoom: 2,
-        maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180)),
+        maxBounds: LL.latLngBounds(LL.latLng(-90, -180), LL.latLng(90, 180)),
         maxBoundsViscosity: 1.0
       };
-      map = L.map(mapId, mapOptions).setView([props.center[0], props.center[1]], defaultZoom);
+      map = LL.map(mapId, mapOptions).setView([props.center[0], props.center[1]], defaultZoom);
       map.attributionControl.remove();
-      L.control.attribution({ position: 'bottomleft' }).addTo(map);
+      LL.control.attribution({ position: 'bottomleft' }).addTo(map);
 
       baseLayerGroup.addTo(map);
       siteLayerGroup.addTo(map);
@@ -375,14 +376,14 @@ export default defineComponent({
       map?.on('locationfound', (e: L.LocationEvent) => {
         map?.flyTo(e.latlng, map?.getZoom() ?? defaultZoom);
         const iconHtml = `<div class="fs-map-mylocation-pin"></div>`;
-        const icon = L.divIcon({
+        const icon = LL.divIcon({
           html: iconHtml,
           className: 'fs-map-mylocation',
           iconSize: [16, 16],
           iconAnchor: [8, 8],
         });
         myLocationLayerGroup.clearLayers();
-        L.marker(e.latlng, { icon }).addTo(myLocationLayerGroup);
+        LL.marker(e.latlng, { icon }).addTo(myLocationLayerGroup);
       });
     };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.196",
+  "version": "0.0.198",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.196",
-    "@dative-gpi/foundation-shared-services": "0.0.196",
+    "@dative-gpi/foundation-shared-domain": "0.0.198",
+    "@dative-gpi/foundation-shared-services": "0.0.198",
     "leaflet": "1.9.4",
     "leaflet.markercluster": "1.5.3"
   },
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "ca582d1a902c182973377dd0cae44181088f932f"
+  "gitHead": "0144f9154fe11cd6f311cb8c73e9eea17a90e229"
 }