@dative-gpi/foundation-shared-components 1.0.65 → 1.0.67-map-edit

package/components/map/FSMap.vue

@@ -14,7 +14,7 @@
         v-if="map"
       >
         <FSMapTileLayer
-          :layer="actualLayer"
+          :layers="actualLayer"
         />
         <FSMapMarker 
           v-if="gpsPosition"
@@ -22,43 +22,14 @@
           :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"
-            :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>
 
     <FSMapLayerButton
       v-if="$props.allowedLayers?.length && $props.allowedLayers.length > 1"
-      :layers="mapLayers.filter((layer) => $props.allowedLayers?.includes(layer.name) ?? true)"
+      :disabled="$props.disabled"
+      :layers="layers.filter((layer) => $props.allowedLayers?.includes(layer.name) ?? true)"
       :modelValue="$props.currentLayer"
       @update:model-value="$emit('update:currentLayer', $event)"
     />
@@ -69,6 +40,7 @@
     >
       <FSButton
         v-if="$props.showMyLocation"
+        :disabled="$props.disabled"
         icon="mdi-crosshairs-gps"
         color="primary"
         variant="full"
@@ -83,12 +55,14 @@
           gap="0"
         >
           <FSButton
+            :disabled="$props.disabled"
             class="fs-map-zoom-plus-button"
             icon="mdi-plus"
             @click="() => map!.zoomIn()"
             :border="false"
           />
           <FSButton
+            :disabled="$props.disabled"
             class="fs-map-zoom-minus-button"
             icon="mdi-minus"
             @click="() => map!.zoomOut()"
@@ -99,17 +73,19 @@
     </FSCol>
 
     <FSMapOverlay
-      v-if="$slots['overlay']"
+      v-if="overlaySlots && Object.keys(overlaySlots).length"
       :mode="$props.overlayMode"
       @update:mode="$emit('update:overlayMode', $event)"
       @update:height="(height) => overlayHeight = height"
       @update:width="(width) => overlayWidth = width"
     >
       <template
-        #body
+        v-for="(_, name) in overlaySlots"
+        v-slot:[name]="slotData"
       >
         <slot
-          name="overlay"
+          :name="'overlay-' + name"
+          v-bind="slotData"
         />
       </template>
     </FSMapOverlay>
@@ -120,13 +96,10 @@
 import { computed, defineComponent, onMounted, type Ref, provide, type PropType, ref, type StyleValue, watch, onUnmounted, markRaw } from "vue";
 
 import type {} from "leaflet.markercluster";
-import { map as createMap, control, tileLayer, latLngBounds, latLng, type LatLng, LatLngBounds, type FitBoundsOptions } from "leaflet";
+import { map as createMap, control, 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 } from "../../composables";
-import { ColorEnum, type FSLocation, type MapLayer } from "../../models";
+import { useBreakpoints, useColors, useMapLayers, useSlots } from "../../composables";
+import { ColorEnum, MapLayers, MapOverlayPositions } from "../../models";
 
 import FSMapLayerButton from "./FSMapLayerButton.vue";
 import FSMapOverlay from "./FSMapOverlay.vue";
@@ -136,19 +109,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,
@@ -166,15 +132,20 @@ export default defineComponent({
       required: false,
       default: '100%'
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     grayscale: {
       type: Boolean,
       required: false,
       default: false
     },
     overlayMode: {
-      type: String as PropType<'collapse' | 'half' | 'expand'>,
+      type: String as PropType<MapOverlayPositions>,
       required: false,
-      default: 'collapse'
+      default: MapOverlayPositions.Collapse
     },
     showMyLocation: {
       type: Boolean,
@@ -192,50 +163,39 @@ export default defineComponent({
       default: false
     },
     center: {
-      type: Array as PropType<number[]>,
-      required: false,
-      default: () => [45.71, 5.07]
-    },
-    locations: {
-      type: Array as PropType<FSLocation[]>,
+      type: Array as PropType<number[] | null>,
       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">,
+      type: String as PropType<MapLayers>,
       required: false,
-      default: "map"
+      default: MapLayers.Map
     },
     allowedLayers: {
-      type: Array as PropType<string[]>,
+      type: Array as PropType<MapLayers[]>,
       required: false,
-      default: () => ["map", "imagery"]
+      default: () => [MapLayers.Map, MapLayers.Imagery]
     },
-    selectedLocationId: {
-      type: String as PropType<string | null>,
+    zoom: {
+      type: Number,
       required: false,
-      default: null
-    },
-    selectedAreaId: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
+      default: 16
     }
   },
-  emits: ["update:modelValue", "update:selectedLocationId", "update:selectedAreaId", 'update:overlayMode', 'update:currentLayer', "click:latlng"],
+  emits: ['update:overlayMode', 'update:currentLayer', "click:latlng", "update:zoom", "update:center"],
   setup(props, { emit }) {
-    const { $tr } = useTranslationsProvider();
-    const { getColors } = useColors();
+    const { layers } = useMapLayers();
     const { isExtraSmall } = useBreakpoints();
+    const { getColors } = useColors();
+    const { slots } = useSlots();
 
     const leafletContainer = ref<HTMLElement>();
-    const locationGroupBounds = ref<LatLngBounds>();
-    const areaGroupBounds = ref<LatLngBounds>();
     const gpsPosition : Ref<LatLng | null> = ref(null);
     const map: Ref<L.Map | null> = ref(null);
     const overlayHeight = ref<number>();
@@ -243,7 +203,6 @@ export default defineComponent({
 
     provide('map', map);
 
-    const defaultZoom = 16;
     const mapResizeObserver = new ResizeObserver(() => {
       if(!map.value) {
         return;
@@ -251,31 +210,8 @@ export default defineComponent({
       map.value.invalidateSize();
     });
 
-    const mapLayers: MapLayer[] = [
-      {
-        name: "map",
-        label: $tr("ui.map.layer.map", "Map"),
-        image: new URL("../../assets/images/map/map.png", import.meta.url).href,
-        layer: tileLayer(`http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
-          maxZoom: 22,
-          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-          attribution: '© Google Map Data'
-        })
-      },
-      {
-        name: "imagery",
-        label: $tr("ui.map.layer.imagery", "Imagery"),
-        image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
-        layer: tileLayer(`http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
-          maxZoom: 22,
-          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-          attribution: '© Google Map Data'
-        })
-      }
-    ];
-
     const bottomOffset = computed(() => {
-      if (props.overlayMode !== 'expand' && overlayHeight.value && isExtraSmall.value) {
+      if (props.overlayMode !== MapOverlayPositions.Expand && overlayHeight.value && isExtraSmall.value) {
         return overlayHeight.value;
       }
       return 0;
@@ -297,20 +233,14 @@ export default defineComponent({
     }));
 
     const actualLayer = computed(() => {
-      return mapLayers.find((layer) => layer.name === props.currentLayer)?.layer ?? mapLayers[0].layer;
+      return layers.value.find((mapLayer) => mapLayer.name === props.currentLayer)?.layers;
     });
 
-    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];
+        return acc;
+      }, {} as Record<string, unknown>);
     });
 
     const calculateTargetPosition = (target: L.LatLng, zoom?: number) => {
@@ -322,30 +252,55 @@ export default defineComponent({
       return map.value.unproject(targetPoint, zoom);
     }
 
-    const flyTo = (lat: number, lng: number, zoom: number = defaultZoom) => {
+    const flyTo = (lat: number, lng: number, zoom: number, options?: ZoomPanOptions) => {
       if(!map.value) {
         return;
       }
-      map.value.flyTo(calculateTargetPosition(latLng(lat, lng), zoom), zoom);
+
+      if(isExtraSmall.value) {
+        // We wait for bottom offset to be calculated and stable to focus on the right position
+        let tries = 0;
+        let oldBottomOffset = bottomOffset.value;
+        const interval = setInterval(() => {
+          if(oldBottomOffset === bottomOffset.value || tries >= 30) {
+            clearInterval(interval);
+            map.value!.flyTo(calculateTargetPosition(latLng(lat, lng), zoom), zoom, options);
+          }
+          oldBottomOffset = bottomOffset.value;
+          tries++;
+        }, 20);
+        
+      } else {
+        map.value.flyTo(calculateTargetPosition(latLng(lat, lng), zoom), zoom, options);
+      }
     }
 
     const setView = (lat: number, lng: number, zoom: number) => {
       if(!map.value) {
         return;
       }
-      map.value.setView(calculateTargetPosition(latLng(lat, lng)), zoom);
+      map.value.setView(calculateTargetPosition(latLng(lat, lng), zoom), zoom);
     }
 
     const fitBounds = (bounds: LatLngBounds, options?: FitBoundsOptions) => {
-      if(!map.value) {
-        return;
-      }
-      const calculatedBounds = new LatLngBounds(
-        calculateTargetPosition(bounds.getSouthWest()),
-        calculateTargetPosition(bounds.getNorthEast())
-      );
-      map.value.fitBounds(calculatedBounds, options);
-    }
+      if (!map.value) {return;}
+      const paddingTopLeft: [number, number] = [
+        leftOffset.value + 24,
+        24
+      ];
+
+      const paddingBottomRight: [number, number] = [
+        24,
+        bottomOffset.value + 24
+      ];
+      const paddingOptions = {
+        paddingTopLeft,
+        paddingBottomRight,
+        ...options,
+      };
+
+      map.value.fitBounds(bounds, paddingOptions);
+    };
 
     onMounted(() => {
       if(!leafletContainer.value) {
@@ -354,22 +309,39 @@ export default defineComponent({
 
       const mapOptions = {
         zoomControl: false,
-        scrollWheelZoom: props.enableScrollWheelZoom,
+        scrollWheelZoom: props.enableScrollWheelZoom && !props.disabled,
+        dragging: !props.disabled,
+        doubleClickZoom: false,
         minZoom: 2,
         maxZoom: 22,
         maxBounds: latLngBounds(latLng(-90, -180), latLng(90, 180)),
-        maxBoundsViscosity: 1.0
-      };
+        maxBoundsViscosity: 1.0,
+        zoom: props.zoom,
+        center: props.center ? latLng(props.center[0], props.center[1]) : latLng(48.85782, 2.29521)
+      } satisfies L.MapOptions;
 
       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);
       });
 
+      map.value.on('zoomend', () => {
+        if(!map.value) {
+          return;
+        }
+        emit('update:zoom', map.value.getZoom());
+      });
+
+      map.value.on('moveend', () => {
+        if(!map.value) {
+          return;
+        }
+        const center = map.value.getCenter();
+        emit('update:center', [center.lat, center.lng]);
+      });
+
       map.value.attributionControl.remove();
-      // to display google attribution in bottom left corner
       control.attribution({ position: 'bottomleft' }).addTo(map.value);
 
       map.value.on('locationfound', (e: L.LocationEvent) => {
@@ -383,7 +355,7 @@ export default defineComponent({
           return;
         }
 
-        flyTo(e.latlng.lat, e.latlng.lng);
+        flyTo(e.latlng.lat, e.latlng.lng, 14);
       });
       
       mapResizeObserver.observe(leafletContainer.value);
@@ -393,56 +365,70 @@ export default defineComponent({
       mapResizeObserver.disconnect();
     });
 
-    watch (() => props.center, (center) => {
-      if(!map.value) {
+    watch ([() => props.center, () => props.zoom], ([newCenter, newZoom], [oldCenter, oldZoom]) => {
+      if(!map.value || !props.center || !newCenter) {
         return;
       }
-      setView(center[0], center[1], defaultZoom);
-    });
 
-    watch (() => props.selectedLocationId, (selectedLocationId) => {
-      if(!map.value) {
+      if(map.value.getZoom() === newZoom && map.value.getCenter().equals(latLng(newCenter[0], newCenter[1]))) {
         return;
       }
-      const selectedLocation = props.locations.find((location) => location.id === selectedLocationId);
-      if(!selectedLocation) {
-        return;
+
+      if((newCenter[0] !== oldCenter?.[0] || newCenter[1] !== oldCenter?.[1]) && newZoom !== oldZoom) {
+        setView(newCenter[0], newCenter[1], newZoom);
+      }
+      else if ((newCenter[0] !== oldCenter?.[0] || newCenter[1] !== oldCenter?.[1])) {
+        setView(newCenter[0], newCenter[1], map.value.getZoom());
+      }
+      else if(newZoom !== oldZoom) {
+        map.value.setZoom(newZoom);
       }
-      flyTo(selectedLocation?.address.latitude, selectedLocation?.address.longitude);
     }, { immediate: true });
 
-    watch(() => props.selectedAreaId, (selectedAreaId) => {
-      if(!map.value) {
+    watch([() => props.bounds, () => map.value], () => {
+      if(!map.value || !props.bounds) {
         return;
       }
-      const selectedArea = props.areas.find((area) => area.id === selectedAreaId);
-      if(!selectedArea) {
+      fitBounds(props.bounds, { maxZoom: 14 });
+    });
+
+    watch(() => props.enableScrollWheelZoom, (newValue) => {
+      if(!map.value) {
         return;
       }
-      const bounds = latLngBounds(selectedArea.coordinates.map((coord) => latLng(coord.latitude, coord.longitude)));
-      fitBounds(bounds);
+      if(newValue) {
+        map.value.scrollWheelZoom.enable();
+      } else {
+        map.value.scrollWheelZoom.disable();
+      }
     }, { immediate: true });
 
-    watch( () => bounds.value, (bounds) => {
-      if(!map.value || !bounds) {
+    watch(() => props.disabled, (newValue) => {
+      if(!map.value) {
         return;
       }
-      fitBounds(bounds, { maxZoom: defaultZoom });
-    });
+      if(newValue) {
+        map.value.dragging.disable();
+        map.value.scrollWheelZoom.disable();
+      } else {
+        map.value.dragging.enable();
+        if(props.enableScrollWheelZoom) {
+          map.value.scrollWheelZoom.enable();
+        }
+      }
+    }, { immediate: true });
 
     return {
       ColorEnum,
-      defaultZoom,
       leafletContainer,
-      locationGroupBounds,
       overlayHeight,
       overlayWidth,
-      areaGroupBounds,
       map,
       actualLayer,
-      mapLayers,
+      layers,
       gpsPosition,
-      style
+      style,
+      overlaySlots
     };
   }
 });