// Constants
import { MapOptionsConstants } from '../constants';
import { GpsLocationConstants } from '../../../../utils/constants';
// Enums
import { eMapMarkerStopType, eMapMarkerString } from '../../enums';
import {
eGpsHeadingDirection,
eGpsMotionStatus,
eStringPlaceholder,
} from '../../../../enums';
// Svg Routes
import { MapSvgRoutes } from '../svg-routes';
// Helpers
import { GpsLocationHelper } from '../../../../utils/helpers';
// uuid
import { uuidv4 } from '../../../../utils/helpers';
export class MapMarkerIconHelper {
static getRoutingMarkerElement = (
stopNumber: number | string,
stopType: string,
isStopChecked?: boolean,
isLightMode?: boolean,
labelName?: string,
isIconMarker?: boolean,
isShowLabelOnHover?: boolean,
index?: number
): HTMLElement => {
const markerElement = document.createElement('div');
let markerSvg = '';
if (
[
eMapMarkerString.DEADHEAD,
eMapMarkerString.REPAIR,
eMapMarkerString.FUEL,
eMapMarkerString.TOWING,
eMapMarkerString.PARKING,
eMapMarkerString.CANCELLED_PICKUP,
eMapMarkerString.CANCELLED_DELIVERY,
].includes(stopType as eMapMarkerString) &&
isIconMarker
)
markerSvg = this.getRoutingMarkerIconSvg(stopType);
else
markerSvg = MapMarkerIconHelper.getRoutingMarkerIcon(
stopNumber,
stopType,
isStopChecked,
isLightMode
);
markerElement.classList.add('routing-icon');
markerElement.innerHTML = markerSvg;
const id = uuidv4();
markerElement.id = 'routingMarker-' + id;
if (labelName)
MapMarkerIconHelper.createRoutingMarkerLabelElement(
markerElement,
labelName,
isShowLabelOnHover
);
return markerElement;
};
static getMilesMarkerElement = (
stopNumber: number | string,
stopType: string,
labelName?: string,
index?: number
): HTMLElement => {
const markerElement = document.createElement('div');
const markerSvg = MapMarkerIconHelper.getMilesMarkerSvg(
stopNumber,
stopType
);
markerElement.classList.add('miles-icon', 'position-relative');
markerElement.innerHTML = markerSvg;
if (index !== null) markerElement.id = 'milesMarker-' + index;
if (labelName) {
const markerLabelElement = document.createElement('div');
markerLabelElement.classList.add('marker-label', 'pe-none');
const markerLabelText = document.createElement('div');
markerLabelText.classList.add(
'marker-label-text',
'text-color-black-2'
);
markerLabelText.innerHTML = labelName.toUpperCase();
markerLabelElement.appendChild(markerLabelText);
markerElement.appendChild(markerLabelElement);
markerElement.classList.add('show-label-on-hover');
}
return markerElement;
};
static getRoutingMarkerIcon = (
stopNumber: number | string,
stopType: string,
isStopChecked?: boolean,
isLightMode?: boolean
): string => {
if (!isStopChecked) {
const markerSvg = this.getRoutingMarkerSvg(
stopNumber,
stopType,
isLightMode
);
return markerSvg;
} else {
const checkedMarkerSvg = this.getRoutingCheckedMarkerSvg(
stopType,
isLightMode
);
return checkedMarkerSvg;
}
};
static getRoutingMarkerSvg = (
stopNumber: number | string,
stopType: string,
isLightMode?: boolean
): string => {
const markerColor = isLightMode
? MapOptionsConstants.ROUTING_MARKER_LIGHT_COLORS[
stopType as keyof typeof MapOptionsConstants.ROUTING_MARKER_LIGHT_COLORS
]
: MapOptionsConstants.ROUTING_MARKER_DARK_COLORS[
stopType as keyof typeof MapOptionsConstants.ROUTING_MARKER_DARK_COLORS
];
const markerOutlineColor =
MapOptionsConstants.ROUTING_MARKER_OUTLINE_COLORS[
isLightMode
? eMapMarkerString.WHITE
: (stopType as keyof typeof MapOptionsConstants.ROUTING_MARKER_OUTLINE_COLORS)
];
const markerDotColor =
MapOptionsConstants.ROUTING_MARKER_DOT_COLORS[
isLightMode ? eMapMarkerString.LIGHT : eMapMarkerString.DARK
];
const markerSvg = ``;
return markerSvg;
};
static getMilesMarkerSvg = (
stopNumber: number | string,
stopType: string
): string => {
const markerColor =
MapOptionsConstants.ROUTING_MARKER_LIGHT_COLORS[
stopType as keyof typeof MapOptionsConstants.ROUTING_MARKER_LIGHT_COLORS
];
const markerSvgPath =
MapOptionsConstants.MILES_MARKER_ICON_PATHS[
stopType as keyof typeof MapOptionsConstants.MILES_MARKER_ICON_PATHS
];
const markerSvg = ``;
return markerSvg;
};
static getRoutingCheckedMarkerSvg = (
stopType: string,
isLightMode?: boolean
) => {
const checkedMarkerColor = isLightMode
? MapOptionsConstants.ROUTING_MARKER_LIGHT_COLORS[
stopType as keyof typeof MapOptionsConstants.ROUTING_MARKER_LIGHT_COLORS
]
: MapOptionsConstants.ROUTING_MARKER_DARK_COLORS[
stopType as keyof typeof MapOptionsConstants.ROUTING_MARKER_DARK_COLORS
];
const checkedMarkerOutlineColor =
MapOptionsConstants.ROUTING_MARKER_OUTLINE_COLORS[
isLightMode
? eMapMarkerString.WHITE
: (stopType as keyof typeof MapOptionsConstants.ROUTING_MARKER_OUTLINE_COLORS)
];
const checkedMarkerDotColor =
MapOptionsConstants.ROUTING_MARKER_DOT_COLORS[
isLightMode ? eMapMarkerString.LIGHT : eMapMarkerString.DARK
];
const checkedMarkerSvg = ``;
return checkedMarkerSvg;
};
static getRoutingMarkerIconSvg = (stopType: string): string => {
const markerSvgPath =
MapOptionsConstants.ROUTING_MARKER_ICON_PATHS[
stopType as keyof typeof MapOptionsConstants.ROUTING_MARKER_ICON_PATHS
];
const markerSvgPathFillColor =
MapOptionsConstants.ROUTING_MARKER_PATH_FILL_COLORS[
stopType as keyof typeof MapOptionsConstants.ROUTING_MARKER_PATH_FILL_COLORS
] ?? eMapMarkerString.WHITE;
const checkedMarkerColor =
MapOptionsConstants.ROUTING_MARKER_LIGHT_COLORS[
stopType as keyof typeof MapOptionsConstants.ROUTING_MARKER_LIGHT_COLORS
];
const markerDotFillColor =
MapOptionsConstants.ROUTING_MARKER_DOT_FILL_COLORS[
stopType as keyof typeof MapOptionsConstants.ROUTING_MARKER_DOT_FILL_COLORS
] ?? checkedMarkerColor;
const checkedMarkerDotColor =
MapOptionsConstants.ROUTING_MARKER_DOT_COLORS[
eMapMarkerString.LIGHT
];
const routingMarkerSvg = ``;
return routingMarkerSvg;
};
static getMapMarker(isFavorite?: boolean, isClosed?: boolean): string {
let markerIconRoute = MapSvgRoutes.defaultMarkerIcon;
if (isClosed) markerIconRoute = MapSvgRoutes.closedMarkerIcon;
else if (isFavorite) markerIconRoute = MapSvgRoutes.favoriteMarkerIcon;
return markerIconRoute;
}
static getClusterMarker(
count: number,
isSelected?: boolean,
isFuelMarker?: boolean
): string {
const markerColor = isFuelMarker ? '#6692F1' : '#FAB15C';
const markerSvg = ``;
const markerIconRoute =
'data:image/svg+xml;charset=UTF-8;base64,' + btoa(markerSvg);
return markerSvg;
}
static getCurrentLocationMarkerSvg(motionStatus: eGpsMotionStatus): string {
if (motionStatus === eGpsMotionStatus.NO_GPS_DEVICE)
return eStringPlaceholder.EMPTY;
const classes = GpsLocationHelper.getGpsSvgClasses(motionStatus);
return ``;
}
static getGpsMarkerElement(
motionStatus: eGpsMotionStatus,
headingDirection: string,
isIgnition?: boolean,
index?: number,
labelName?: string,
secondLabelName?: string
): HTMLElement {
const markerElement = document.createElement('div');
const markerSvg = MapMarkerIconHelper.getGpsMarkerSvg(
motionStatus,
headingDirection,
isIgnition
);
markerElement.classList.add('routing-icon');
markerElement.innerHTML = markerSvg;
if (index !== null) markerElement.id = 'routingMarker-' + index;
if (labelName) {
const markerLabelElement = document.createElement('div');
markerLabelElement.classList.add('marker-label');
const markerLabelText = document.createElement('div');
markerLabelText.classList.add(
'marker-label-text',
'text-color-black',
'ca-font-bold'
);
const labelText = labelName.toUpperCase();
markerLabelText.innerHTML = labelText;
markerLabelElement.appendChild(markerLabelText);
if (secondLabelName) {
const secondLabelElement = document.createElement('div');
secondLabelElement.classList.add(
'marker-label-second-text',
'text-color-muted',
'ca-font-bold',
'line-clamp-1'
);
secondLabelElement.innerHTML = secondLabelName;
markerLabelElement.appendChild(secondLabelElement);
markerLabelText.classList.add('line-clamp-1');
}
markerElement.appendChild(markerLabelElement);
if (motionStatus === eGpsMotionStatus.MOVING)
markerLabelElement.classList.add('m-t-6');
}
return markerElement;
}
static getGpsMarkerSvg(
motionStatus: eGpsMotionStatus,
headingDirection: string,
isIgnition?: boolean
): string {
if (motionStatus === eGpsMotionStatus.MOVING)
return MapMarkerIconHelper.getGpsMovingMarkerSvg(headingDirection);
else
return MapMarkerIconHelper.getGpsStopMarkerSvg(
motionStatus,
isIgnition
);
}
static getGpsMovingMarkerSvg(headingDirection: string): string {
const direction =
eGpsHeadingDirection[
headingDirection as keyof typeof eGpsHeadingDirection
];
const rotationDeg =
GpsLocationConstants.GPS_HEADING_ROTATION_ANGLE[direction] ?? 0;
return ``;
}
static getGpsStopMarkerSvg(
motionStatus: eGpsMotionStatus,
isIgnition?: boolean
): string {
const innerRadius = isIgnition ? 2 : 4;
const fillColor =
GpsLocationConstants.GPS_SVG_FILL_COLORS[motionStatus];
const isInnerCircleVisible =
motionStatus !== eGpsMotionStatus.NO_GPS_DEVICE;
return ``;
}
static getGpsAtStopMarkerElement(
motionStatus: eGpsMotionStatus,
stopNumber: number | string,
stopType: string,
isIgnition?: boolean,
labelName?: string,
isShowLabelOnHover?: boolean,
id?: number
): HTMLElement {
const markerElement = document.createElement('div');
const routingMarkerSvg = MapMarkerIconHelper.getRoutingCircleMarkerSvg(
stopType,
stopNumber
);
const gpsMarkerSvg = MapMarkerIconHelper.getGpsMarkerSvg(
motionStatus,
eStringPlaceholder.EMPTY,
isIgnition
);
const routingMarkerElement = document.createElement('div');
routingMarkerElement.innerHTML = routingMarkerSvg;
const gpsMarkerElement = document.createElement('div');
gpsMarkerElement.classList.add('m-t--2');
gpsMarkerElement.innerHTML = gpsMarkerSvg;
markerElement.classList.add(
'routing-icon',
'd-flex',
'flex-column',
'align-items-center'
);
markerElement.appendChild(routingMarkerElement);
markerElement.appendChild(gpsMarkerElement);
if (id !== null) markerElement.id = 'routingMarker-' + id;
if (labelName)
MapMarkerIconHelper.createRoutingMarkerLabelElement(
markerElement,
labelName,
isShowLabelOnHover
);
return markerElement;
}
static getRoutingCircleMarkerSvg(
stopType: string,
stopNumber: number | string
): string {
const markerColor =
MapOptionsConstants.ROUTING_MARKER_LIGHT_COLORS[
stopType as keyof typeof MapOptionsConstants.ROUTING_MARKER_LIGHT_COLORS
];
return ``;
}
static createRoutingMarkerLabelElement(
markerElement: HTMLElement,
labelName: string,
isShowLabelOnHover?: boolean
): void {
const markerLabelElement = document.createElement('div');
markerLabelElement.classList.add('marker-label');
const markerLabelText = document.createElement('div');
markerLabelText.classList.add('marker-label-text');
markerLabelText.innerHTML = labelName.toUpperCase();
markerLabelElement.appendChild(markerLabelText);
markerElement.appendChild(markerLabelElement);
if (isShowLabelOnHover)
markerElement.classList.add('show-label-on-hover');
}
static getLtlMarkerElement(
stopType: string,
labelName: string,
index: number
): HTMLElement {
const markerElement = document.createElement('div');
const markerSvg = MapMarkerIconHelper.getLtlMarkerSvg(stopType, index);
markerElement.classList.add('routing-icon');
markerElement.innerHTML = markerSvg;
const id = uuidv4();
markerElement.id = 'routingMarker-' + id;
if (labelName)
MapMarkerIconHelper.createRoutingMarkerLabelElement(
markerElement,
labelName,
true
);
return markerElement;
}
static getLtlMarkerSvg(stopType: string, index: number): string {
const colorIndex =
Math.floor(index / 2) %
MapOptionsConstants.LTL_MARKER_COLORS.length;
const markerColor = MapOptionsConstants.LTL_MARKER_COLORS[colorIndex];
const markerInsideContent =
stopType === eMapMarkerString.PICKUP
? ''
: '';
return ``;
}
static getDispatchRouteMarkerElement(
stopType: string,
id?: number
): HTMLElement {
const markerElement = document.createElement('div');
markerElement.classList.add('routing-icon');
markerElement.innerHTML =
MapMarkerIconHelper.getDispatchRouteMarkerSvg(stopType);
if (id) markerElement.id = 'routingMarker-' + id;
return markerElement;
}
static getDispatchRouteMarkerSvg(stopType: string): string {
const markerColor =
MapOptionsConstants.DISPATCH_ROUTE_MARKER_COLORS[
stopType as keyof typeof MapOptionsConstants.DISPATCH_ROUTE_MARKER_COLORS
];
return ``;
}
static getStopType(
stopType: { id?: number; name?: string },
stopStatusId?: number
): string {
const isCancelled = stopStatusId === 2 || stopStatusId === 3;
switch (stopType.id) {
case eMapMarkerStopType.DEADHEAD_STOP:
return eMapMarkerString.DEADHEAD;
case eMapMarkerStopType.SPLIT_LOCATION_STOP:
return eMapMarkerString.SPLIT_LOCATION;
case eMapMarkerStopType.REDIRECT_LOCATION_STOP:
return eMapMarkerString.DEADHEAD;
case eMapMarkerStopType.REDIRECTED_DELIVERY_STOP:
return eMapMarkerString.DELIVERY;
case eMapMarkerStopType.REDIRECTED_PICKUP_STOP:
return eMapMarkerString.PICKUP;
case eMapMarkerStopType.PICKUP_STOP:
return isCancelled
? eMapMarkerString.CANCELLED_PICKUP
: eMapMarkerString.PICKUP;
case eMapMarkerStopType.DELIVERY_STOP:
return isCancelled
? eMapMarkerString.CANCELLED_DELIVERY
: eMapMarkerString.DELIVERY;
default:
return stopType.name || eStringPlaceholder.EMPTY;
}
}
}