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

import L, { LatLngTuple, PointExpression } from 'leaflet'
import { CatalogItemDto } from '../../swagger/data-contracts'

// 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>`)}`
    return `data:image/svg+xml;utf8, ${encodeURIComponent(`
    <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" version="1.1" fill="blue"
    stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
    <path
        fill="${color}"
        d="m13.25 7c0 3.75-5.25 7.25-5.25 7.25s-5.25-3.5-5.25-7.25c0-2.89949 2.35051-5.25 5.25-5.25 2.8995 0 5.25 2.35051 5.25 5.25z" />
    <circle cx="8" cy="7" r="1.55" fill="white" />
    </svg> `)}`
}

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

const iconAnchor = [25, 25] as PointExpression
const iconSize = [40, 40] 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]

export const calculateMapCenter = (pathVariant: PathVariant): LatLngTuple | undefined => {
    const displayableItems = pathVariant.filter((item) => isMapPointDisplayable(item))
    if (displayableItems.length === 0) {
        return undefined
    }

    return [
        displayableItems
            .map((item) => item.catalogItem.latitude ?? 0)
            .reduce((a, b) => a + b, 0) / displayableItems.length,
        displayableItems
            .map((item) => item.catalogItem.longitude ?? 0)
            .reduce((a, b) => a + b, 0) / displayableItems.length,
    ]
}