@rural-environmental-registry/map_component 1.0.0 → 1.2.0

package/src/components/fa-icon/FontAwesomeIcon.vue

@@ -0,0 +1,44 @@
+<template>
+  <FontAwesomeIcon :icon="['fas', iconName]" />
+</template>
+
+<script setup lang="ts">
+  import { library } from '@fortawesome/fontawesome-svg-core'
+  import {
+    faCheck,
+    faChevronLeft,
+    faChevronRight,
+    faXmark,
+    faTerminal,
+    faFileLines,
+    faUpload,
+    faPencil,
+    faTrash,
+    faChevronDown
+  } from '@fortawesome/free-solid-svg-icons'
+  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+  import { FaIconName } from '../../types'
+
+  type IconProps = {
+    iconName: FaIconName
+  }
+
+  defineProps<IconProps>()
+
+  library.add(
+    faCheck,
+    faXmark,
+    faChevronRight,
+    faChevronLeft,
+    faTerminal,
+    faFileLines,
+    faUpload,
+    faPencil,
+    faTrash,
+    faChevronDown
+  )
+</script>
+
+<style>
+  @import '@fortawesome/fontawesome-svg-core/styles.css';
+</style>

package/src/components/loading/Loading.vue

@@ -0,0 +1,25 @@
+<template>
+  <div
+    v-if="isLoading"
+    class="map-loading"
+  >
+    <img src="../../assets/icons/loading.gif" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  defineProps<{ isLoading: boolean }>()
+</script>
+
+<style>
+  .map-container .map-loading {
+    position: absolute;
+    inset: 0px;
+    backdrop-filter: blur(var(--mapa-size-base-2));
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--mapa-base-backdrop);
+    z-index: 1500;
+  }
+</style>

package/src/components/map/LeafletMap.vue

@@ -0,0 +1,183 @@
+<template>
+  <div
+    :id="mapOptions.config.id || 'map'"
+    style="height: inherit; width: inherit"
+  />
+</template>
+
+<script setup lang="ts">
+  import L from 'leaflet'
+  import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+  import DrawingControlHandler from '../../handlers/drawingControl'
+  import MapHandler from '../../handlers/mapHandler'
+  import { DEFAULT_MAP_OPTIONS } from '../../handlers/constants'
+  import MapToolsHandler from '../../handlers/mapToolsHandler'
+  import { resolveMapToolsConfig } from '../../handlers/toolsConstants'
+  import { resolveDrawingPathOptions, type MemorialDrawShape } from '../../utils/drawingPathOptions'
+  import { bindMarkerZoomStability } from '../../utils/stableMarker'
+  import {
+    DrawingConfig,
+    DrawingEvent,
+    MapConfig,
+    MapConfigConfig,
+    MapLayers,
+    MapToolsConfig,
+    MeasureCompleteEvent,
+    MemorialConfig
+  } from '../../types'
+
+  const emit = defineEmits<{
+    (e: 'startLoading'): void
+    (e: 'stopLoading'): void
+    (e: 'onDrawing', data: DrawingEvent): void
+    (e: 'onFullscreenChange', active: boolean): void
+    (e: 'onMeasureComplete', data: MeasureCompleteEvent): void
+  }>()
+
+  type MapProps = {
+    mapOptions: MapConfig
+    layers: MapLayers
+    drawingOptions?: DrawingConfig
+    memorialOptions?: MemorialConfig
+    toolsOptions?: MapToolsConfig
+    fullscreenContainer?: HTMLElement | null
+  }
+
+  const props = defineProps<MapProps>()
+
+  const map = ref<L.Map>()
+  const layerControl = ref<L.Control.Layers>()
+  const drawItemsGroup = ref<L.FeatureGroup>()
+
+  let mapHandlerInstance: MapHandler | null = null
+  let mapToolsHandler: MapToolsHandler | null = null
+  let unbindMarkerZoomStability: (() => void) | null = null
+
+  const setupMarkerZoomStability = (): void => {
+    unbindMarkerZoomStability?.()
+    unbindMarkerZoomStability = null
+
+    if (props.mapOptions?.config?.stabilizeMarkersOnZoom === false) return
+    if (!map.value || !drawItemsGroup.value) return
+
+    unbindMarkerZoomStability = bindMarkerZoomStability(map.value, drawItemsGroup.value)
+  }
+
+  onMounted(async () => {
+    initMap()
+    if (props.drawingOptions?.show) handleDrawingControls()
+    await nextTick()
+    handleMapTools()
+    await nextTick()
+    mapToolsHandler?.alignTopRightControls()
+  })
+
+  onBeforeUnmount(() => {
+    unbindMarkerZoomStability?.()
+    unbindMarkerZoomStability = null
+    mapToolsHandler?.destroy()
+    mapToolsHandler = null
+  })
+
+  const initMap = (): void => {
+    const { config } = props.mapOptions
+    const mapConfig: MapConfigConfig = {
+      ...DEFAULT_MAP_OPTIONS,
+      ...config,
+      ...(resolveMapToolsConfig(props.toolsOptions) ? { zoomControl: false } : {})
+    }
+
+    mapHandlerInstance = new MapHandler(mapConfig)
+
+    const emitterCallback = (eventName: string) => {
+      if (eventName === 'startLoading') emit('startLoading')
+      if (eventName === 'stopLoading') emit('stopLoading')
+    }
+
+    mapHandlerInstance.init(props.layers, emitterCallback)
+
+    map.value = mapHandlerInstance.map
+    layerControl.value = mapHandlerInstance.layerControl
+  }
+
+  const resolveFullscreenContainer = (): HTMLElement | null => {
+    if (props.fullscreenContainer) return props.fullscreenContainer
+    const fromMap = map.value?.getContainer()?.closest('.map-container')
+    return fromMap instanceof HTMLElement ? fromMap : null
+  }
+
+  const handleMapTools = (): void => {
+    const fullscreenContainer = resolveFullscreenContainer()
+    if (!resolveMapToolsConfig(props.toolsOptions) || !map.value || !fullscreenContainer) return
+
+    mapToolsHandler = new MapToolsHandler(
+      map.value,
+      props.toolsOptions,
+      mapHandlerInstance!.initialView,
+      drawItemsGroup.value ?? null,
+      fullscreenContainer,
+      {
+        onFullscreenChange: (active) => emit('onFullscreenChange', active),
+        onMeasureComplete: (data) => emit('onMeasureComplete', data)
+      }
+    )
+
+    ;(map.value as L.Map & { alignTopRightControls?: () => void }).alignTopRightControls = () =>
+      mapToolsHandler?.alignTopRightControls()
+  }
+
+  const handleDrawingControls = (): void => {
+    drawItemsGroup.value = new L.FeatureGroup()
+    drawItemsGroup.value.addTo(map.value!)
+
+    const drawingControlHandler = new DrawingControlHandler(map.value!, drawItemsGroup.value, props.drawingOptions)
+
+    map.value!.pm.addControls(drawingControlHandler.options)
+
+    drawingControlHandler.handleDrawingEvents((data: DrawingEvent) => {
+      emit('onDrawing', data)
+    })
+
+    drawItemsGroup.value = drawingControlHandler.drawItemsGroup
+    map.value = drawingControlHandler.map
+
+    mapToolsHandler?.setDrawItemsGroup(drawItemsGroup.value)
+    setupMarkerZoomStability()
+  }
+
+  const centerMap = (): void => {
+    mapToolsHandler?.centerMap()
+  }
+
+  const enterFullscreen = (): void => {
+    mapToolsHandler?.enterFullscreen()
+  }
+
+  const exitFullscreen = (): void => {
+    mapToolsHandler?.exitFullscreen()
+  }
+
+  const toggleFullscreen = (): void => {
+    mapToolsHandler?.toggleFullscreen()
+  }
+
+  const toggleMeasureArea = (): void => {
+    mapToolsHandler?.toggleMeasureArea()
+  }
+
+  const getDrawingPathOptions = (shape: MemorialDrawShape) =>
+    resolveDrawingPathOptions(map.value, props.drawingOptions, shape)
+
+  defineExpose({
+    map,
+    layerControl,
+    drawItemsGroup,
+    leaflet: L,
+    getDrawingPathOptions,
+    centerMap,
+    enterFullscreen,
+    exitFullscreen,
+    toggleFullscreen,
+    toggleMeasureArea
+  })
+</script>

package/src/components/menu/ChildMenu.vue

@@ -0,0 +1,112 @@
+<template>
+  <ElMenuItem
+    :index="data.key"
+    class="child-menu"
+  >
+    <template #title>
+      <div class="child-menu-row">
+        <div class="child-layer-title">
+          <span
+            :style="{
+              borderColor: data.style.fillColor,
+              backgroundColor: data.style.color
+            }"
+            class="child-layer-legend"
+          />
+
+          <span>{{ data.name }}</span>
+        </div>
+        <span class="switch-component">
+          <ElSwitch
+            v-model="active"
+            @click.stop
+          >
+            <template #active-action>
+              <FontAwesomeIcon iconName="check" />
+            </template>
+            <template #inactive-action>
+              <FontAwesomeIcon iconName="xmark" />
+            </template>
+          </ElSwitch>
+          <span class="child-layer-status">
+            {{ active ? data.toggle.active : data.toggle.inactive }}
+          </span>
+        </span>
+      </div>
+    </template>
+  </ElMenuItem>
+  <ElDivider class="child-menu-divider-row" />
+</template>
+
+<script lang="ts" setup>
+  import { ElDivider, ElMenuItem, ElSwitch } from 'element-plus'
+  import { computed } from 'vue'
+  import FontAwesomeIcon from '../fa-icon/FontAwesomeIcon.vue'
+  import { LayerData } from '../../types'
+  import { setHistory } from '../../utils/menuHistory.ts'
+
+  type ChildMenuProps = {
+    data: LayerData
+    persist: boolean
+  }
+
+  const props = defineProps<ChildMenuProps>()
+
+  const emit = defineEmits<{ onChildLayerToggle: [LayerData] }>()
+
+  const active = computed<boolean>({
+    get: () => props.data.active,
+    set: (active: boolean) => {
+      toggleLayerVisible(active)
+    }
+  })
+
+  const toggleLayerVisible = (active: boolean): void => {
+    const layer = { ...props.data, active }
+    if (props.persist) setHistory(layer)
+    emit('onChildLayerToggle', layer)
+  }
+
+</script>
+
+<style>
+  .child-menu {
+    padding-left: var(--mapa-size-base-20) !important;
+  }
+
+  .child-menu .child-menu-row {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--mapa-size-base-10);
+    width: 100%;
+    font-size: var(--mapa-fs-12);
+  }
+
+  .child-menu .switch-component {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--mapa-size-base-5);
+  }
+
+  .child-menu .child-layer-title {
+    display: flex;
+    align-items: center;
+    gap: var(--mapa-size-base-5);
+    word-wrap: break-word;
+    white-space: normal;
+    line-height: 150%;
+    margin-block: auto;
+  }
+
+  .child-menu .child-layer-legend {
+    display: inline-block;
+    width: var(--mapa-size-base-8);
+    height: var(--mapa-size-base-8);
+    min-width: var(--mapa-size-base-8);
+  }
+
+  .child-menu-divider-row {
+    margin: 0 !important;
+  }
+</style>

package/src/components/menu/LayerMenu.vue

@@ -0,0 +1,294 @@
+<template>
+  <div :class="customClasses.layerMenu">
+    <ElButton
+      v-if="!props.options?.removeMenu"
+      :class="customClasses.menuButton"
+      @click="isMenuOpen = !isMenuOpen"
+    >
+      <FontAwesomeIcon :iconName="iconButton" />
+    </ElButton>
+    <ElMenu
+      :class="customClasses.customMenu"
+      mode="vertical"
+    >
+      <div id="external-id-top-menu"></div>
+      <template
+        v-for="group in props.layersConfig"
+        :key="group.key"
+      >
+        <ParentMenu
+          :groupData="group"
+          :persist="!!props.options?.persist"
+          @onChildLayerToggle="onChildLayerChange"
+          @onGroupLayerToggle="onGroupLayerToggle"
+        />
+      </template>
+      <div id="external-id-bottom-menu"></div>
+    </ElMenu>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ElButton, ElMenu } from 'element-plus'
+  import L from 'leaflet'
+  import { computed, nextTick, ref, watch } from 'vue'
+  import FontAwesomeIcon from '../fa-icon/FontAwesomeIcon.vue'
+  import ParentMenu from './ParentMenu.vue'
+  import { GroupLayerData, LayerData, LayersConfig, LayersMenuConfig } from '../../types'
+  import { resolveLayerActiveState, shouldInitLayerOnMap } from '../../utils/menuHistory.ts'
+
+  type MenuProps = {
+    layersConfig: LayersConfig
+    options?: LayersMenuConfig
+    map: L.Map
+    layerControl?: L.Control.Layers
+  }
+
+  type ConvertedLayers = {
+    [key: string]: L.TileLayer
+  }
+
+  type ConvertedGeoJsonLayers = {
+    [key: string]: L.GeoJSON
+  }
+
+  const emit = defineEmits<{
+    (e: 'startLoading'): void
+    (e: 'stopLoading'): void
+    (e: 'onChildLayerToggle', data: LayerData): void
+    (e: 'onGroupLayerToggle', data: GroupLayerData): void
+  }>()
+
+  const props = defineProps<MenuProps>()
+
+  const isMenuOpen = ref<boolean>(false)
+  const convertedLayers = ref<ConvertedLayers>({})
+  const convertedGeoJsonLayers = ref<ConvertedGeoJsonLayers>({})
+
+  type CustomClasses = {
+    layerMenu: string
+    menuButton: string
+    customMenu: string
+  }
+
+  const customClasses = computed((): CustomClasses => {
+    const status = isMenuOpen.value ? 'open' : 'close'
+    return {
+      layerMenu: `layer-menu layer-menu-${props.options?.size || 'medium'}`,
+      menuButton: `map-menu-button map-menu-button-${status}`,
+      customMenu: `map-custom-menu map-custom-menu-${status}`
+    }
+  })
+
+  type IconButton = 'chevron-left' | 'chevron-right'
+
+  const iconButton = computed((): IconButton => {
+    return isMenuOpen.value ? 'chevron-left' : 'chevron-right'
+  })
+
+  const onInitDefaultLayer = (layer: LayerData): void => {
+    if (layer.geojson) return handleGeoJsonLayer(layer)
+
+    handleWmsLayer(layer)
+  }
+
+  const initializedLayerKeys = new Set<string>()
+
+  const initDefaultLayers = (): void => {
+    if (!props.map) return
+
+    const persist = !!props.options?.persist
+
+    props.layersConfig?.forEach((group) => {
+      group.layers?.forEach((layer) => {
+        if (initializedLayerKeys.has(layer.key)) return
+        if (!shouldInitLayerOnMap(layer, persist)) return
+
+        const resolved = resolveLayerActiveState(layer, persist)
+        onInitDefaultLayer(resolved)
+        initializedLayerKeys.add(layer.key)
+      })
+    })
+  }
+
+  watch(
+    [() => props.layersConfig, () => props.map],
+    (newValues, oldValues) => {
+      const [, newMap] = newValues
+      const [, oldMap] = oldValues ?? []
+      if (newMap !== oldMap) {
+        initializedLayerKeys.clear()
+      }
+      void nextTick(() => {
+        initDefaultLayers()
+      })
+    },
+    { immediate: true, deep: true }
+  )
+
+  const onChildLayerChange = (layer: LayerData): void => {
+    if (layer.geojson) {
+      handleGeoJsonLayer(layer)
+    } else {
+      handleWmsLayer(layer)
+    }
+
+    emit('onChildLayerToggle', layer)
+  }
+
+  const onGroupLayerToggle = (parent: GroupLayerData): void => {
+    parent.layers.forEach((childLayer: LayerData) => {
+      if (childLayer.geojson) {
+        handleGeoJsonLayer(childLayer)
+      } else {
+        handleWmsLayer(childLayer)
+      }
+    })
+
+    emit('onGroupLayerToggle', parent)
+  }
+
+  const convertToWmsLayer = (layer: LayerData): L.TileLayer => {
+    const wmsLayer = L.tileLayer.wms(layer.baseUrl, {
+      layers: layer.layers,
+      format: layer.format || 'image/png',
+      transparent: layer.transparent
+    })
+
+    if (layer?.cqlFilter && layer.cqlFilter.length > 0) {
+      wmsLayer.setParams({
+        cql_filter: layer.cqlFilter
+      } as any)
+    }
+
+    watchLayerStatus(wmsLayer)
+
+    return wmsLayer
+  }
+
+  const handleWmsLayer = (layer: LayerData): void => {
+    if (convertedLayers.value[layer.key]) {
+      if (!layer.active) return removeWmsLayer(layer)
+    }
+
+    if (!layer.active) return
+
+    const wmsLayer = convertToWmsLayer(layer)
+    convertedLayers.value[layer.key] = wmsLayer
+
+    wmsLayer.addTo(props.map)
+
+    if (props.layerControl) {
+      props.layerControl.addOverlay(wmsLayer, `${wmsLayer.options.attribution}`)
+    }
+  }
+
+  const removeWmsLayer = (layer: LayerData): void => {
+    const wmsLayer = convertedLayers.value[layer.key]
+    if (!wmsLayer) return
+
+    props.map.removeLayer(wmsLayer)
+    props.layerControl?.removeLayer(wmsLayer)
+
+    delete convertedLayers.value[layer.key]
+  }
+
+  const watchLayerStatus = (tileLayer: L.TileLayer): void => {
+    tileLayer.on('loading', () => {
+      emit('startLoading')
+    })
+
+    tileLayer.on('load', () => {
+      emit('stopLoading')
+    })
+
+    tileLayer.on('error', () => {
+      emit('stopLoading')
+    })
+  }
+
+  const convertToGeojsonLayer = (layer: LayerData): L.GeoJSON => {
+    const geojsonLayer = L.geoJSON(layer.geojson, {
+      ...layer,
+      style: layer.style
+    })
+
+    watchGeoJsonLayerStatus(geojsonLayer)
+
+    return geojsonLayer
+  }
+
+  const handleGeoJsonLayer = (layer: LayerData): void => {
+    if (convertedGeoJsonLayers.value[layer.key]) {
+      if (!layer.active) return removeGeoJsonLayer(layer)
+    }
+
+    if (!layer.active) return
+
+    const geoJsonLayer = convertToGeojsonLayer(layer)
+    convertedGeoJsonLayers.value[layer.key] = geoJsonLayer
+
+    geoJsonLayer.addTo(props.map)
+
+    if (props.layerControl) {
+      props.layerControl.addOverlay(geoJsonLayer, `${geoJsonLayer.options.attribution}`)
+    }
+  }
+
+  const removeGeoJsonLayer = (layer: LayerData): void => {
+    const geoJsonLayer = convertedGeoJsonLayers.value[layer.key]
+    if (!geoJsonLayer) return
+
+    props.map.removeLayer(geoJsonLayer)
+    props.layerControl?.removeLayer(geoJsonLayer)
+
+    delete convertedGeoJsonLayers.value[layer.key]
+  }
+
+  const watchGeoJsonLayerStatus = (geoJsonLayer: L.GeoJSON): void => {
+    geoJsonLayer.on('loading', () => {
+      emit('startLoading')
+    })
+
+    geoJsonLayer.on('load', () => {
+      emit('stopLoading')
+    })
+
+    geoJsonLayer.on('error', () => {
+      emit('stopLoading')
+    })
+  }
+</script>
+
+<style>
+  .layer-menu > .map-custom-menu,
+  .layer-menu > .map-menu-button {
+    position: absolute;
+    top: 50%;
+    left: -50px;
+    transform: translateY(-50%);
+    z-index: 1001;
+    transition: var(--mapa-base-transition);
+  }
+
+  .layer-menu > .map-custom-menu {
+    box-shadow: var(--mapa-base-box-shadow);
+    padding: var(--mapa-size-base-10);
+    overflow-y: scroll;
+    scrollbar-width: none;
+    height: 100%;
+  }
+
+  .layer-menu > .map-menu-button {
+    height: var(--mapa-size-base-40);
+    width: var(--mapa-size-base-40);
+    border-radius: 0 var(--mapa-size-base-20) var(--mapa-size-base-20) 0;
+    color: var(--mapa-base-green);
+
+    &:hover {
+      background-color: var(--mapa-base-white);
+      color: var(--mapa-base-green);
+      border-color: var(--mapa-base-white);
+    }
+  }
+</style>