@rural-environmental-registry/map_component 1.0.0 → 1.2.0

package/src/components/menu/ParentMenu.vue

@@ -0,0 +1,132 @@
+<template>
+  <ElSubMenu
+    :disabled="!childrenLayers.length"
+    :index="groupData.key"
+    class="parent-menu"
+  >
+    <template #title>
+      <div class="parent-menu-row">
+        <div class="parent-layer-title">{{ groupData.name }}</div>
+        <span class="switch-component">
+          <ElSwitch
+            v-model="allLayersActive"
+            @click.stop
+          >
+            <template #active-action>
+              <FontAwesomeIcon iconName="check" />
+            </template>
+            <template #inactive-action>
+              <FontAwesomeIcon iconName="xmark" />
+            </template>
+          </ElSwitch>
+          <span class="parent-layer-status">
+            {{ allLayersActive ? groupData.toggle.active : groupData.toggle.inactive }}
+          </span>
+          <ElDivider
+            class="divider-bar"
+            direction="vertical"
+          />
+        </span>
+      </div>
+    </template>
+    <template
+      v-for="(child, idx) in childrenLayers"
+      :key="child.key"
+    >
+      <ChildMenu
+        v-if="child.name"
+        :data="child"
+        :persist="props.persist"
+        @onChildLayerToggle="onChildChange($event, idx)"
+      />
+    </template>
+  </ElSubMenu>
+  <ElDivider class="parent-menu-divider-row" />
+</template>
+
+<script lang="ts" setup>
+  import { ElDivider, ElSubMenu, ElSwitch } from 'element-plus'
+  import { computed, ref } from 'vue'
+  import FontAwesomeIcon from '../fa-icon/FontAwesomeIcon.vue'
+  import ChildMenu from './ChildMenu.vue'
+  import { GroupLayerData, LayerData } from '../../types'
+  import { resolveLayerActiveState, setHistory } from '../../utils/menuHistory.ts'
+
+  type ParentMenuProps = {
+    groupData: GroupLayerData
+    persist: boolean
+  }
+
+  const props = defineProps<ParentMenuProps>()
+
+  const emit = defineEmits<{
+    onChildLayerToggle: [LayerData]
+    onGroupLayerToggle: [GroupLayerData]
+  }>()
+
+  const childrenLayers = ref<LayerData[]>(
+    (props.groupData.layers ?? []).map((layer) => resolveLayerActiveState(layer, props.persist))
+  )
+
+  const toggleVisibleAllLayers = (): void => {
+    if (props.persist) childrenLayers.value.forEach((layer: LayerData) => setHistory(layer))
+
+    emit('onGroupLayerToggle', {
+      ...props.groupData,
+      layers: childrenLayers.value
+    })
+  }
+
+  const allLayersActive = computed<boolean>({
+    get: () => childrenLayers.value.some((layer: LayerData) => layer.active),
+    set: (active: boolean) => {
+      childrenLayers.value = props.groupData.layers.map((layer: LayerData) => {
+        return {
+          ...layer,
+          active
+        }
+      })
+
+      toggleVisibleAllLayers()
+    }
+  })
+
+  const onChildChange = (layer: LayerData, idx: number): void => {
+    childrenLayers.value[idx] = layer
+    emit('onChildLayerToggle', layer)
+  }
+</script>
+
+<style>
+  .parent-menu .parent-menu-row {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--mapa-size-base-10);
+    width: 100%;
+    font-size: var(--mapa-fs-12);
+  }
+
+  .parent-menu .switch-component {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--mapa-size-base-5);
+  }
+
+  .parent-menu .parent-layer-title {
+    word-wrap: break-word;
+    white-space: normal;
+    line-height: 150%;
+    margin-block: auto;
+    font-weight: bold;
+  }
+
+  .parent-menu .divider-bar {
+    height: var(--mapa-size-base-20);
+    border-width: var(--mapa-size-base-2);
+  }
+
+  .parent-menu-divider-row {
+    margin: 0 !important;
+  }
+</style>

package/src/constants/coordinatePanel.ts

@@ -0,0 +1,68 @@
+import { CoordinatePanelTexts } from '../types'
+
+export const COORDINATE_PANEL_TEXTS: CoordinatePanelTexts = {
+  title: 'Coordinates',
+  addPoint: 'Add Point',
+  editPoint: 'Edit Point',
+  removePoint: 'Remove Point',
+  actions: 'Actions',
+  clearGeometries: 'Clear Geometries',
+  index: 'Index',
+  x: 'X',
+  y: 'Y',
+  azimuth: 'Azimuth',
+  distance: 'Distance',
+  noPoints: 'No points added',
+  addPointTitle: 'Add Point',
+  editPointTitle: 'Edit Point',
+  removePointTitle: 'Remove Point',
+  clearGeometriesTitle: 'Clear Geometries',
+  addPointDescription: 'Add a new point to the list',
+  editPointDescription: 'Edit the selected point',
+  removePointDescription: 'Remove the selected point',
+  clearGeometriesDescription: 'Clear all geometries from the map',
+
+  memorialDescriptive: 'Descriptive Memorial',
+  referenceSystem: 'Reference System',
+  selectSystem: 'Select system',
+  sirgas2000: 'SIRGAS 2000',
+  coordinateFormat: 'Coordinate Format',
+  selectFormat: 'Select format',
+  decimalDegrees: 'Decimal Degrees (DD)',
+  degreesMinutesSeconds: 'Degrees, Minutes, Seconds (DMS)',
+  manualInput: 'Manual Input',
+  insertCoordinates: 'Insert Coordinates',
+  xLongitude: 'X (Longitude)',
+  yLatitude: 'Y (Latitude)',
+  degrees: 'Degrees',
+  minutes: 'Minutes',
+  seconds: 'Seconds',
+  addedPoints: 'Added Points',
+  finalizeGeometry: 'Finalize Geometry',
+  csvUpload: 'CSV Upload',
+  csvFileUpload: 'CSV File Upload',
+  dragCsvFile: 'Drag CSV file or click to upload',
+  csvColumnsInfo: 'The file must contain the columns: X, Y, AZIMUTH, DISTANCE',
+  applyCsvCoordinates: 'Apply CSV Coordinates',
+
+  shapefileUpload: 'Shapefile, KML and Geojson Upload',
+  shapefileFileUpload: 'Shapefile, KML and Geojson Upload',
+  dragShapefileZip: 'Drag file or click to upload',
+  shapefileZipInfo:
+    'Upload a .zip (shapefile), .kml, .geojson or .json with a single Polygon or MultiPolygon geometry',
+  shapefileAppliedSuccess: 'Geometry applied successfully',
+  geometryImportUnsupportedFormat: 'Unsupported file format. Use .zip, .kml, .geojson or .json',
+
+  placeholderLongitude: 'e.g., -46.6333',
+  placeholderLatitude: 'e.g., -23.5505',
+  placeholderAzimuth: 'e.g., 90',
+  placeholderDistance: 'e.g., 100',
+  placeholderDegrees: 'Degrees',
+  placeholderMinutes: 'Minutes',
+  placeholderSeconds: 'Seconds',
+
+  errorXYRequired: 'X and Y are required for the first point',
+  errorDegreesRequired: 'Degrees are required for the first point',
+  errorFirstRowXY: 'The first row of the CSV must contain X and Y coordinates',
+  errorProvideCoordinatesOrAzimuthDistance: 'Provide coordinates or Azimuth and Distance'
+}

package/src/handlers/constants.ts

@@ -0,0 +1,35 @@
+import { DrawingControlOptions, MapConfigConfig } from '../types'
+
+export const DEFAULT_MAP_OPTIONS: MapConfigConfig = {
+  id: 'map',
+  zoomControl: false,
+  minZoom: 3,
+  maxZoom: 17,
+  center: [-15.235, -51.9253],
+  zoom: 4,
+  zoomControlPosition: 'topright',
+  removeControlLayers: false
+}
+
+export const DEFAULT_DRAW_OPTIONS: DrawingControlOptions = {
+  options: {
+    drawMarker: true,
+    drawRectangle: true,
+    drawPolyline: true,
+    drawPolygon: true,
+    drawCircle: true,
+    drawCircleMarker: true,
+    drawText: true,
+    editMode: true,
+    dragMode: true,
+    cutPolygon: false,
+    rotateMode: false,
+    removalMode: true,
+    drawControls: true,
+    editControls: true,
+    position: 'topright'
+  },
+  translation: {
+    lang: 'en'
+  }
+}

package/src/handlers/drawingControl.ts

@@ -0,0 +1,143 @@
+import L, { Map, FeatureGroup, Layer, PathOptions, Icon, Point } from 'leaflet'
+import '@geoman-io/leaflet-geoman-free'
+import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
+
+import { DEFAULT_DRAW_OPTIONS } from './constants'
+import { calculateLayerArea } from '../utils/areaCalculator'
+import {
+  DrawingConfig,
+  GeomanDrawingEvent,
+  IncrementedLayer,
+  TranslationConfig,
+  ToolbarOptions,
+  PMToolbarOptions,
+  PMSupportedShapes
+} from '../types'
+
+import markerIcon from '../assets/icons/marker-icon.svg'
+
+export default class DrawingControlHandler {
+  private readonly _map: Map
+  private readonly _drawItemsGroup: FeatureGroup
+  private readonly _options: ToolbarOptions
+
+  constructor(map: Map, drawItemsGroup: FeatureGroup, controlOptions?: DrawingConfig) {
+    this._map = map
+    this._drawItemsGroup = drawItemsGroup
+    this._options = this.formatMenuOptions(controlOptions?.options || DEFAULT_DRAW_OPTIONS.options)
+    this.addTranslation(controlOptions?.translation || DEFAULT_DRAW_OPTIONS.translation)
+  }
+
+  get drawItemsGroup(): FeatureGroup {
+    return this._drawItemsGroup
+  }
+
+  get map(): Map {
+    return this._map
+  }
+
+  get options(): ToolbarOptions {
+    return this._options
+  }
+
+  private incrementLayerInfos(layer: Layer): IncrementedLayer {
+    const newLayer = layer as IncrementedLayer
+    newLayer.drawnArea = calculateLayerArea(layer)
+
+    return newLayer
+  }
+
+  public handleDrawingEvents(eventEmitterCallback: Function): void {
+    this._map.on('pm:create', (evt: GeomanDrawingEvent) => {
+      if ((this._map as L.Map & { _leafletMeasureActive?: boolean })._leafletMeasureActive) return
+
+      const { layer } = evt
+
+      this._drawItemsGroup.addLayer(layer)
+
+      const createdLayer: IncrementedLayer = this.incrementLayerInfos(layer)
+
+      eventEmitterCallback({ type: 'created', layer: createdLayer })
+
+      this.handleUpdateDrawingEvents(eventEmitterCallback, layer)
+      this.handleDeleteDrawingEvents(eventEmitterCallback, layer)
+    })
+  }
+
+  private handleUpdateDrawingEvents(eventEmitterCallback: Function, layer: Layer): void {
+    layer.on('pm:update', (evt: GeomanDrawingEvent) => {
+      const childLayer: Layer = evt.layer
+
+      const editedLayer: IncrementedLayer = this.incrementLayerInfos(childLayer)
+
+      eventEmitterCallback({ type: 'edited', layer: editedLayer })
+    })
+  }
+
+  private handleDeleteDrawingEvents(eventEmitterCallback: Function, layer: Layer): void {
+    layer.on('pm:remove', (evt: GeomanDrawingEvent) => {
+      eventEmitterCallback({ type: 'deleted', layer: evt.layer })
+    })
+  }
+
+  private addTranslation({ lang = 'en', customTexts = {} }: TranslationConfig): void {
+    this._map.pm.setLang(lang, customTexts, 'en')
+  }
+
+  private formatMenuOptions(options: ToolbarOptions): PMToolbarOptions {
+    const toolbarOptions: ToolbarOptions = {
+      drawPolygon: false,
+      drawCircle: false,
+      drawCircleMarker: false,
+      drawText: false,
+      dragMode: false,
+      cutPolygon: false,
+      rotateMode: false
+    }
+
+    const isPathOption = (option: any): boolean => {
+      return typeof option === 'object' && ('color' in option || 'fillColor' in option || 'weight' in option)
+    }
+
+    Object.entries(options).forEach(([key, value]) => {
+      if (isPathOption(value)) {
+        this.applyShapeStyles(key, value as PathOptions)
+        if (key === 'drawMarker') this.setMartkerIcon()
+        toolbarOptions[key] = true
+      } else {
+        toolbarOptions[key] = value
+      }
+    })
+
+    return toolbarOptions
+  }
+
+  private applyShapeStyles(key: string, props: PathOptions): void {
+    const shapes: { [key: string]: PMSupportedShapes } = {
+      drawMarker: 'Marker',
+      drawRectangle: 'Rectangle',
+      drawPolyline: 'Line',
+      drawPolygon: 'Polygon',
+      drawCircle: 'Circle',
+      drawCircleMarker: 'CircleMarker'
+    }
+
+    const ignoredShapes = (currentShape: PMSupportedShapes): string[] => {
+      return ['Marker', 'Circle', 'Line', 'Rectangle', 'Polygon', 'CircleMarker'].filter(
+        (shape: string) => shape !== currentShape
+      )
+    }
+
+    this._map.pm.setPathOptions(props, { ignoreShapes: ignoredShapes(shapes[key]), merge: true })
+  }
+
+  private setMartkerIcon(): void {
+    const MyCustomMarker = new Icon({
+      iconAnchor: new Point(12, 12),
+      iconSize: new Point(24, 24),
+      iconUrl: markerIcon
+    })
+
+    this._map.pm.setGlobalOptions({ markerStyle: { icon: MyCustomMarker, pane: 'markerPane' } })
+  }
+}

package/src/handlers/mapHandler.ts

@@ -0,0 +1,124 @@
+import { DEFAULT_MAP_OPTIONS } from './constants'
+import { BaseMapLayer, MapLayers, MapConfigConfig } from '../types'
+import DEFAULT_MAP_LAYER from '../assets/layers/mapLayers.json'
+
+import L from 'leaflet'
+
+export default class MapHandler {
+  private readonly _map: L.Map
+  private readonly _mapOptions: MapConfigConfig
+  private readonly _initialView: { center: L.LatLngExpression; zoom: number }
+  private _mapLayers!: MapLayers
+
+  constructor(mapOptions: MapConfigConfig | undefined) {
+    this._mapOptions = {
+      ...DEFAULT_MAP_OPTIONS,
+      ...mapOptions
+    }
+
+    this._initialView = {
+      center: this._mapOptions.center!,
+      zoom: this._mapOptions.zoom!
+    }
+
+    this._map = L.map(this._mapOptions.id, {
+      // SVG evita desalinhamento de divIcon e geometrias efêmeras ao dar zoom
+      preferCanvas: this._mapOptions.preferCanvas ?? false,
+      markerZoomAnimation: this._mapOptions.markerZoomAnimation ?? false,
+      zoomControl: false,
+      minZoom: this._mapOptions.minZoom,
+      maxZoom: this._mapOptions.maxZoom,
+      dragging: this._mapOptions.dragging,
+      scrollWheelZoom: this._mapOptions.scrollWheelZoom,
+      doubleClickZoom: this._mapOptions.doubleClickZoom
+    }).setView(this._mapOptions.center!, this._mapOptions.zoom)
+  }
+
+  private _layerControl!: L.Control.Layers
+
+  get layerControl(): L.Control.Layers {
+    return this._layerControl
+  }
+
+  get map(): L.Map {
+    return this._map
+  }
+
+  get initialView(): { center: L.LatLngExpression; zoom: number } {
+    return this._initialView
+  }
+
+  public init(mapLayers: MapLayers, eventEmitterCallback: Function): void {
+    this._mapLayers = mapLayers || DEFAULT_MAP_LAYER
+
+    this.addControls()
+    this.addBaseLayer(eventEmitterCallback)
+
+    setTimeout(() => {
+      this._map.invalidateSize()
+    }, 300)
+
+    this.disableLayerControlHover()
+  }
+
+  private addControls(): void {
+    if (this._mapOptions.zoomControl && this._mapOptions.zoomControlPosition) {
+      L.control.zoom({ position: this._mapOptions.zoomControlPosition }).addTo(this._map)
+    }
+
+    if (!this._mapOptions.removeControlLayers) {
+      this._layerControl = L.control.layers().addTo(this._map)
+    }
+  }
+
+  private addBaseLayer(eventEmitterCallback: Function): void {
+    const baseMap = this._mapLayers?.mapLayers
+
+    baseMap.forEach((layer: BaseMapLayer) => {
+      const tileLayer = L.tileLayer(layer.url, {
+        tms: layer.tms,
+        minZoom: layer.minZoom,
+        maxZoom: layer.maxZoom,
+        maxNativeZoom: layer.maxNativeZoom,
+        errorTileUrl: layer.errorTileUrl
+      })
+
+      this.watchLayerStatus(tileLayer, eventEmitterCallback)
+
+      if (layer.default) {
+        tileLayer.addTo(this._map)
+      }
+
+      this._layerControl.addBaseLayer(tileLayer, layer.name)
+    })
+  }
+
+  private disableLayerControlHover(): void {
+    const container: HTMLElement | null = this._map
+      .getContainer()
+      .querySelector('.leaflet-control-layers.leaflet-control')
+
+    if (!container) return
+
+    L.DomEvent.on(container, 'click', function (e) {
+      e.stopPropagation()
+      e.preventDefault()
+    })
+
+    L.DomEvent.off(container)
+  }
+
+  private watchLayerStatus(tileLayer: L.TileLayer, eventEmitterCallback: Function): void {
+    tileLayer.on('loading', () => {
+      eventEmitterCallback('startLoading')
+    })
+
+    tileLayer.on('load', () => {
+      eventEmitterCallback('stopLoading')
+    })
+
+    tileLayer.on('error', () => {
+      eventEmitterCallback('stopLoading')
+    })
+  }
+}