ca-components 2.1.142 → 2.1.151

package/lib/components/ca-map/utils/helpers/map-marker-icon.helper.ts

@@ -0,0 +1,776 @@
+// 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 = `<svg xmlns="http://www.w3.org/2000/svg" width="30" height="33" viewBox="0 0 30 33" fill="none" class="marker-svg">
+                        <circle class="shadow-circle" cx="15" cy="29" r="3" fill="${markerColor}" stroke="${markerDotColor}" stroke-width="2"/>
+                        <g filter="url(#filter0_d_24060_59090)">
+                            <path d="M26 14.9732C25.9991 16.7715 25.5554 18.542 24.708 20.1289C23.8606 21.7157 22.6355 23.0702 21.1405 24.0732C21.1165 24.0912 20.7609 24.3102 20.6207 24.4022C17.2485 26.5422 15.8954 27.9872 15.3505 28.8022C15.2859 28.8991 15.1854 28.9665 15.0712 28.9897C14.9569 29.0129 14.8381 28.9901 14.7406 28.9262C14.6916 28.8932 14.6494 28.8511 14.6164 28.8022C14.0716 27.9912 12.7135 26.5462 9.34626 24.4022C9.19302 24.3072 8.8515 24.0912 8.82646 24.0732C7.25656 23.0103 5.9886 21.5601 5.14572 19.8635C4.30285 18.1669 3.91368 16.2815 4.01603 14.3904C4.11837 12.4993 4.70874 10.6667 5.72981 9.0707C6.75088 7.47466 8.16796 6.16936 9.84342 5.28155C11.5189 4.39375 13.3958 3.95361 15.292 4.00387C17.1881 4.05413 19.039 4.5931 20.6649 5.56842C22.2908 6.54374 23.6365 7.92228 24.5713 9.57017C25.5062 11.2181 25.9983 13.0793 26 14.9732Z" 
+                              fill="${markerOutlineColor}"
+                            />
+                        </g>
+                        <circle class="outside-circle" xmlns="http://www.w3.org/2000/svg" cx="15" cy="15" r="9" fill="${markerColor}"/>
+                        <text xmlns="http://www.w3.org/2000/svg" id="_4" data-name="4" transform="translate(15 16)" fill="#fff" font-size="11" font-family="Montserrat, sans-serif" font-weight="700" dominant-baseline="middle" text-anchor="middle" y="0">
+                            <tspan>${stopNumber ?? 0}</tspan>
+                        </text>
+                        <defs>
+                            <filter id="filter0_d_24060_59090" x="0" y="0" width="30" height="32.9985" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                <feOffset/>
+                                <feGaussianBlur stdDeviation="2"/>
+                                <feComposite in2="hardAlpha" operator="out"/>
+                                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+                                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_24060_59090"/>
+                                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_24060_59090" result="shape"/>
+                            </filter>
+                        </defs>
+                      </svg>`;
+
+        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 = `<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg" class="marker-svg">
+                                <g filter="url(#filter0_d_11479_6856)">
+                                    <rect class="white-circle" x="6" y="6" width="22" height="22" rx="11" fill="white"/>
+                                    <rect class="inside-circle" x="8" y="8" width="18" height="18" rx="9"fill="${markerColor}"/>
+                                    <path class="marker-path" d="${markerSvgPath}" fill="white"/>
+                                    <text class="marker-number" fill="white" font-size="11" font-family="Montserrat, sans-serif" font-weight="700" text-anchor="middle" x="50%" y="50%" dy=".35em">
+                                        <tspan>${stopNumber ?? 0}</tspan>
+                                    </text>
+                                </g>
+                                <defs>
+                                    <filter id="filter0_d_11479_6856" x="0" y="0" width="34" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                        <feOffset/>
+                                        <feGaussianBlur stdDeviation="3"/>
+                                        <feComposite in2="hardAlpha" operator="out"/>
+                                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+                                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1224_9282"/>
+                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1224_9282" result="shape"/>
+                                    </filter>
+                                </defs>
+                            </svg>`;
+
+        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 = `<svg width="30" height="33" viewBox="0 0 30 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <circle cx="15" cy="29" r="3" fill="${checkedMarkerColor}" stroke="${checkedMarkerDotColor}" stroke-width="2"/>
+                                <g filter="url(#filter0_d_18055_34238)">
+                                  <path d="M26 14.9732C25.9991 16.7715 25.5554 18.542 24.708 20.1289C23.8606 21.7157 22.6355 23.0702 21.1405 24.0732C21.1165 24.0912 20.7609 24.3102 20.6207 24.4022C17.2485 26.5422 15.8954 27.9872 15.3505 28.8022C15.2859 28.8991 15.1854 28.9665 15.0712 28.9897C14.9569 29.0129 14.8381 28.9901 14.7406 28.9262C14.6916 28.8932 14.6494 28.8511 14.6164 28.8022C14.0716 27.9912 12.7135 26.5462 9.34626 24.4022C9.19302 24.3072 8.8515 24.0912 8.82646 24.0732C7.25656 23.0103 5.9886 21.5601 5.14572 19.8635C4.30285 18.1669 3.91368 16.2815 4.01603 14.3904C4.11837 12.4993 4.70874 10.6667 5.72981 9.0707C6.75088 7.47466 8.16796 6.16936 9.84342 5.28155C11.5189 4.39375 13.3958 3.95361 15.292 4.00387C17.1881 4.05413 19.039 4.5931 20.6649 5.56842C22.2908 6.54374 23.6365 7.92228 24.5713 9.57017C25.5062 11.2181 25.9983 13.0793 26 14.9732Z" 
+                                    fill="${checkedMarkerOutlineColor}"
+                                  />
+                                </g>
+                                <circle cx="15" cy="15" r="9" fill="${checkedMarkerColor}"/>
+                                <path d="M13.0462 19.0477L9.71291 15.7144C9.65718 15.6587 9.61297 15.5925 9.5828 15.5197C9.55264 15.4469 9.53711 15.3689 9.53711 15.2901C9.53711 15.2112 9.55264 15.1332 9.5828 15.0604C9.61297 14.9876 9.65718 14.9214 9.71291 14.8657L10.5629 14.0184C10.6186 13.9627 10.6848 13.9184 10.7576 13.8883C10.8304 13.8581 10.9084 13.8426 10.9872 13.8426C11.0661 13.8426 11.1441 13.8581 11.2169 13.8883C11.2897 13.9184 11.3559 13.9627 11.4116 14.0184L13.4702 16.0771L18.5869 10.9571C18.6426 10.9013 18.7088 10.8571 18.7816 10.8269C18.8544 10.7968 18.9324 10.7812 19.0112 10.7812C19.0901 10.7812 19.1681 10.7968 19.2409 10.8269C19.3137 10.8571 19.3799 10.9013 19.4356 10.9571L20.2842 11.8057C20.34 11.8614 20.3842 11.9276 20.4144 12.0004C20.4445 12.0732 20.4601 12.1512 20.4601 12.2301C20.4601 12.3089 20.4445 12.3869 20.4144 12.4597C20.3842 12.5325 20.34 12.5987 20.2842 12.6544L13.8949 19.0451C13.8392 19.1008 13.773 19.145 13.7002 19.1752C13.6274 19.2053 13.5494 19.2209 13.4706 19.2209C13.3918 19.2209 13.3137 19.2053 13.2409 19.1752C13.1681 19.145 13.102 19.1008 13.0462 19.0451V19.0477Z" fill="white"/>
+                                <defs>
+                                  <filter id="filter0_d_18055_34238" x="0" y="0" width="30" height="32.9985" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                    <feOffset/>
+                                    <feGaussianBlur stdDeviation="2"/>
+                                    <feComposite in2="hardAlpha" operator="out"/>
+                                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+                                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_18055_34238"/>
+                                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_18055_34238" result="shape"/>
+                                  </filter>
+                                </defs>
+                              </svg>`;
+
+        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 = `<svg width="30" height="33" viewBox="0 0 30 33" fill="none" xmlns="http://www.w3.org/2000/svg" class="marker-svg">
+                                      <circle class="shadow-circle" cx="15" cy="29" r="3" fill="${markerDotFillColor}" stroke="${checkedMarkerDotColor}" stroke-width="2"/>
+                                      <g filter="url(#filter0_d_9268_79834)">
+                                        <path d="M26 14.9732C25.9991 16.7715 25.5554 18.542 24.708 20.1289C23.8606 21.7157 22.6355 23.0702 21.1405 24.0732C21.1165 24.0912 20.7609 24.3102 20.6207 24.4022C17.2485 26.5422 15.8954 27.9872 15.3505 28.8022C15.2859 28.8991 15.1854 28.9665 15.0712 28.9897C14.9569 29.0129 14.8381 28.9901 14.7406 28.9262C14.6916 28.8932 14.6494 28.8511 14.6164 28.8022C14.0716 27.9912 12.7135 26.5462 9.34626 24.4022C9.19302 24.3072 8.8515 24.0912 8.82646 24.0732C7.25656 23.0103 5.9886 21.5601 5.14572 19.8635C4.30285 18.1669 3.91368 16.2815 4.01603 14.3904C4.11837 12.4993 4.70874 10.6667 5.72981 9.0707C6.75088 7.47466 8.16796 6.16936 9.84342 5.28155C11.5189 4.39375 13.3958 3.95361 15.292 4.00387C17.1881 4.05413 19.039 4.5931 20.6649 5.56842C22.2908 6.54374 23.6365 7.92228 24.5713 9.57017C25.5062 11.2181 25.9983 13.0793 26 14.9732Z" fill="white"/>
+                                      </g>
+                                      <circle class="outside-circle" cx="15" cy="15" r="9" fill="${checkedMarkerColor}"/>
+                                      <path d="${markerSvgPath}" fill="${markerSvgPathFillColor}"/>
+                                      <defs>
+                                        <filter id="filter0_d_9268_79834" x="0" y="0" width="30" height="32.9985" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                          <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                          <feOffset/>
+                                          <feGaussianBlur stdDeviation="2"/>
+                                          <feComposite in2="hardAlpha" operator="out"/>
+                                          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+                                          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9268_79834"/>
+                                          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9268_79834" result="shape"/>
+                                        </filter>
+                                      </defs>
+                                    </svg>`;
+
+        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 = `<svg class="marker-svg" width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <g filter="url(#filter0_d_2631_274104)">
+                              <circle cx="26" cy="26" r="16" fill="white"/>
+                          </g>
+                          <circle cx="26" cy="26" r="14" fill="${markerColor}"/>
+                          <text
+                              id="_4"
+                              data-name="4"
+                              transform="translate(26 27)"
+                              fill="#fff"
+                              font-size="14"
+                              font-family="Montserrat, sans-serif"
+                              font-weight="700"
+                              dominant-baseline="middle"
+                              text-anchor="middle"
+                          >
+                              <tspan> ${count} </tspan>
+                          </text>
+                          <g opacity="0.7" filter="url(#filter1_d_2631_274104)">
+                              <path d="M36.781 7.65002L35.461 9.89302C35.3705 10.0502 35.3446 10.2363 35.3886 10.4122C35.4326 10.5881 35.5432 10.74 35.697 10.836C37.8917 12.2409 39.7555 14.1051 41.16 16.3C41.256 16.4538 41.408 16.5644 41.5838 16.6084C41.7597 16.6524 41.9458 16.6265 42.103 16.536L44.346 15.216C44.4275 15.1691 44.4988 15.1061 44.5554 15.031C44.6121 14.9559 44.653 14.8702 44.6758 14.7789C44.6986 14.6876 44.7027 14.5926 44.688 14.4997C44.6732 14.4068 44.6399 14.3178 44.59 14.238C42.8426 11.4867 40.5103 9.15436 37.759 7.40702C37.6792 7.35709 37.5902 7.32376 37.4973 7.30901C37.4044 7.29427 37.3094 7.2984 37.2181 7.32118C37.1268 7.34396 37.0411 7.38491 36.966 7.44158C36.8909 7.49825 36.8279 7.56848 36.781 7.65002ZM46.601 20.651L44.073 21.309C43.8985 21.3562 43.749 21.469 43.6558 21.6239C43.5626 21.7788 43.5329 21.9637 43.573 22.14C44.1343 24.6827 44.1343 27.3173 43.573 29.86C43.5329 30.0363 43.5626 30.2212 43.6558 30.3761C43.749 30.531 43.8985 30.6439 44.073 30.691L46.601 31.349C46.6917 31.3735 46.7864 31.3794 46.8795 31.3665C46.9725 31.3536 47.0621 31.3221 47.1427 31.2738C47.2233 31.2256 47.2934 31.1616 47.3488 31.0857C47.4041 31.0098 47.4437 30.9235 47.465 30.832C48.173 27.6496 48.173 24.3504 47.465 21.168C47.4437 21.0765 47.4041 20.9902 47.3488 20.9143C47.2934 20.8384 47.2233 20.7744 47.1427 20.7262C47.0621 20.678 46.9725 20.6464 46.8795 20.6335C46.7864 20.6206 46.6917 20.6266 46.601 20.651ZM30.696 44.079C30.6502 43.9037 30.5376 43.7532 30.3823 43.6598C30.227 43.5663 30.0414 43.5374 29.865 43.579C27.3192 44.1397 24.6818 44.1397 22.136 43.579C21.9597 43.5389 21.7748 43.5686 21.6199 43.6618C21.465 43.755 21.3521 43.9045 21.305 44.079L20.647 46.6C20.6225 46.6907 20.6166 46.7854 20.6295 46.8785C20.6424 46.9716 20.6739 47.0611 20.7222 47.1417C20.7704 47.2223 20.8344 47.2924 20.9103 47.3478C20.9862 47.4032 21.0725 47.4427 21.164 47.464C24.3471 48.172 27.6469 48.172 30.83 47.464C30.9214 47.4427 31.0076 47.4032 31.0834 47.3479C31.1592 47.2926 31.2231 47.2226 31.2714 47.1421C31.3196 47.0616 31.3512 46.9722 31.3641 46.8792C31.3771 46.7863 31.3713 46.6917 31.347 46.601L30.696 44.079ZM15.21 7.64902C15.163 7.56762 15.1002 7.49651 15.0251 7.43993C14.9501 7.38335 14.8644 7.34245 14.7733 7.31968C14.6821 7.29691 14.5873 7.29273 14.4945 7.30739C14.4016 7.32205 14.3127 7.35526 14.233 7.40502C11.4742 9.14543 9.13842 11.4795 7.39599 14.237C7.34623 14.3167 7.31303 14.4057 7.29837 14.4985C7.28371 14.5913 7.28789 14.6861 7.31066 14.7773C7.33343 14.8685 7.37432 14.9541 7.4309 15.0292C7.48748 15.1042 7.55859 15.1671 7.63999 15.214L9.88599 16.533C10.0436 16.6246 10.2308 16.6511 10.4076 16.6068C10.5845 16.5626 10.7371 16.4511 10.833 16.296C12.237 14.1021 14.101 12.2394 16.296 10.837C16.451 10.7411 16.5625 10.5885 16.6068 10.4116C16.6511 10.2348 16.6246 10.0476 16.533 9.89002L15.21 7.64902ZM7.90999 21.308L5.39599 20.652C5.30528 20.6274 5.21053 20.6213 5.11741 20.6341C5.02428 20.6468 4.93468 20.6782 4.85396 20.7264C4.77323 20.7746 4.70303 20.8385 4.64754 20.9143C4.59205 20.9902 4.55242 21.0765 4.53099 21.168C3.823 24.3504 3.823 27.6496 4.53099 30.832C4.55231 30.9235 4.59184 31.0098 4.64721 31.0857C4.70258 31.1616 4.77267 31.2256 4.8533 31.2738C4.93392 31.3221 5.02343 31.3536 5.1165 31.3665C5.20956 31.3794 5.30428 31.3735 5.39499 31.349L7.92299 30.691C8.09751 30.6439 8.24702 30.531 8.34022 30.3761C8.43342 30.2212 8.46308 30.0363 8.42299 29.86C8.13992 28.5928 7.99673 27.2984 7.99599 26C7.99593 24.7027 8.13439 23.409 8.40899 22.141C8.44966 21.9645 8.42028 21.779 8.32703 21.6237C8.23379 21.4683 8.08494 21.3552 7.90999 21.308ZM9.88899 35.465L7.64599 36.785C7.56446 36.832 7.49322 36.8949 7.43655 36.97C7.37988 37.0451 7.33893 37.1309 7.31616 37.2222C7.29338 37.3135 7.28924 37.4084 7.30399 37.5013C7.31874 37.5943 7.35207 37.6833 7.40199 37.763C9.14933 40.5143 11.4817 42.8467 14.233 44.594C14.3127 44.6439 14.4017 44.6773 14.4947 44.692C14.5876 44.7068 14.6826 44.7026 14.7738 44.6799C14.8651 44.6571 14.9509 44.6161 15.026 44.5595C15.1011 44.5028 15.164 44.4316 15.211 44.35L16.531 42.107C16.6214 41.9499 16.6474 41.7638 16.6034 41.5879C16.5594 41.412 16.4488 41.26 16.295 41.164C14.1003 39.7592 12.2365 37.895 10.832 35.7C10.736 35.5462 10.584 35.4357 10.4081 35.3916C10.2322 35.3476 10.0461 35.3746 9.88899 35.465ZM41.16 35.7C39.7552 37.8951 37.891 39.7593 35.696 41.164C35.5422 41.26 35.4316 41.412 35.3876 41.5879C35.3436 41.7638 35.3695 41.9499 35.46 42.107L36.78 44.35C36.827 44.4316 36.8899 44.5028 36.965 44.5595C37.0401 44.6161 37.1258 44.6571 37.2171 44.6799C37.3084 44.7026 37.4034 44.7068 37.4963 44.692C37.5892 44.6773 37.6782 44.6439 37.758 44.594C40.5093 42.8467 42.8416 40.5143 44.589 37.763C44.6389 37.6833 44.6722 37.5943 44.687 37.5013C44.7017 37.4084 44.6976 37.3135 44.6748 37.2222C44.6521 37.1309 44.6111 37.0451 44.5544 36.97C44.4978 36.8949 44.4265 36.832 44.345 36.785L42.102 35.465C41.9448 35.3746 41.7587 35.3486 41.5828 35.3926C41.407 35.4367 41.255 35.5472 41.159 35.701M25.996 4.00002C24.3707 3.99798 22.7501 4.17607 21.164 4.53102C21.0725 4.55244 20.9862 4.59208 20.9103 4.64757C20.8344 4.70305 20.7705 4.77325 20.7224 4.85398C20.6742 4.93471 20.6428 5.02431 20.63 5.11743C20.6173 5.21056 20.6234 5.3053 20.648 5.39602L21.304 7.91202C21.3511 8.08696 21.4643 8.23681 21.6196 8.33006C21.775 8.4233 21.9604 8.45268 22.137 8.41202C23.405 8.13775 24.6987 7.99963 25.996 8.00002C27.2971 7.99907 28.5944 8.1399 29.865 8.42002C30.0414 8.46168 30.227 8.43269 30.3823 8.33926C30.5376 8.24583 30.6502 8.09536 30.696 7.92002L31.347 5.39302C31.3713 5.30237 31.3771 5.20776 31.3641 5.11481C31.3512 5.02186 31.3196 4.93247 31.2714 4.85196C31.2231 4.77145 31.1592 4.70146 31.0834 4.64615C31.0076 4.59084 30.9214 4.55135 30.83 4.53002C29.2431 4.17581 27.6219 3.99806 25.996 4.00002Z" fill="${
+                                  isSelected ? markerColor : '#FFFFFF'
+                              }"/>
+                          </g>
+                          <defs>
+                              <filter id="filter0_d_2631_274104" x="6" y="6" width="40" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                  <feOffset/>
+                                  <feGaussianBlur stdDeviation="2"/>
+                                  <feComposite in2="hardAlpha" operator="out"/>
+                                  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+                                  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2631_274104"/>
+                                  <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2631_274104" result="shape"/>
+                              </filter>
+                              <filter id="filter1_d_2631_274104" x="0" y="0" width="51.9961" height="51.995" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                  <feOffset/>
+                                  <feGaussianBlur stdDeviation="2"/>
+                                  <feComposite in2="hardAlpha" operator="out"/>
+                                  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+                                  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2631_274104"/>
+                                  <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2631_274104" result="shape"/>
+                              </filter>
+                          </defs>
+                        </svg>`;
+
+        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 `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect class="${classes}" width="10" height="10" rx="5" fill="#6692F1"/>
+                    <rect x="3" y="3" width="4" height="4" rx="2" fill="white"/>
+                </svg>`;
+    }
+
+    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 `<svg class="overflow-visible" width="26" height="37" viewBox="0 0 26 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <g transform="rotate(${rotationDeg}, 13, 24)">
+                        <path d="M4 0L22 0L18 24H8L4 0Z" fill="url(#paint0_linear_5496_225961)"/>
+                    </g>
+                    <g filter="url(#filter0_d_5496_225961)">
+                        <circle cx="13" cy="24" r="9" fill="white"/>
+                    </g>
+                    <circle cx="13" cy="24" r="6" fill="#6692F1"/>
+                    <defs>
+                        <filter id="filter0_d_5496_225961" x="0" y="11" width="26" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                            <feOffset/>
+                            <feGaussianBlur stdDeviation="2"/>
+                            <feComposite in2="hardAlpha" operator="out"/>
+                            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5496_225961"/>
+                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5496_225961" result="shape"/>
+                        </filter>
+                        <linearGradient id="paint0_linear_5496_225961" x1="13" y1="0" x2="13" y2="24" gradientUnits="userSpaceOnUse">
+                            <stop stop-color="#3B73ED" stop-opacity="0"/>
+                            <stop offset="1" stop-color="#3B73ED"/>
+                        </linearGradient>
+                    </defs>
+                </svg>`;
+    }
+
+    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 `<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <g filter="url(#filter0_d)">
+                        <circle cx="13.0013" cy="13" r="9" fill="white"/>
+                    </g>
+                    <circle cx="13.0013" cy="13" r="7" fill="${fillColor}" />
+                    ${isInnerCircleVisible ? `<circle cx="13.0013" cy="13" r="${innerRadius}" fill="white" />` : ''}
+                    <defs>
+                        <filter id="filter0_d" x="0.00134277" y="0" width="26" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                            <feColorMatrix in="SourceAlpha" type="matrix"
+                                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                                result="hardAlpha"/>
+                            <feOffset/>
+                            <feGaussianBlur stdDeviation="2"/>
+                            <feComposite in2="hardAlpha" operator="out"/>
+                            <feColorMatrix type="matrix"
+                                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+                        </filter>
+                    </defs>
+                </svg>`;
+    }
+
+    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 `<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="11" cy="11" r="10" fill="${markerColor}" stroke="white" stroke-width="2"/>
+                    <text x="11" y="12.5" fill="white" font-size="11" font-family="Montserrat, sans-serif" font-weight="700" text-anchor="middle" dominant-baseline="middle"
+                    >
+                        <tspan>${stopNumber ?? 0}</tspan>
+                    </text>
+                </svg>`;
+    }
+
+    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
+                ? '<path d="M20.3996 10.7989V19.2006C20.4005 19.2787 20.3863 19.3562 20.3577 19.4286C20.3291 19.5011 20.2867 19.5671 20.233 19.6229C20.1792 19.6786 20.1151 19.7231 20.0444 19.7536C19.9737 19.7841 19.8977 19.8002 19.8209 19.8008H19.2422C19.1656 19.7998 19.09 19.7835 19.0196 19.7528C18.9492 19.7221 18.8854 19.6777 18.8319 19.6219C18.7784 19.5662 18.7362 19.5003 18.7078 19.428C18.6794 19.3557 18.6653 19.2785 18.6662 19.2006V10.801C18.6653 10.7229 18.6795 10.6454 18.7081 10.5729C18.7367 10.5005 18.7791 10.4345 18.8328 10.3787C18.8866 10.3229 18.9507 10.2785 19.0214 10.248C19.0921 10.2174 19.1681 10.2014 19.2449 10.2008H19.8236C19.9779 10.2027 20.1252 10.2668 20.2332 10.3789C20.3412 10.491 20.401 10.6421 20.3996 10.7989ZM10.1783 16.6001H13.457V18.7928C13.455 18.8905 13.4819 18.9865 13.5342 19.0684C13.5865 19.1503 13.6618 19.2144 13.7503 19.2523C13.8389 19.2903 13.9366 19.3004 14.0309 19.2812C14.1251 19.2621 14.2115 19.2147 14.2789 19.1451L17.9456 15.3395C18.0326 15.2478 18.0812 15.1254 18.0812 14.9981C18.0812 14.8707 18.0326 14.7483 17.9456 14.6567L14.2789 10.8511C14.2115 10.7815 14.1251 10.734 14.0309 10.7149C13.9366 10.6958 13.8389 10.7059 13.7503 10.7438C13.6618 10.7817 13.5865 10.8458 13.5342 10.9278C13.4819 11.0097 13.455 11.1057 13.457 11.2033V13.3994H10.1783C10.1015 13.4 10.0255 13.4161 9.95482 13.4466C9.8841 13.4771 9.82002 13.5216 9.76625 13.5773C9.71248 13.6331 9.67008 13.6991 9.64149 13.7716C9.61291 13.844 9.59869 13.9215 9.59966 13.9996V15.9999C9.59869 16.078 9.61291 16.1555 9.64149 16.228C9.67008 16.3004 9.71248 16.3664 9.76625 16.4222C9.82002 16.478 9.8841 16.5224 9.95482 16.5529C10.0255 16.5835 10.1015 16.5995 10.1783 16.6001Z" fill="white"/>'
+                : '<path d="M11.3334 19.1992V10.7993C11.3354 10.6424 11.2761 10.4912 11.1684 10.3787C11.0608 10.2663 10.9137 10.2017 10.7593 10.1992H10.1785C10.1018 10.1998 10.0261 10.2158 9.95553 10.2461C9.88497 10.2765 9.821 10.3207 9.76725 10.3761C9.7135 10.4316 9.67103 10.4973 9.64228 10.5694C9.61352 10.6415 9.59904 10.7187 9.59966 10.7966V19.1992C9.59869 19.277 9.61282 19.3543 9.64125 19.4265C9.66968 19.4988 9.71185 19.5647 9.76535 19.6204C9.81885 19.6761 9.88264 19.7206 9.95306 19.7513C10.0235 19.782 10.0992 19.7982 10.1758 19.7992H10.7573C10.8339 19.7986 10.9097 19.7827 10.9802 19.7523C11.0508 19.7219 11.1148 19.6778 11.1685 19.6223C11.2222 19.5668 11.2647 19.5012 11.2935 19.429C11.3222 19.3569 11.3367 19.2797 11.3361 19.2019M12.493 13.3992H15.7725V11.2049C15.7705 11.1073 15.7974 11.0113 15.8498 10.9294C15.9021 10.8475 15.9774 10.7834 16.066 10.7455C16.1546 10.7076 16.2523 10.6975 16.3466 10.7166C16.4409 10.7358 16.5273 10.7832 16.5947 10.8528L20.2623 14.6562C20.3504 14.748 20.3996 14.8711 20.3996 14.9992C20.3996 15.1274 20.3504 15.2504 20.2623 15.3422L16.5947 19.1464C16.527 19.2158 16.4403 19.263 16.3459 19.2818C16.2515 19.3007 16.1537 19.2903 16.0651 19.2521C15.9766 19.2139 15.9014 19.1495 15.8492 19.0674C15.797 18.9853 15.7703 18.8892 15.7725 18.7915V16.5972H12.493C12.4164 16.5966 12.3407 16.5806 12.2701 16.5503C12.1996 16.5199 12.1356 16.4757 12.0818 16.4203C12.0281 16.3648 11.9856 16.2991 11.9569 16.227C11.9281 16.1549 11.9136 16.0777 11.9142 15.9999V13.9993C11.9133 13.9214 11.9274 13.8442 11.9558 13.7719C11.9843 13.6996 12.0264 13.6338 12.0799 13.578C12.1334 13.5223 12.1972 13.4778 12.2676 13.4472C12.3381 13.4165 12.4138 13.4002 12.4904 13.3992" fill="white"/>';
+
+        return `<svg class="marker-svg" width="30" height="33" viewBox="0 0 30 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="15" cy="29" r="3" fill="${markerColor}" stroke="#EEEEEE" stroke-width="2"/>
+                    <g filter="url(#filter0_d_48097_211664)">
+                        <path d="M26 14.9732C25.9991 16.7715 25.5554 18.542 24.708 20.1289C23.8606 21.7157 22.6355 23.0702 21.1405 24.0732C21.1165 24.0912 20.7609 24.3102 20.6207 24.4022C17.2485 26.5422 15.8954 27.9872 15.3505 28.8022C15.2859 28.8991 15.1854 28.9665 15.0712 28.9897C14.9569 29.0129 14.8381 28.9901 14.7406 28.9262C14.6916 28.8932 14.6494 28.8511 14.6164 28.8022C14.0716 27.9912 12.7135 26.5462 9.34626 24.4022C9.19302 24.3072 8.8515 24.0912 8.82646 24.0732C7.25656 23.0103 5.9886 21.5601 5.14572 19.8635C4.30285 18.1669 3.91368 16.2815 4.01603 14.3904C4.11837 12.4993 4.70874 10.6667 5.72981 9.0707C6.75088 7.47466 8.16796 6.16936 9.84342 5.28155C11.5189 4.39375 13.3958 3.95361 15.292 4.00387C17.1881 4.05413 19.039 4.5931 20.6649 5.56842C22.2908 6.54374 23.6365 7.92228 24.5713 9.57017C25.5062 11.2181 25.9983 13.0793 26 14.9732Z" fill="white"/>
+                    </g>
+                    <circle cx="15" cy="15" r="9" fill="${markerColor}"/>
+                    ${markerInsideContent}
+                    <defs>
+                        <filter id="filter0_d_48097_211664" x="0" y="0" width="30" height="32.998" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                            <feOffset/>
+                            <feGaussianBlur stdDeviation="2"/>
+                            <feComposite in2="hardAlpha" operator="out"/>
+                            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_48097_211664"/>
+                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_48097_211664" result="shape"/>
+                        </filter>
+                    </defs>
+                </svg>`;
+    }
+
+    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 `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <g filter="url(#filter0_d_62732_4805)">
+                        <rect x="6" y="6" width="12" height="12" rx="6" fill="white" shape-rendering="geometricPrecision"/>
+                        <rect x="8" y="8" width="8" height="8" rx="4" fill="${markerColor}"/>
+                    </g>
+                    <defs>
+                        <filter id="filter0_d_62732_4805" x="0" y="0" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                            <feOffset/>
+                            <feGaussianBlur stdDeviation="3"/>
+                            <feComposite in2="hardAlpha" operator="out"/>
+                            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_62732_4805"/>
+                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_62732_4805" result="shape"/>
+                        </filter>
+                    </defs>
+                </svg>`;
+    }
+
+    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;
+        }
+    }
+}