aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/trackingToolUtils.ts @ c0b66eaf

import L, { PointExpression } from 'leaflet'
import { CatalogItemDto } from '../../swagger/data-contracts'
import { mdiMapMarker } from '@mdi/js'

// For more comprehensive code alias CatalogItemDto[] as path variant
export type PathVariant = MapPoint[]

export enum MapPointType {
    LocalCatalog, // Fetched from local catalog
    ExternalCatalog, // Fetched from external catalog
    GeoJson, // From GeoJSON file
    FromCoordinates, // From coordinates
}

// Represents a point on the map - wrapper for CatalogItemDto to make it easier to work with
export interface MapPoint {
    id: string // unique id for react
    idx: number,
    addToPath: boolean, // whether to add the point to the path
    catalogItem: CatalogItemDto,
    type: MapPointType
    hidden?: boolean // if true the point will not be displayed on the map
}

export const isMapPointDisplayable = (mapPoint: MapPoint): boolean =>
    !!mapPoint.catalogItem.latitude && !!mapPoint.catalogItem.longitude && !mapPoint.hidden

/**
 * Based on its type - either imported from local catalog, remote catalogs etc. each type has its own color to differentiate them
 * @param item item to get color for
 * @returns CSS color string
 */
export const getMapPointSemanticColor = (item: MapPoint) => {
    switch (item.type) {
        case MapPointType.LocalCatalog:
            return 'inherit'
        case MapPointType.FromCoordinates:
            return '#21972D'
        case MapPointType.ExternalCatalog:
            return '#A72020'
        case MapPointType.GeoJson:
            return '#967520'
    }
}

const createMapMarkerSvg = (color: string) => {
    return `data:image/svg+xml;utf8, ${encodeURIComponent(`
    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="${color}">
     <path d="M0 0h24v24H0z" fill="none" /><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
     </svg>`)}`
}

const mapMarkerSvgs = {
    [MapPointType.LocalCatalog]: createMapMarkerSvg('#285CAB'),
    [MapPointType.ExternalCatalog]: createMapMarkerSvg('#A72020'),
    [MapPointType.GeoJson]: createMapMarkerSvg('#967520'),
    [MapPointType.FromCoordinates]: createMapMarkerSvg('#21972D'),
}

const iconAnchor = [32, 32] as PointExpression
const iconSize = [42, 42] as PointExpression

const mapMarkers = {
    [MapPointType.LocalCatalog]: L.icon({
        iconAnchor, iconSize,
        iconUrl: mapMarkerSvgs[MapPointType.LocalCatalog],
    }),
    [MapPointType.ExternalCatalog]: L.icon({
        iconAnchor, iconSize,
        iconUrl: mapMarkerSvgs[MapPointType.ExternalCatalog],
    }),

    [MapPointType.GeoJson]: L.icon({
        iconAnchor, iconSize,
        iconUrl: mapMarkerSvgs[MapPointType.GeoJson],
    }),
    [MapPointType.FromCoordinates]: L.icon({
        iconAnchor, iconSize,
        iconUrl: mapMarkerSvgs[MapPointType.FromCoordinates],
    }),
}

export const getMapPointIcon = (item: MapPoint): L.Icon => mapMarkers[item.type]