@dative-gpi/foundation-shared-components 1.0.137-maps2 → 1.0.137-maps3

package/components/map/FSMap.vue

@@ -14,7 +14,7 @@
         v-if="map"
       >
         <FSMapTileLayer
-          :layer="actualLayer"
+          :layers="actualLayer"
         />
         <FSMapMarker 
           v-if="gpsPosition"
@@ -96,7 +96,7 @@ import { map as createMap, control, tileLayer, latLngBounds, latLng, type LatLng
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
 import { useBreakpoints, useColors, useSlots } from "../../composables";
-import { ColorEnum, type MapLayer } from "../../models";
+import { ColorEnum, MapLayers, MapOverlayPositions, type MapLayer } from "../../models";
 
 import FSMapLayerButton from "./FSMapLayerButton.vue";
 import FSMapOverlay from "./FSMapOverlay.vue";
@@ -135,9 +135,9 @@ export default defineComponent({
       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,
@@ -165,14 +165,19 @@ export default defineComponent({
       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]
+    },
+    dirtyZoom: {
+      type: Number,
+      required: false,
+      default: 16
     }
   },
   emits: ["update:modelValue", "update:selectedLocationId", "update:selectedAreaId", 'update:overlayMode', 'update:currentLayer', "click:latlng"],
@@ -192,7 +197,7 @@ export default defineComponent({
 
     provide('map', map);
 
-    const defaultZoom = 16;
+    const defaultZoom = ref(props.dirtyZoom);
     const mapResizeObserver = new ResizeObserver(() => {
       if(!map.value) {
         return;
@@ -202,29 +207,53 @@ export default defineComponent({
 
     const mapLayers: MapLayer[] = [
       {
-        name: "map",
+        name: MapLayers.Map,
         label: $tr("ui.map-layer.map", "Map"),
         image: new URL("../../assets/images/map/map.png", import.meta.url).href,
-        layer: tileLayer(`https://{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'
-        })
+        layers: [
+          tileLayer(`https://{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',
+            className: 'fs-map-tile-base-layer'
+          })
+        ]
       },
       {
-        name: "imagery",
+        name: MapLayers.Imagery,
         label: $tr("ui.map-layer.imagery", "Imagery"),
         image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
-        layer: tileLayer(`https://{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'
-        })
+        layers: [
+          tileLayer(`https://{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',
+            className: 'fs-map-tile-base-layer'
+          })
+        ]
+      },
+      {
+        name: MapLayers.Snow,
+        label: $tr("ui.map-layer.snow", "Snow ski map"),
+        image: new URL("../../assets/images/map/snow.png", import.meta.url).href,
+        layers: [
+          tileLayer(`https://{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',
+            className: 'fs-map-tile-base-layer fs-map-tile-grayscale-layer'
+          }),
+          tileLayer(`https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png`, {
+            maxZoom: 18,
+            attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors & ODbL, &copy; <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
+            className: 'fs-map-tile-base-layer'
+          })
+        ]
       }
     ];
 
     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;
@@ -246,7 +275,7 @@ export default defineComponent({
     }));
 
     const actualLayer = computed(() => {
-      return mapLayers.find((layer) => layer.name === props.currentLayer)?.layer ?? mapLayers[0].layer;
+      return mapLayers.find((mapLayer) => mapLayer.name === props.currentLayer)?.layers ?? mapLayers[0].layers;
     });
 
     const overlaySlots = computed(() => {
@@ -265,7 +294,7 @@ export default defineComponent({
       return map.value.unproject(targetPoint, zoom);
     }
 
-    const flyTo = (lat: number, lng: number, zoom: number = defaultZoom, options?: ZoomPanOptions) => {
+    const flyTo = (lat: number, lng: number, zoom: number = defaultZoom.value, options?: ZoomPanOptions) => {
       if(!map.value) {
         return;
       }
@@ -328,7 +357,7 @@ export default defineComponent({
         maxZoom: 22,
         maxBounds: latLngBounds(latLng(-90, -180), latLng(90, 180)),
         maxBoundsViscosity: 1.0,
-        zoom: 5,
+        zoom: defaultZoom.value,
         center: props.center ? latLng(props.center[0], props.center[1]) : latLng(48.85782, 2.29521)
       };
 
@@ -366,16 +395,23 @@ export default defineComponent({
       if(!map.value || !props.center) {
         return;
       }
-      setView(props.center[0], props.center[1], defaultZoom);
+      setView(props.center[0], props.center[1], defaultZoom.value);
     }, { immediate: true });
 
     watch([() => props.bounds, () => map.value], () => {
       if(!map.value || !props.bounds) {
         return;
       }
-      fitBounds(props.bounds, { maxZoom: defaultZoom });
+      fitBounds(props.bounds, { maxZoom: defaultZoom.value });
     });
 
+    watch(() => props.dirtyZoom, (newZoom) => {
+      defaultZoom.value = newZoom;
+      if(map.value) {
+        map.value.setZoom(newZoom);
+      }
+    }, { immediate: true });
+
     return {
       ColorEnum,
       defaultZoom,

package/components/map/FSMapOverlay.vue

@@ -1,16 +1,16 @@
 <template>
   <v-overlay
     v-if="isExtraSmall"
-    :modelValue="$props.mode === 'expand'"
+    :modelValue="$props.mode === MapOverlayPositions.Expand"
     :contained="true"
-    @click="$emit('update:mode', 'collapse')"
+    @click="$emit('update:mode', MapOverlayPositions.Collapse)"
     zIndex="0"
   />
   <div
     v-show="isExtraSmall"
     ref="mobileOverlayWrapper"
     class="fs-map-overlay-mobile"
-    :style="{ height: $props.mode === 'expand' ? '90%' : ($props.mode === 'half' ? '60%' : 'auto') }"
+    :style="{ height: $props.mode === MapOverlayPositions.Expand ? '90%' : ($props.mode === MapOverlayPositions.Half ? '60%' : 'auto') }"
   >
     <FSCard
       width="100%"
@@ -29,15 +29,15 @@
           @mousedown="onClick"
         >
           <FSIcon>
-            {{ $props.mode === 'expand' ? 'mdi-chevron-down' : 'mdi-chevron-up' }}
+            {{ $props.mode === MapOverlayPositions.Expand ? 'mdi-chevron-down' : 'mdi-chevron-up' }}
           </FSIcon>
         </FSRow>
         <slot
-          v-if="$props.mode === 'collapse'"
+          v-if="$props.mode === MapOverlayPositions.Collapse"
           name="collapsed"
         />
         <FSCol
-          v-if="$props.mode !== 'collapse'"
+          v-if="$props.mode !== MapOverlayPositions.Collapse"
           height="fill"
           style="min-height: 0;"
         >
@@ -70,6 +70,8 @@ import { defineComponent, type PropType, onUnmounted, onMounted, ref } from "vue
 
 import { useBreakpoints } from "../../composables";
 
+import { MapOverlayPositions } from '@dative-gpi/foundation-shared-components/models';
+
 import FSCard from "../FSCard.vue";
 import FSIcon from "../FSIcon.vue";
 import FSCol from "../FSCol.vue";
@@ -85,9 +87,9 @@ export default defineComponent({
   },
   props: {
     mode: {
-      type: String as PropType<"collapse" | "half" | "expand">,
+      type: String as PropType<MapOverlayPositions>,
       required: false,
-      default: "collapse"
+      default: MapOverlayPositions.Collapse
     }
   },
   emits: ["update:mode", "update:height", "update:width"],
@@ -101,11 +103,11 @@ export default defineComponent({
     const desktopResizeObserver = ref<ResizeObserver | null>(null);
 
     const onClick = (): void => {
-      if (props.mode === "expand") {
-        emit("update:mode", "collapse");
+      if (props.mode === MapOverlayPositions.Expand) {
+        emit("update:mode", MapOverlayPositions.Collapse);
         return;
       }
-      emit("update:mode", "expand");
+      emit("update:mode", MapOverlayPositions.Expand);
     }
 
     onMounted(() => {
@@ -144,6 +146,7 @@ export default defineComponent({
     return {
       mobileOverlayWrapper,
       isTouchScreenEnabled,
+      MapOverlayPositions,
       desktopOverlay,
       isExtraSmall,
       onClick

package/components/map/FSMapTileLayer.vue

@@ -12,15 +12,15 @@ import { MAP } from './keys';
 export default {
   name: 'FSMapTileLayer',
   props: {
-    layer: {
-      type: Object as PropType<Layer>,
+    layers: {
+      type: Object as PropType<Layer[]>,
       required: false
     }
   },
   setup(props) {
     const map = inject<Ref<Map | null>>(MAP);
 
-    const lastLayer = props.layer;
+    let lastLayers = props.layers;
 
     if(!map) {
       throw new Error('FSMapTileLayer must be used inside a FSMap component');
@@ -31,20 +31,26 @@ export default {
     }
 
     const updateLayer = () => {
-      if (!props.layer || !map.value) {
+      if (!props.layers || !map.value) {
         return;
       }
 
-      if(lastLayer) {
-        map.value.removeLayer(lastLayer);
+      if(lastLayers) {
+        lastLayers.forEach(layer => {
+          layer.removeFrom(map.value!);
+        });
       }
 
-      props.layer.addTo(map.value);
+      lastLayers = [];
+
+      props.layers.forEach(layer => {
+        lastLayers?.push(layer.addTo(map.value!));
+      });
     };
 
     onMounted(updateLayer);
 
-    watch(() => props.layer, updateLayer);
+    watch(() => props.layers, updateLayer);
   }
 };
 </script>

package/components/selects/FSSelectMapLayer.vue

@@ -0,0 +1,68 @@
+<template>
+  <FSSelectField
+    :items="items"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      #item-prepend="{ item }"
+    >
+      <FSIcon
+        :icon="item.icon"
+      />
+    </template>
+  </FSSelectField>
+</template>
+
+<script lang="ts">
+import type { PropType} from "vue";
+import { defineComponent } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+
+import { MapLayers } from '@dative-gpi/foundation-shared-components/models';
+
+import FSSelectField from "../fields/FSSelectField.vue";
+import FSIcon from '@dative-gpi/foundation-shared-components/components/FSIcon.vue';
+
+export default defineComponent({
+  name: "FSSelectMapLayer",
+  components: {
+    FSIcon,
+    FSSelectField
+  },
+  props: {
+    modelValue: {
+      type: [String, Array] as PropType<MapLayers | MapLayers[]>,
+      required: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup() {
+    const { $tr } = useTranslationsProvider();
+
+    const items = [
+      {
+        id: MapLayers.Map,
+        icon: 'mdi-map',
+        label: $tr("ui.map-layer.map", "Map")
+      },
+      {
+        id: MapLayers.Imagery,
+        icon: 'mdi-satellite',
+        label: $tr("ui.map-layer.imagery", "Imagery")
+      },
+      {
+        id: MapLayers.Snow,
+        icon: 'mdi-snowflake',
+        label: $tr("ui.map-layer.snow", "Snow ski map")
+      }
+    ]
+
+    return {
+      items
+    };
+  }
+});
+</script>

package/models/map.ts

@@ -1,8 +1,20 @@
 import { type Layer } from "leaflet";
 
 export interface MapLayer {
-  name : string;
+  name : MapLayers;
   label: string;
   image: string;
-  layer: Layer;
+  layers: Layer[];
+}
+
+export enum MapLayers {
+  Map = "map",
+  Imagery = "imagery",
+  Snow= "snow"
+}
+
+export enum MapOverlayPositions {
+  Expand = "expand",
+  Half = "half",
+  Collapse = "collapse",
 }

package/package.json

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

package/styles/components/fs_map.scss

@@ -6,7 +6,15 @@
   .fs-leaflet-container {
     width: 100%;
     height: 100%;
-    filter: grayscale(var(--fs-map-container-grayscale));
+    z-index: 0;
+
+    .fs-map-tile-base-layer {
+      filter: grayscale(var(--fs-map-container-grayscale));
+    }
+
+    .fs-map-tile-grayscale-layer {
+      filter: grayscale(100%);
+    }
   }
 
   .fs-map-overlay-mobile {