@dative-gpi/foundation-shared-components 0.0.216 → 0.0.218

package/components/map/FSMap.vue

@@ -137,7 +137,7 @@ import "leaflet.markercluster";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { type Address, type FSArea } from '@dative-gpi/foundation-shared-domain/models';
 
-import { clusterMarker, locationMarker, myLocationMarker } from "../../utils";
+import { clusterMarkerHtml, locationMarkerHtml, myLocationMarkerHtml } from "../../utils";
 import { ColorEnum, type FSLocation, type MapLayer } from "../../models";
 import { useColors, useAddress, useBreakpoints } from "../../composables";
 
@@ -323,7 +323,13 @@ export default defineComponent({
     const displayLocations = () => {
       markerLayerGroup.clearLayers();
       innerModelValue.value.forEach((location) => {
-        const icon = locationMarker(location.icon, getColors(location.color).base, L);
+        const size = 36;
+        const icon = L.divIcon({
+          html: locationMarkerHtml(location.icon, getColors(location.color).base),
+          iconSize: [size, size],
+          className: 'fs-map-location',
+          iconAnchor: [size / 2, size / 2],
+        });
         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));
@@ -369,7 +375,13 @@ export default defineComponent({
           showCoverageOnHover: false,
           disableClusteringAtZoom: 17,
           iconCreateFunction: function (cluster: any) {
-            return clusterMarker(cluster.getChildCount(), L);
+            const size = 36;
+            return L.divIcon({
+              html: clusterMarkerHtml(cluster.getChildCount()),
+              className: 'fs-map-location fs-map-location-full',
+              iconSize: [size, size],
+              iconAnchor: [size / 2, size / 2],
+            });
           }
         });
       }
@@ -448,7 +460,13 @@ export default defineComponent({
       map.locate();
       map.on('locationfound', (e: L.LocationEvent) => {
         map.panTo(calculateTargetPosition(e.latlng));
-        const icon = myLocationMarker(L);
+        const size= 16;
+        const icon = L.divIcon({
+          html: myLocationMarkerHtml(L),
+          className: 'fs-map-mylocation',
+          iconSize: [size, size],
+          iconAnchor: [size / 2, size / 2],
+        });
         myLocationLayerGroup.clearLayers();
         LL.marker(e.latlng, { icon }).addTo(myLocationLayerGroup);
       });
@@ -505,7 +523,7 @@ export default defineComponent({
           if (entry.target.id === `left-overlay-${mapId}`) {
             leftOverlayWidth.value = entry.contentRect.width;
           }
-          if(entry.target.id === `left-overlay-mobile-${mapId}`) {
+          if (entry.target.id === `left-overlay-mobile-${mapId}`) {
             leftOverlayHeight.value = entry.contentRect.height;
           }
         });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.216",
+  "version": "0.0.218",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.216",
-    "@dative-gpi/foundation-shared-services": "0.0.216"
+    "@dative-gpi/foundation-shared-domain": "0.0.218",
+    "@dative-gpi/foundation-shared-services": "0.0.218"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "f4cd126d13779ae55d565f2b11efd30f338757f3"
+  "gitHead": "acf47fef8b7fea244ba21efefb07251c976eef22"
 }

package/utils/leafletMarkers.ts

@@ -1,38 +1,23 @@
-export const locationMarker = (icon: string, color: string, L: any, size = 36) => {
+export const locationMarkerHtml = (icon: string, color: string) => {
   const iconHtml = `
   <div style="--fs-map-mylocation-pin-color-alpha:${color}50;--fs-map-location-pin-color: ${color}">
     <i class="${icon} mdi notranslate v-theme--DefaultTheme fs-icon" aria-hidden="true" style="--fs-icon-font-size: 22px;" />
   </div>`;
 
-  return L.divIcon({
-    html: iconHtml,
-    iconSize: [size, size],
-    className: 'fs-map-location',
-    iconAnchor: [size / 2, size / 2],
-  });
+  return iconHtml;
 }
 
-export const clusterMarker = (label: string, L: any, size = 36) => {
+export const clusterMarkerHtml = (label: string) => {
   const iconHtml = `
   <div class="fs-map-cluster">
     <span>${label}</span>
   </div>`;
 
-  return L.divIcon({
-    html: iconHtml,
-    className: 'fs-map-location fs-map-location-full',
-    iconSize: [size, size],
-    iconAnchor: [size / 2, size / 2],
-  })
+  return iconHtml;
 }
 
-export const myLocationMarker = (L: any, size = 16) => {
+export const myLocationMarkerHtml = () => {
   const iconHtml = `<div class="fs-map-mylocation-pin" />`;
 
-  return L.divIcon({
-    html: iconHtml,
-    className: 'fs-map-mylocation',
-    iconSize: [size, size],
-    iconAnchor: [size / 2, size / 2],
-  });
+  return iconHtml;
 }