@dative-gpi/foundation-shared-components 1.0.136-maps3 → 1.0.136-maps4

package/components/map/FSMap.vue

@@ -22,36 +22,6 @@
           :color="ColorEnum.Primary"
           :latlng="gpsPosition"
         />
-        <FSMapFeatureGroup
-          v-if="$props.areas"
-          :expected-layers="$props.areas.length"
-          @update:bounds="(bounds) => areaGroupBounds = bounds"
-        >
-          <FSMapPolygon
-            v-for="area in areas"
-            :key="area.id"
-            :color="area.color"
-            :latlngs="area.coordinates.map((coord) => ({lat: coord.latitude, lng: coord.longitude}))"
-            @click="$emit('update:selectedAreaId', area.id)"
-          />
-        </FSMapFeatureGroup>
-        <FSMapMarkerClusterGroup
-          v-if="$props.locations"
-          :expected-layers="$props.locations.length"
-          :disableClusteringAtZoom="defaultZoom"
-          @update:bounds="(bounds) => locationGroupBounds = bounds"
-        >
-          <FSMapMarker
-            v-for="location in $props.locations"
-            :selected="location.id === $props.selectedLocationId"
-            :key="location.id"
-            :label="location.label"
-            :color="location.color ?? ColorEnum.Primary"
-            :icon="location.icon ?? 'mdi-map-marker'"
-            :latlng="{lat: location.address.latitude, lng: location.address.longitude}"
-            @click="$emit('update:selectedLocationId', location.id)"
-          />
-        </FSMapMarkerClusterGroup>
         <slot />
       </template>
     </div>
@@ -124,10 +94,9 @@ import type {} from "leaflet.markercluster";
 import { map as createMap, control, tileLayer, latLngBounds, latLng, type LatLng, type FitBoundsOptions, type ZoomPanOptions, type LatLngBounds } from "leaflet";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { type FSArea } from '@dative-gpi/foundation-shared-domain/models';
 
 import { useBreakpoints, useColors, useSlots } from "../../composables";
-import { ColorEnum, type FSLocation, type MapLayer } from "../../models";
+import { ColorEnum, type MapLayer } from "../../models";
 
 import FSMapLayerButton from "./FSMapLayerButton.vue";
 import FSMapOverlay from "./FSMapOverlay.vue";
@@ -137,19 +106,12 @@ import FSCol from "../FSCol.vue";
 
 import FSMapMarker from "./FSMapMarker.vue";
 import FSMapTileLayer from "./FSMapTileLayer.vue";
-import FSMapFeatureGroup from "./FSMapFeatureGroup.vue";
-import FSMapMarkerClusterGroup from "./FSMapMarkerClusterGroup.vue";
-import FSMapPolygon from "./FSMapPolygon.vue";
 
 export default defineComponent({
   name: "FSMap",
   components: {
     FSMapMarker,
     FSMapTileLayer,
-    FSMapFeatureGroup,
-    FSMapMarkerClusterGroup,
-    FSMapPolygon,
-
     FSMapLayerButton,
     FSMapOverlay,
     FSButton,
@@ -193,19 +155,14 @@ export default defineComponent({
       default: false
     },
     center: {
-      type: Array as PropType<number[]>,
+      type: Array as PropType<number[] | null>,
       required: false,
-      default: () => [45.71, 5.07]
-    },
-    locations: {
-      type: Array as PropType<FSLocation[]>,
-      required: false,
-      default: () => [],
+      default: null
     },
-    areas: {
-      type: Array as PropType<FSArea[]>,
+    bounds: {
+      type: Object as PropType<LatLngBounds | null>,
       required: false,
-      default: () => [],
+      default: null
     },
     currentLayer: {
       type: String as PropType<"map" | "imagery">,
@@ -216,16 +173,6 @@ export default defineComponent({
       type: Array as PropType<string[]>,
       required: false,
       default: () => ["map", "imagery"]
-    },
-    selectedLocationId: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    selectedAreaId: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
     }
   },
   emits: ["update:modelValue", "update:selectedLocationId", "update:selectedAreaId", 'update:overlayMode', 'update:currentLayer', "click:latlng"],
@@ -302,19 +249,6 @@ export default defineComponent({
       return mapLayers.find((layer) => layer.name === props.currentLayer)?.layer ?? mapLayers[0].layer;
     });
 
-    const bounds = computed<LatLngBounds | null>(() => {
-      if(!locationGroupBounds.value && !areaGroupBounds.value) {
-        return null;
-      }
-      let bounds = locationGroupBounds.value;
-      if(bounds && areaGroupBounds.value) {
-        bounds.extend(areaGroupBounds.value);
-      } else if(areaGroupBounds.value) {
-        bounds = areaGroupBounds.value;
-      }
-      return bounds as LatLngBounds;
-    });
-
     const overlaySlots = computed(() => {
       return Object.keys(slots).filter((slot) => slot.startsWith("overlay-")).reduce((acc, slot) => {
         acc[slot.replace("overlay-", "")] = slots[slot];
@@ -393,11 +327,12 @@ export default defineComponent({
         minZoom: 2,
         maxZoom: 22,
         maxBounds: latLngBounds(latLng(-90, -180), latLng(90, 180)),
-        maxBoundsViscosity: 1.0
+        maxBoundsViscosity: 1.0,
+        zoom: defaultZoom,
+        center: props.center ? latLng(props.center[0], props.center[1]) : latLng(48.85782, 2.29521)
       };
 
       map.value = markRaw(createMap(leafletContainer.value, mapOptions));
-      setView(props.center[0], props.center[1], defaultZoom);
       
       map.value.on('click', (e: L.LeafletMouseEvent) => {
         emit('click:latlng', e.latlng);
@@ -427,41 +362,18 @@ export default defineComponent({
       mapResizeObserver.disconnect();
     });
 
-    watch (() => props.center, (center) => {
-      if(!map.value) {
-        return;
-      }
-      setView(center[0], center[1], defaultZoom);
-    });
-
-    watch (() => props.selectedLocationId, (selectedLocationId) => {
-      if(!map.value) {
-        return;
-      }
-      const selectedLocation = props.locations.find((location) => location.id === selectedLocationId);
-      if(!selectedLocation) {
-        return;
-      }
-      flyTo(selectedLocation?.address.latitude, selectedLocation?.address.longitude, defaultZoom, { animate: false });
-    }, { immediate: true });
-
-    watch(() => props.selectedAreaId, (selectedAreaId) => {
-      if(!map.value) {
-        return;
-      }
-      const selectedArea = props.areas.find((area) => area.id === selectedAreaId);
-      if(!selectedArea) {
+    watch ([() => props.center, () => map.value], () => {
+      if(!map.value || !props.center) {
         return;
       }
-      const bounds = latLngBounds(selectedArea.coordinates.map((coord) => latLng(coord.latitude, coord.longitude)));
-      fitBounds(bounds);
+      setView(props.center[0], props.center[1], defaultZoom);
     }, { immediate: true });
 
-    watch( () => bounds.value, (bounds) => {
-      if(!map.value || !bounds) {
+    watch([() => props.bounds, () => map.value], () => {
+      if(!map.value || !props.bounds) {
         return;
       }
-      fitBounds(bounds, { maxZoom: defaultZoom });
+      fitBounds(props.bounds, { maxZoom: defaultZoom });
     });
 
     return {

package/components/map/FSMapMarker.vue

@@ -82,10 +82,10 @@ export default {
           iconSize: [size, size],
           iconAnchor: [size / 2, size / 2],
         });
-      } else if(props.variant === 'location' && props.icon) {
+      } else if(props.variant === 'location') {
         const size = 36;
         icon = divIcon({
-          html: locationMarkerHtml(props.icon, getColors(props.color).base, props.label),
+          html: locationMarkerHtml(props.icon ?? "mdi-map-marker", getColors(props.color).base, props.label),
           iconSize: [size, size],
           className: props.selected ? 'fs-map-marker fs-map-location fs-map-location-selected' : 'fs-map-marker fs-map-location',
           iconAnchor: [size / 2, size / 2],

package/models/map.ts

@@ -1,18 +1,8 @@
 import { type Layer } from "leaflet";
 
-import { type Address } from "@dative-gpi/foundation-shared-domain/models";
-
 export interface MapLayer {
   name : string;
   label: string;
   image: string;
   layer: Layer;
-}
-
-export interface FSLocation {
-  id: string;
-  label: string;
-  icon: string | null;
-  address: Address;
-  color: string | null;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.136-maps3",
+  "version": "1.0.136-maps4",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.136-maps3",
-    "@dative-gpi/foundation-shared-services": "1.0.136-maps3"
+    "@dative-gpi/foundation-shared-domain": "1.0.136-maps4",
+    "@dative-gpi/foundation-shared-services": "1.0.136-maps4"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "01a0f8153b352180a3f2cc7c60e3829da441ff53"
+  "gitHead": "8e418112ce1eb7d3d7a75e3dff0b361d8f513865"
 }