@aggdirect/coolmap-services 1.4.8 → 4.0.0

package/fesm2022/coolmap-services.mjs

@@ -0,0 +1,1339 @@
+import * as i0 from '@angular/core';
+import { Component, InjectionToken, inject, NgZone, Injectable, signal } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import mapboxgl from 'mapbox-gl';
+import * as turf from '@turf/turf';
+import { HttpClient } from '@angular/common/http';
+
+class CoolmapServices {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CoolmapServices, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: CoolmapServices, isStandalone: true, selector: "lib-coolmap-services", ngImport: i0, template: `
+    <p>
+      coolmap-services works!
+    </p>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CoolmapServices, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-coolmap-services', imports: [], template: `
+    <p>
+      coolmap-services works!
+    </p>
+  ` }]
+        }] });
+
+const COOLMAP_CONFIG = new InjectionToken('COOLMAP_CONFIG');
+function provideCoolmapConfig(config) {
+    return {
+        provide: COOLMAP_CONFIG,
+        useValue: config
+    };
+}
+
+class UtilsService {
+    http = inject(HttpClient);
+    config = inject(COOLMAP_CONFIG);
+    ngZone = inject(NgZone);
+    // BehaviorSubjects for state (converting to simple Signals later where practical)
+    preventnavChange = new BehaviorSubject(false);
+    navChangeObserve = this.preventnavChange.asObservable();
+    clearViewRouteforJobCode = new BehaviorSubject(false);
+    clearViewRouteforJobCodeObserve = this.clearViewRouteforJobCode.asObservable();
+    preVentJobdetailclose = new BehaviorSubject(false);
+    getpreVentJobdetailclose = this.preVentJobdetailclose.asObservable();
+    routeDetailsUtility = new BehaviorSubject({});
+    getrouteDetailsUtility = this.routeDetailsUtility.asObservable();
+    removeMapEntity = new BehaviorSubject({});
+    removeMapEntityUtility = this.removeMapEntity.asObservable();
+    dict = new Map();
+    unitsList;
+    materialsList;
+    materialsListForCustomer;
+    customersList;
+    locationList;
+    // Options filtering properties
+    pickupOptions = [];
+    destOptions = [];
+    ownerOptions = [];
+    customerOptions = [];
+    unitOptions = [];
+    materialOptions = [];
+    jcodeOptions = [];
+    driverOption = [];
+    truckingCompanayOption = [];
+    routeNameOptions = [];
+    getDateFormat(strVal, seprater) {
+        seprater = seprater ? seprater : '-';
+        const mydate = strVal;
+        if (!mydate)
+            return '';
+        const month = String(mydate.getMonth() + 1).padStart(2, '0');
+        const day = String(mydate.getDate()).padStart(2, '0');
+        return (mydate.getFullYear() +
+            seprater +
+            month +
+            seprater +
+            day);
+    }
+    getData(path) {
+        return this.http.get(`${this.config.analyticsRESTURL}${this.config.repository}/${path}`);
+    }
+    getRestData(path) {
+        return this.http.get(`${this.config.RESTURLPrefix}${path}`);
+    }
+    postdata(path, data) {
+        return this.http.post(`${this.config.analyticsRESTURL}${this.config.repository}/${path}`, data);
+    }
+    postDataWithRestUrl(path, data) {
+        return this.http.post(`${this.config.RESTURLPrefix}${path}`, data);
+    }
+    // Instead of MatSnackBar, we just use a generic console/alert fallback for now.
+    openSnackBar(message, className) {
+    }
+    clearOptions() {
+        this.pickupOptions = [];
+        this.destOptions = [];
+        this.ownerOptions = [];
+        this.customerOptions = [];
+        this.unitOptions = [];
+        this.materialOptions = [];
+        this.jcodeOptions = [];
+        this.routeNameOptions = [];
+    }
+    makeOptions(item) {
+        // Porting V1 makeOptions safely
+        if (item.order_number) {
+            if (this.jcodeOptions.findIndex((elem) => elem.job_id === item.job_id) === -1) {
+                this.jcodeOptions.push({ job_code: item.order_number, job_id: item.job_id });
+            }
+            // Assuming tasks structure if Mapbox Route logic was merged, else driver_list from V1
+            const driver_list = item.driver_list || [];
+            if (driver_list.length > 0) {
+                driver_list.forEach((driver) => {
+                    if (this.driverOption.findIndex((elem) => elem === driver.driver_name) === -1) {
+                        this.driverOption.push(driver.driver_name);
+                    }
+                    if (this.truckingCompanayOption.findIndex((elem) => elem === driver.trucking_company) === -1) {
+                        this.truckingCompanayOption.push(driver.trucking_company);
+                    }
+                });
+            }
+        }
+        if (item.pickup_location && this.pickupOptions.findIndex((elem) => elem === item.pickup_location) === -1)
+            this.pickupOptions.push(item.pickup_location);
+        if (item.delivery_location && this.destOptions.findIndex((elem) => elem === item.delivery_location) === -1)
+            this.destOptions.push(item.delivery_location);
+        if (item.customer_name && this.customerOptions.findIndex((customer) => customer === item.customer_name) === -1)
+            this.customerOptions.push(item.customer_name);
+        if (item.unit && this.unitOptions.findIndex((elem) => elem === item.unit) === -1)
+            this.unitOptions.push(item.unit);
+        if (item.material && this.materialOptions.findIndex((elem) => elem === item.material) === -1)
+            this.materialOptions.push(item.material);
+        if (item.route_name && this.routeNameOptions.findIndex((elem) => elem === item.route_name) === -1)
+            this.routeNameOptions.push(item.route_name);
+    }
+    setdictValue(key, value) {
+        this.dict.set(key, value);
+    }
+    getdictValue(key) {
+        const val = this.dict.get(key);
+        return val ? JSON.parse(val) : null;
+    }
+    removedictValue(key) {
+        this.dict.delete(key);
+    }
+    filter(value, filters) {
+        if (typeof value !== 'string') {
+            return [];
+        }
+        const filterValue = value.toLowerCase();
+        if (filterValue === '') {
+            return [];
+        }
+        const searchResults = [];
+        this.unitOptions.forEach((unit) => {
+            if (unit.toLowerCase().includes(filterValue)) {
+                searchResults.push({ type: 'unit', label: unit, value: unit });
+            }
+        });
+        this.customerOptions.forEach((unit) => {
+            if (unit.toLowerCase().includes(filterValue)) {
+                searchResults.push({ type: 'customer', label: unit, value: unit });
+            }
+        });
+        if (this.materialOptions && this.materialOptions.length) {
+            this.materialOptions.forEach((unit) => {
+                if (unit.toLowerCase().includes(filterValue)) {
+                    searchResults.push({ type: 'material', label: unit, value: unit });
+                }
+            });
+        }
+        this.pickupOptions.forEach((unit) => {
+            if (unit.toLowerCase().includes(filterValue)) {
+                searchResults.push({
+                    type: 'pickup location',
+                    label: unit,
+                    value: unit,
+                });
+            }
+        });
+        this.destOptions.forEach((unit) => {
+            if (unit.toLowerCase().includes(filterValue)) {
+                searchResults.push({
+                    type: 'destination location',
+                    label: unit,
+                    value: unit,
+                });
+            }
+        });
+        this.jcodeOptions.forEach((unit) => {
+            if (unit.job_code.toLowerCase().includes(filterValue)) {
+                searchResults.push({
+                    type: 'job',
+                    label: unit['job_code'],
+                    value: unit,
+                });
+            }
+        });
+        this.driverOption.forEach((unit) => {
+            if (unit.toLowerCase().includes(filterValue)) {
+                searchResults.push({ type: 'Driver', label: unit, value: unit });
+            }
+        });
+        this.truckingCompanayOption.forEach((unit) => {
+            if (unit.toLowerCase().includes(filterValue)) {
+                searchResults.push({
+                    type: 'Trucking Company',
+                    label: unit,
+                    value: unit,
+                });
+            }
+        });
+        this.routeNameOptions.forEach((unit) => {
+            if (unit.toLowerCase().includes(filterValue)) {
+                searchResults.push({ type: 'Route name', label: unit, value: unit });
+            }
+        });
+        // Filter out options that are already selected in the filters array
+        const searchDict = {};
+        filters.forEach((filter) => {
+            searchDict[filter['name'] + filter['type']] = filter;
+        });
+        const furtherFilter = [];
+        searchResults.forEach((search) => {
+            if (!(search['label'] + search['type'] in searchDict)) {
+                furtherFilter.push(search);
+            }
+        });
+        return furtherFilter;
+    }
+    getSearchResults(list, filterval) {
+        return list.filter((element) => {
+            const result_list_boolean = [];
+            if (filterval.length > 0) {
+                if (filterval[0]['type'] === 'unit') {
+                    result_list_boolean.push(filterval[0]['name'] === element['unit']);
+                }
+                if (filterval[0]['type'] === 'customer') {
+                    result_list_boolean.push(filterval[0]['name'] === element['customer_name']);
+                }
+                if (filterval[0]['type'] === 'material') {
+                    result_list_boolean.push(filterval[0]['name'] === element['material']);
+                }
+                if (filterval[0]['type'] === 'pickup location') {
+                    result_list_boolean.push(filterval[0]['name'] === element['pickup_location']);
+                }
+                if (filterval[0]['type'] === 'destination location') {
+                    result_list_boolean.push(filterval[0]['name'] === element['delivery_location']);
+                }
+                if (filterval[0]['type'] === 'job') {
+                    result_list_boolean.push(filterval[0]['name'] === element['order_number']);
+                }
+                if (filterval[0]['type'] === 'Route name') {
+                    result_list_boolean.push(filterval[0]['name'] === element['route_name']);
+                }
+                if (filterval[0]['type'] === 'Driver') {
+                    const driverList = element.driver_list || [];
+                    const index = driverList.findIndex((ele) => {
+                        return filterval[0]['name'] === ele['driver_name'];
+                    });
+                    if (index !== -1)
+                        result_list_boolean.push(true);
+                }
+                if (filterval[0]['type'] === 'Trucking Company') {
+                    const driverList = element.driver_list || [];
+                    const index = driverList.findIndex((ele) => {
+                        return filterval[0]['name'] === ele['trucking_company'];
+                    });
+                    if (index !== -1)
+                        result_list_boolean.push(true);
+                }
+            }
+            if (result_list_boolean.length > 0) {
+                return result_list_boolean.reduce((prev, curr) => prev && curr);
+            }
+            return false;
+        });
+    }
+    fetchUnitsList() {
+        return new Promise((resolve) => {
+            if (!this.unitsList) {
+                this.getData('unit/list/view').subscribe((res) => {
+                    if (res) {
+                        this.unitsList = res.data;
+                        resolve(this.unitsList);
+                    }
+                });
+            }
+            else {
+                resolve(this.unitsList);
+            }
+        });
+    }
+    fetchMaterialsListForCustomer() {
+        return new Promise((resolve) => {
+            if (!this.materialsListForCustomer) {
+                this.getData('material/list/view').subscribe((res) => {
+                    this.materialsListForCustomer = this.filtermaterialList(res.data);
+                    resolve(this.materialsListForCustomer);
+                });
+            }
+            else {
+                resolve(this.materialsListForCustomer);
+            }
+        });
+    }
+    filtermaterialList(list) {
+        let meterialList = [];
+        list.forEach((item) => {
+            if (item.sub && item.sub.length > 0) {
+                item.sub.forEach((subItem) => {
+                    if (subItem.add_to_marketplace) {
+                        subItem.material = item.material;
+                        subItem.material_id = item.material_id;
+                        subItem.label = item.material + ' | ' + subItem.sub_material;
+                        meterialList.push(subItem);
+                    }
+                });
+            }
+        });
+        meterialList.sort((a, b) => a.label.localeCompare(b.label));
+        return meterialList;
+    }
+    fetchCustomersList() {
+        return new Promise((resolve) => {
+            if (!this.customersList) {
+                this.getData('company/list/view').subscribe((res) => {
+                    if (res) {
+                        this.customersList = res.data;
+                        resolve(this.customersList);
+                    }
+                });
+            }
+            else {
+                resolve(this.customersList);
+            }
+        });
+    }
+    fetchLocationlist() {
+        return new Promise((resolve, reject) => {
+            this.getRestData('locations/all').subscribe({
+                next: (res) => {
+                    if (res) {
+                        this.locationList = res.data.map((object) => {
+                            object.formatted_address = `${object.name} | ${object.street} ${object.city}, ${object.state} ${object.zip}`;
+                            return {
+                                city: object.city,
+                                lng: object.longitude,
+                                location_id: object.location_id,
+                                lat: object.latitude,
+                                name: object.name,
+                                state: object.state,
+                                street: object.street,
+                                zip: object.zip,
+                                formatted_address: object.formatted_address
+                            };
+                        });
+                        resolve(this.locationList);
+                    }
+                },
+                error: (err) => {
+                    console.error(err);
+                    reject(err);
+                }
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: UtilsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: UtilsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class MapboxService {
+    map;
+    mapContainer = null;
+    markerOriginList = new Map();
+    markerDestinationList = new Map();
+    activeRoutesRegistry = new Map();
+    pathCache = new Map();
+    // Native 3D Simulation Engine 
+    svgOverlay = null;
+    activeArcs = {};
+    initiatecoolmap = new BehaviorSubject(true);
+    reintiatecoolmap = this.initiatecoolmap.asObservable();
+    isMapReady = signal(false, ...(ngDevMode ? [{ debugName: "isMapReady" }] : []));
+    bounds = new mapboxgl.LngLatBounds();
+    originDestinationCordinates = [];
+    padding;
+    windowActualHeightWidth = { availHeight: 0 };
+    popup;
+    customTopForCustomer;
+    utils = inject(UtilsService);
+    config = inject(COOLMAP_CONFIG);
+    currentStyleIsDark = false;
+    constructor() {
+        this.customTopForCustomer = this.config.repository === 'customer' ? 65 : 0;
+        if (typeof window !== 'undefined') {
+            this.windowActualHeightWidth.availHeight = window.innerHeight > window.screen.availHeight ? window.innerHeight : window.screen.availHeight;
+            window.addEventListener('resize', this.onResize.bind(this));
+        }
+    }
+    updateTheme(isDark) {
+        if (!this.map) {
+            this.currentStyleIsDark = isDark;
+            return;
+        }
+        if (this.currentStyleIsDark === isDark)
+            return;
+        this.currentStyleIsDark = isDark;
+        const style = isDark
+            ? 'mapbox://styles/mapbox/dark-v11'
+            : 'mapbox://styles/mapbox/light-v11';
+        this.map.setStyle(style);
+        this.map.once('style.load', () => {
+            this.reAddLayers();
+        });
+    }
+    getRegistryKeys() {
+        return Array.from(this.activeRoutesRegistry.keys());
+    }
+    // Renamed to initializeMap to preserve the existing bindings in coolmap.component.ts
+    initializeMap(el, isDark = false) {
+        this.currentStyleIsDark = isDark;
+        return new Promise((resolve, reject) => {
+            this.mapContainer = el;
+            if (this.map)
+                this.map.remove();
+            const token = typeof window !== 'undefined' ? window.__env?.mapboxAccessToken || '' : '';
+            mapboxgl.accessToken = token;
+            this.map = new mapboxgl.Map({
+                container: el,
+                style: isDark ? 'mapbox://styles/mapbox/dark-v11' : 'mapbox://styles/mapbox/light-v11',
+                center: [-77.036873, 38.907192],
+                zoom: 10,
+                bearing: 0,
+                pitch: 65,
+                interactive: true,
+                attributionControl: false
+            });
+            this.map.addControl(new mapboxgl.AttributionControl({ compact: true }), 'bottom-right');
+            this.map.addControl(new mapboxgl.NavigationControl({ showCompass: false }), 'top-right');
+            this.map.once('load', (res) => {
+                this.isMapReady.set(true);
+                resolve(res);
+            });
+        });
+    }
+    // Animated gradient path
+    loadMapProperty(pinRouteGeojson, index, unit, routeProps, bottom) {
+        return new Promise((resolve) => {
+            if (!this.map || !this.isMapReady())
+                return resolve(false);
+            const origin = pinRouteGeojson.features[0].geometry.coordinates[0];
+            const linecolor = unit === 'Ton' ? '#ff7272' : unit === 'Load' ? '#a3c52e' : '#ae23d1';
+            const destination = pinRouteGeojson.features[0].geometry.coordinates[pinRouteGeojson.features[0].geometry.coordinates.length - 1];
+            this.extendBound(pinRouteGeojson.features[0].geometry.coordinates, true).then(() => {
+                const point = {
+                    type: 'FeatureCollection',
+                    features: [
+                        { type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: origin } },
+                    ],
+                };
+                const lineDistance = turf.length(pinRouteGeojson.features[0]);
+                const arc = [];
+                const steps = 10 * pinRouteGeojson.features[0].geometry.coordinates.length;
+                for (let i = 0; i < lineDistance; i += lineDistance / steps) {
+                    const segment = turf.along(pinRouteGeojson.features[0], i);
+                    arc.push(segment.geometry.coordinates);
+                }
+                pinRouteGeojson.features[0].geometry.coordinates = arc;
+                const pinRoute = pinRouteGeojson.features[0].geometry.coordinates;
+                if (pinRoute && pinRoute.length) {
+                    const marker = new mapboxgl.Marker(document.createElement('div'))
+                        .setLngLat(pinRoute[0])
+                        .addTo(this.map)
+                        .togglePopup();
+                    if (this.map.getSource(`line${index}`)) {
+                        this.removeRouteAndMarker(index).then(() => { });
+                    }
+                    this.map.addSource(`line${index}`, {
+                        type: 'geojson',
+                        lineMetrics: true,
+                        data: pinRouteGeojson,
+                    });
+                    this.map.addLayer({
+                        type: 'line',
+                        source: `line${index}`,
+                        id: `line${index}`,
+                        paint: {
+                            'line-width': 2,
+                            'line-gradient': [
+                                'interpolate', ['linear'], ['line-progress'],
+                                0, unit === 'Ton' ? '#d7f7e4' : unit === 'Load' ? '#c9d8f5' : '#f5dcc1',
+                                1, unit === 'Ton' ? '#ff7272' : unit === 'Load' ? '#a3c52e' : '#ae23d1',
+                            ],
+                        },
+                        layout: { 'line-cap': 'round', 'line-join': 'round' },
+                    });
+                    const dataSetForMap = {
+                        counter: 0,
+                        pinRouteGeojson,
+                        steps,
+                        point,
+                        pointId: `point${index}`,
+                        marker,
+                        pinRoute,
+                        lineId: `line${index}`,
+                        index,
+                        origin,
+                        destination,
+                        lineDistance,
+                        linecolor,
+                        route: routeProps,
+                        routeType: 'addroute',
+                        isViewRoute: true,
+                    };
+                    this.createMarker(dataSetForMap);
+                    this.map.on('mouseenter', `line${index}`, (e) => {
+                        this.map.setPaintProperty(`line${index}`, 'line-width', 5);
+                        this.map.setPaintProperty(`line${index}`, 'line-opacity', 1);
+                        const datasetForPopup = {
+                            coordinate: [e.lngLat.lng, e.lngLat.lat],
+                            pickup: routeProps?.pickup_location || '',
+                            drop: routeProps?.delivery_location || '',
+                            routeType: routeProps?.project ? 'Project' : 'Route',
+                            title: routeProps?.project ? routeProps.project : routeProps?.route_name || '',
+                            material: routeProps?.material || '',
+                            type: routeProps?.unit || '',
+                        };
+                        if (this.popup)
+                            this.popup.remove();
+                        this.createPopup(datasetForPopup);
+                    });
+                    this.map.on('mouseleave', `line${index}`, () => {
+                        this.map.setPaintProperty(`line${index}`, 'line-width', 2);
+                        if (this.popup)
+                            this.popup.remove();
+                    });
+                }
+            });
+            this.map.once('idle', () => {
+                resolve(true);
+            });
+        });
+    }
+    createMarker(routeDetails) {
+        if (!this.map || !routeDetails.origin[0] || !routeDetails.origin[1] || !routeDetails.destination[0] || !routeDetails.destination[1])
+            return;
+        const popup = new mapboxgl.Popup({ closeButton: false }).setHTML('<b>Pickup: </b>' + (routeDetails.route?.pickup_location || ''));
+        const popupForDestination = new mapboxgl.Popup({ closeButton: false }).setHTML('<b>Delivery: </b>' + (routeDetails.route?.delivery_location || ''));
+        // Origin Marker (Pickup)
+        const el = document.createElement('div');
+        el.className = 'cursor-pointer active:scale-95 transition-transform duration-200 drop-shadow-lg';
+        const pickupLabel = 'P';
+        el.innerHTML = `
+      <svg width="30" height="38" viewBox="0 0 30 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15 0C6.71573 0 0 6.71573 0 15C0 26.25 15 38 15 38C15 38 30 26.25 30 15C30 6.71573 23.2843 0 15 0Z" fill="${routeDetails.linecolor}"/>
+        <circle cx="15" cy="15" r="9" fill="white"/>
+        <text x="15" y="19" text-anchor="middle" fill="black" style="font-family: Inter, sans-serif; font-size: 13px; font-weight: 800;">${pickupLabel}</text>
+      </svg>
+    `;
+        const originMarker = new mapboxgl.Marker({ element: el, anchor: 'bottom' })
+            .setPopup(popup)
+            .setLngLat(routeDetails.origin)
+            .addTo(this.map);
+        originMarker.getElement().addEventListener('mouseenter', () => originMarker.togglePopup());
+        originMarker.getElement().addEventListener('mouseleave', () => originMarker.togglePopup());
+        // Destination Marker (Delivery)
+        const elementForDestination = document.createElement('div');
+        elementForDestination.className = 'cursor-pointer active:scale-95 transition-transform duration-200 drop-shadow-lg';
+        const deliveryLabel = 'D';
+        elementForDestination.innerHTML = `
+      <svg width="30" height="38" viewBox="0 0 30 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15 0C6.71573 0 0 6.71573 0 15C0 26.25 15 38 15 38C15 38 30 26.25 30 15C30 6.71573 23.2843 0 15 0Z" fill="${routeDetails.linecolor}"/>
+        <circle cx="15" cy="15" r="9" fill="white"/>
+        <text x="15" y="19" text-anchor="middle" fill="black" style="font-family: Inter, sans-serif; font-size: 13px; font-weight: 800;">${deliveryLabel}</text>
+      </svg>
+    `;
+        const destinationMarker = new mapboxgl.Marker({ element: elementForDestination, anchor: 'bottom' })
+            .setPopup(popupForDestination)
+            .setLngLat(routeDetails.destination)
+            .addTo(this.map);
+        destinationMarker.getElement().addEventListener('mouseenter', () => destinationMarker.togglePopup());
+        destinationMarker.getElement().addEventListener('mouseleave', () => destinationMarker.togglePopup());
+        const id = `${routeDetails.routeType}-${routeDetails.index}`;
+        this.markerOriginList.set(id, originMarker);
+        this.markerDestinationList.set(id, destinationMarker);
+        // True 3D Elevated Arc Simulation Engine using Native SVG Overlays
+        try {
+            this.initSvgOverlay();
+            const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            pathEl.setAttribute('fill', 'none');
+            pathEl.setAttribute('stroke-width', '3');
+            pathEl.style.cursor = 'pointer';
+            pathEl.style.pointerEvents = 'stroke'; // Allow interactivity!
+            const gradId = `arc-grad-${id}`;
+            const defs = this.svgOverlay.querySelector('defs');
+            let grad = defs.querySelector(`#${gradId}`);
+            if (!grad) {
+                grad = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
+                grad.setAttribute('id', gradId);
+                defs.appendChild(grad);
+            }
+            grad.innerHTML = `
+        <stop offset="0%" stop-color="${routeDetails.linecolor}" stop-opacity="1"/>
+        <stop offset="100%" stop-color="#ffffff" stop-opacity="0.8"/>
+      `;
+            pathEl.setAttribute('stroke', `url(#${gradId})`);
+            this.svgOverlay.appendChild(pathEl);
+            this.activeArcs[id] = {
+                origin: routeDetails.origin,
+                destination: routeDetails.destination,
+                color: routeDetails.linecolor,
+                pathEl
+            };
+            // Native tooltips hovering strictly matching V1 Deck.GL behaviors
+            pathEl.addEventListener('mouseenter', (e) => {
+                pathEl.setAttribute('stroke-width', '6');
+                // Find geo coordinate exactly under cursor natively
+                const rect = this.svgOverlay.getBoundingClientRect();
+                const lngLat = this.map.unproject([e.clientX - rect.left, e.clientY - rect.top]);
+                const payload = {
+                    layer: { props: { data: { route: routeDetails.route, index: routeDetails.index, routeType: routeDetails.routeType } } },
+                    coordinate: [lngLat.lng, lngLat.lat],
+                    color: routeDetails.linecolor
+                };
+                this.showRoutePopup(payload, e, routeDetails.isViewRoute);
+            });
+            pathEl.addEventListener('mouseleave', () => {
+                pathEl.setAttribute('stroke-width', '3');
+                const payload = { color: null, layer: { props: { data: { index: routeDetails.index, routeType: routeDetails.routeType } } } };
+                this.showRoutePopup(payload, null, routeDetails.isViewRoute);
+            });
+            this.updateSvgPaths(); // Force plot
+        }
+        catch (e) {
+            console.warn("Native overarching arc generation skipped:", e);
+        }
+    }
+    showRoutePopup(arcDetails, event, isViewRoute) {
+        const data = arcDetails.layer.props.data;
+        const layerId = isViewRoute
+            ? `line${data.index}`
+            : `route-layer-${data.routeType || 'jobcode'}-${data.index}`;
+        if (this.popup) {
+            this.popup.remove();
+            if (this.map.getLayer(layerId)) {
+                this.map.setPaintProperty(layerId, 'line-width', 2);
+            }
+        }
+        if (arcDetails.color && this.map.getLayer(layerId) && this.map.getLayoutProperty(layerId, 'visibility') !== 'none') {
+            this.map.setPaintProperty(layerId, 'line-width', 5);
+            // Removed line-opacity overwrite here because bezier lines inherit opacity and break if set raw on a gradient.
+            const datasetForPopup = {
+                coordinate: arcDetails.coordinate,
+                pickup: arcDetails.layer.props.data.route.pickup_location || '',
+                drop: arcDetails.layer.props.data.route.delivery_location || '',
+                jobCode: arcDetails.layer.props.data.route.project ? arcDetails.layer.props.data.route.order_number : '',
+                customer: arcDetails.layer.props.data.route.project ? arcDetails.layer.props.data.route.customer_name : '',
+                routeType: arcDetails.layer.props.data.route.project ? 'Project' : 'Route',
+                title: arcDetails.layer.props.data.route.project ? arcDetails.layer.props.data.route.project : arcDetails.layer.props.data.route.route_name || '',
+                material: arcDetails.layer.props.data.route.material || '',
+                type: arcDetails.layer.props.data.route.unit || '',
+            };
+            this.createPopup(datasetForPopup);
+        }
+    }
+    createPopup(datasetForPopup) {
+        if (!this.map)
+            return;
+        this.popup = new mapboxgl.Popup({
+            closeButton: false,
+            closeOnClick: false,
+            closeOnMove: true,
+            anchor: 'bottom-left',
+        });
+        // Extract location short names
+        const pickupDisplay = datasetForPopup.pickup?.split('|')[1] || datasetForPopup.pickup || 'Unknown Pickup';
+        const dropDisplay = datasetForPopup.drop?.split('|')[1] || datasetForPopup.drop || 'Unknown Delivery';
+        this.popup
+            .setLngLat(datasetForPopup.coordinate)
+            .setHTML(`<div class="destination p-3 bg-white dark:bg-slate-800 rounded shadow-lg text-sm text-gray-800 dark:text-gray-200">
+          <div class="duration space-y-1 mb-2">
+            <p class="pickprt"><b class="text-gray-900 dark:text-white">Pickup Location:</b> ${pickupDisplay}</p>
+            <p class="dropprt"><b class="text-gray-900 dark:text-white">Drop Location:</b> ${dropDisplay}</p>
+          </div>
+          ${datasetForPopup.jobCode ? `<span class="block"><b>Job Code:</b> ${datasetForPopup.jobCode}</span>` : ''}
+          ${datasetForPopup.customer ? `<span class="block"><b>Customer:</b> ${datasetForPopup.customer}</span>` : ''}
+          <span class="block"><b>${datasetForPopup.routeType} Name:</b> ${datasetForPopup.title}</span>
+          ${datasetForPopup.material ? `<span class="block"><b>Material:</b> ${datasetForPopup.material}</span>` : ''}
+          <span class="block"><b>Type:</b> ${datasetForPopup.type}</span>
+      </div>`)
+            .addTo(this.map);
+    }
+    // Draw Line
+    drawLine(cordinates, index, route, enablefitbound, routeType, isStyleRefresh) {
+        return new Promise((resolve) => {
+            if (!this.map || !this.isMapReady()) {
+                resolve();
+                return;
+            }
+            // Calculate bounds for this specific route
+            const routeBounds = new mapboxgl.LngLatBounds();
+            if (cordinates && cordinates.length > 0) {
+                cordinates.forEach((coord) => routeBounds.extend(coord));
+            }
+            const registryId = `${routeType}-${index}`;
+            // Register the route with its coordinates and pre-calculated bounds
+            this.activeRoutesRegistry.set(registryId, {
+                cordinates,
+                route,
+                routeType,
+                bounds: routeBounds,
+                index
+            });
+            let origin = cordinates[0];
+            let destination = cordinates[cordinates.length - 1];
+            if (origin[0] && origin[1] && destination && destination[0] && destination[1]) {
+                // Execute plotting logic IMMEDIATELY to trigger the map's render cycle
+                const linecolor = this.provideLineColor(route['unit'], routeType);
+                if (enablefitbound) {
+                    const padTop = Math.max(0, (this.padding?.top || 0) + this.customTopForCustomer + 50);
+                    const padBot = Math.max(0, (this.padding?.bottom || 0) + (this.windowActualHeightWidth.availHeight - (window.innerHeight - 65)) + 50);
+                    const padLeft = Math.max(0, (this.padding?.left || 0) + 350);
+                    const padRight = Math.max(0, (this.padding?.right || 0) + 50);
+                    const customPadding = { top: padTop, bottom: padBot, left: padLeft, right: padRight };
+                    this.map.fitBounds([origin, destination], { padding: customPadding, pitch: 65 }, { fitboundCompleteJob: true });
+                }
+                const sourceId = `route-source-${routeType}-${index}`;
+                const layerId = `route-layer-${routeType}-${index}`;
+                if (this.map.getSource(sourceId)) {
+                    this.removeRouteAndMarker(index, routeType).then(() => { });
+                }
+                this.map.addSource(sourceId, {
+                    type: 'geojson',
+                    data: {
+                        type: 'Feature',
+                        properties: {},
+                        geometry: { type: 'LineString', coordinates: cordinates },
+                    },
+                });
+                this.map.addLayer({
+                    id: layerId,
+                    type: 'line',
+                    source: sourceId,
+                    paint: { 'line-color': linecolor, 'line-width': 2 },
+                    layout: { 'line-cap': 'round', 'line-join': 'round' },
+                });
+                if (!isStyleRefresh) {
+                    const dataSetForMap = { origin, destination, index, linecolor, route, routeType };
+                    this.createMarker(dataSetForMap);
+                }
+                this.map.on('mouseenter', layerId, (e) => {
+                    if (this.popup)
+                        this.popup.remove();
+                    this.map.setPaintProperty(layerId, 'line-width', 5);
+                    this.map.setPaintProperty(layerId, 'line-opacity', 1);
+                    const datasetForPopup = {
+                        coordinate: [e.lngLat.lng, e.lngLat.lat],
+                        pickup: route.pickup_location || '',
+                        drop: route.delivery_location || '',
+                        jobCode: route.project ? route.order_number : null,
+                        customer: route.project ? route.customer_name : null,
+                        routeType: route.project ? 'Project' : 'Route',
+                        title: route.project ? route.project : route.route_name || '',
+                        material: route.material || '',
+                        type: route.unit || '',
+                    };
+                    this.createPopup(datasetForPopup);
+                });
+                this.map.on('mouseleave', layerId, () => {
+                    this.map.setPaintProperty(layerId, 'line-width', 2);
+                    if (this.popup)
+                        this.popup.remove();
+                });
+                // SAFETY: Use a timeout to ensure resolve() is always called even if 'idle' event skips
+                let resolved = false;
+                const complete = () => {
+                    if (!resolved) {
+                        resolved = true;
+                        resolve();
+                    }
+                };
+                this.map.once('idle', complete);
+                setTimeout(complete, 500); // 500ms safety timeout
+            }
+            else {
+                resolve();
+            }
+        });
+    }
+    provideLineColor(unitType, type) {
+        let checkType = type && !['jobrouteList', 'addroute'].includes(type) ? true : false;
+        let color;
+        switch (unitType) {
+            case 'Ton':
+                color = checkType ? '#39c471' : '#ff7272';
+                break;
+            case 'Load':
+                color = checkType ? '#326ad3' : '#a3c52e';
+                break;
+            case 'Hourly':
+                color = checkType ? '#ffad56' : '#ae23d1';
+                break;
+            default:
+                color = '#3b82f6';
+                break;
+        }
+        return color;
+    }
+    hexToRGB(hex) {
+        return hex
+            .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b)
+            .substring(1)
+            .match(/.{2}/g)
+            .map((x) => parseInt(x, 16));
+    }
+    // --- SVG 3D Engine Methods ---
+    initSvgOverlay() {
+        if (this.svgOverlay || !this.mapContainer)
+            return;
+        this.svgOverlay = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        this.svgOverlay.style.position = 'absolute';
+        this.svgOverlay.style.top = '0';
+        this.svgOverlay.style.left = '0';
+        this.svgOverlay.style.width = '100%';
+        this.svgOverlay.style.height = '100%';
+        this.svgOverlay.style.pointerEvents = 'none';
+        this.svgOverlay.style.zIndex = '10';
+        const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+        this.svgOverlay.appendChild(defs);
+        this.mapContainer.appendChild(this.svgOverlay);
+        this.map.on('render', () => this.updateSvgPaths());
+    }
+    updateSvgPaths() {
+        if (!this.svgOverlay || !this.map)
+            return;
+        for (const key in this.activeArcs) {
+            const arc = this.activeArcs[key];
+            const p1 = this.map.project(arc.origin);
+            const p2 = this.map.project(arc.destination);
+            // Safety Guard: Check for Infinity and extreme numbers (Number.MAX_VALUE) 
+            // which Mapbox can return during transitions. 
+            // 1e15 is a safe threshold for JS math and SVG rendering engines.
+            const isUsable = (p) => Number.isFinite(p.x) && Math.abs(p.x) < 1e15 &&
+                Number.isFinite(p.y) && Math.abs(p.y) < 1e15;
+            if (!isUsable(p1) || !isUsable(p2))
+                continue;
+            const dx = p2.x - p1.x;
+            const dy = p2.y - p1.y;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            // Secondary check for distance finiteness
+            if (!Number.isFinite(dist) || dist > 1e15)
+                continue;
+            const mx = (p1.x + p2.x) / 2;
+            let controlY = ((p1.y + p2.y) / 2) - (dist * 1.05);
+            // Final sanity check for calculated curve peaks
+            controlY = Math.max(100, controlY);
+            if (!Number.isFinite(controlY) || !Number.isFinite(mx))
+                continue;
+            // Update with rounded values to ensure clean and valid attribute data
+            arc.pathEl.setAttribute('d', `M ${p1.x.toFixed(2)} ${p1.y.toFixed(2)} Q ${mx.toFixed(2)} ${controlY.toFixed(2)} ${p2.x.toFixed(2)} ${p2.y.toFixed(2)}`);
+            // Sync the gradient positioning physically mapped to coordinate space
+            const grad = this.svgOverlay.querySelector(`#arc-grad-${key}`);
+            if (grad) {
+                const minX = Math.min(p1.x, p2.x);
+                const maxX = Math.max(p1.x, p2.x);
+                const minY = Math.min(p1.y, p2.y, controlY);
+                const maxY = Math.max(p1.y, p2.y, controlY);
+                const w = Math.max(1, maxX - minX);
+                const h = Math.max(1, maxY - minY);
+                grad.setAttribute('x1', `${((p1.x - minX) / w) * 100}%`);
+                grad.setAttribute('y1', `${((p1.y - minY) / h) * 100}%`);
+                grad.setAttribute('x2', `${((p2.x - minX) / w) * 100}%`);
+                grad.setAttribute('y2', `${((p2.y - minY) / h) * 100}%`);
+            }
+        }
+    }
+    async removeRouteAndMarker(index, routeType = 'jobcode') {
+        const registryId = `${routeType}-${index}`;
+        // Clean up registry
+        if (this.activeRoutesRegistry.has(registryId)) {
+            this.activeRoutesRegistry.delete(registryId);
+        }
+        if (!this.map)
+            return true;
+        try {
+            if (this.activeArcs[registryId]) {
+                const arc = this.activeArcs[registryId];
+                if (arc.pathEl.parentNode)
+                    arc.pathEl.parentNode.removeChild(arc.pathEl);
+                delete this.activeArcs[registryId];
+            }
+            if (this.svgOverlay) {
+                const grad = this.svgOverlay.querySelector(`defs #arc-grad-${registryId}`);
+                if (grad && grad.parentNode)
+                    grad.parentNode.removeChild(grad);
+            }
+            const layerId = `route-layer-${routeType}-${index}`;
+            const sourceId = `route-source-${routeType}-${index}`;
+            this.map.getLayer(layerId) ? this.map.removeLayer(layerId) : null;
+            this.map.getLayer(`line${index}`) ? this.map.removeLayer(`line${index}`) : null;
+            this.map.getSource(sourceId) ? this.map.removeSource(sourceId) : null;
+            this.map.getSource(`line${index}`) ? this.map.removeSource(`line${index}`) : null;
+            this.markerOriginList.get(registryId)?.remove();
+            this.markerOriginList.delete(registryId);
+            this.markerDestinationList.get(registryId)?.remove();
+            this.markerDestinationList.delete(registryId);
+            this.markerOriginList.get(String(index))?.remove();
+            this.markerDestinationList.get(String(index))?.remove();
+            if (this.popup)
+                this.popup.remove();
+            return true;
+        }
+        catch (e) {
+            console.warn('Error removing route/marker:', e);
+            return false;
+        }
+    }
+    reAddLayers() {
+        this.activeRoutesRegistry.forEach((data, regId) => {
+            // Use the stored raw index instead of the composite registry key
+            this.drawLine(data.cordinates, data.index, data.route, false, data.routeType, true);
+        });
+    }
+    findMarkerBound(index) {
+        const id = String(index);
+        const originMarker = this.markerOriginList.get(id);
+        const originLng = originMarker?.getLngLat()?.lng;
+        const originLat = originMarker?.getLngLat()?.lat;
+        if (originLng !== undefined && originLat !== undefined) {
+            const indexOfCordinates = this.originDestinationCordinates.findIndex((x) => x[0][0].toFixed(6) === originLng.toFixed(6) &&
+                x[0][1].toFixed(6) === originLat.toFixed(6));
+            if (indexOfCordinates >= 0) {
+                this.originDestinationCordinates.splice(indexOfCordinates, 1);
+            }
+        }
+    }
+    async filterRoute(ID, visibility, showAllFitbound) {
+        if (ID && this.map) {
+            if (this.map.getLayer(`route-for-job-code${ID}`)) {
+                this.map.setLayoutProperty(`route-for-job-code${ID}`, 'visibility', visibility);
+                const id = String(ID);
+                const originM = this.markerOriginList.get(id);
+                if (originM) {
+                    originM.getElement().style.display = visibility === 'visible' ? 'block' : 'none';
+                }
+                const destinationM = this.markerDestinationList.get(id);
+                if (destinationM) {
+                    destinationM.getElement().style.display = visibility === 'visible' ? 'block' : 'none';
+                }
+                if (this.activeArcs[ID]) {
+                    this.activeArcs[ID].pathEl.style.display = visibility === 'visible' ? 'block' : 'none';
+                }
+                if (visibility === 'none' && showAllFitbound) {
+                    this.findMarkerBound(ID);
+                    this.extendReBound();
+                }
+            }
+            if (this.map.getLayer(`arc-layer${ID}`)) {
+                this.map.setLayoutProperty(`arc-layer${ID}`, 'visibility', visibility);
+            }
+        }
+        return true;
+    }
+    extendBound(route, showAllFitbound) {
+        return new Promise((resolve) => {
+            if (route && this.map) {
+                if (typeof route === 'string') {
+                    let path = route.split(';');
+                    path = path.map((ele) => this.formateLatLong(ele));
+                    path = path.filter((ele) => ele && ele.length > 1);
+                    route = path;
+                }
+                if (route[0] && route[0][0] && route[0][1] && route[route.length - 1] && route[route.length - 1][0] && route[route.length - 1][1]) {
+                    this.originDestinationCordinates.push(route);
+                    this.bounds = new mapboxgl.LngLatBounds();
+                    this.originDestinationCordinates.forEach((routeItem) => {
+                        routeItem.forEach((coord) => {
+                            this.bounds.extend(coord);
+                        });
+                    });
+                }
+            }
+            if (showAllFitbound && this.map) {
+                setTimeout(() => {
+                    if (showAllFitbound && !this.bounds.isEmpty()) {
+                        this.map.fitBounds(this.bounds, { pitch: 65, maxZoom: 14, padding: 90 }, { fitboundComplete: true });
+                    }
+                }, 100);
+                this.map.once('moveend', (event) => {
+                    if (event.fitboundComplete) {
+                        resolve(true);
+                    }
+                });
+            }
+            else {
+                resolve(true);
+            }
+        });
+    }
+    extendReBound(bottom) {
+        return new Promise((resolve) => {
+            this.bounds = new mapboxgl.LngLatBounds();
+            if (this.originDestinationCordinates.length > 0) {
+                this.originDestinationCordinates.forEach((item, index) => {
+                    item.forEach((route) => {
+                        this.bounds.extend(route);
+                    });
+                    if (index === this.originDestinationCordinates.length - 1) {
+                        const padTop = Math.max(0, (this.padding?.top || 0) + this.customTopForCustomer + 80);
+                        const padBot = Math.max(0, (this.padding?.bottom || 0) + (this.windowActualHeightWidth.availHeight - (window.innerHeight - 65)) + 80);
+                        const padLeft = Math.max(0, (this.padding?.left || 0) + 350);
+                        const padRight = Math.max(0, (this.padding?.right || 0) + 80);
+                        const customPadding = {
+                            top: padTop, bottom: padBot,
+                            left: padLeft, right: padRight,
+                        };
+                        setTimeout(() => {
+                            if (this.originDestinationCordinates.length > 0 && !this.bounds.isEmpty() && this.map) {
+                                this.map.fitBounds(this.bounds, { padding: customPadding, pitch: 65, maxZoom: 14 });
+                            }
+                        }, 500);
+                        resolve(true);
+                    }
+                });
+            }
+            else {
+                resolve(true);
+            }
+        });
+    }
+    async plotRoute(route, i, type, enablefitbound, showAllFitbound) {
+        const cacheKey = route['job_id'] || route['route_id'];
+        // 1. Check cache FIRST
+        if (this.pathCache.has(cacheKey)) {
+            const path = this.pathCache.get(cacheKey);
+            route['path'] = path;
+            this.extendBound(path, showAllFitbound);
+            await this.drawLine(path, i, route, enablefitbound, type);
+            route['index'] = i;
+            return true;
+        }
+        // 2. Check for inline path (Avoid API if already available)
+        if (route['path'] && (Array.isArray(route['path']) || typeof route['path'] === 'string')) {
+            let path = typeof route['path'] === 'string' ? route['path'].split(';') : route['path'];
+            if (Array.isArray(path) && path.length > 0) {
+                // Format if they are still strings
+                if (typeof path[0] === 'string') {
+                    path = path.map((ele) => this.formateLatLong(ele));
+                    path = path.filter((ele) => ele && ele.length > 1);
+                }
+                if (path.length > 0) {
+                    this.pathCache.set(cacheKey, path);
+                    route['path'] = path;
+                    this.extendBound(path, showAllFitbound);
+                    await this.drawLine(path, i, route, enablefitbound, type);
+                    route['index'] = i;
+                    return true;
+                }
+            }
+        }
+        // 3. Fallback to API call ONLY for jobcode (if path was missing)
+        return new Promise((resolve, reject) => {
+            if (['jobcode'].includes(type) || route['job_id']) {
+                let param = { job: route['job_id'] };
+                this.utils.postDataWithRestUrl('schedule/job/path', param).subscribe({
+                    next: async (res) => {
+                        let path = [];
+                        if (res['data'] && res['data']['route']) {
+                            path = res['data']['route'].split(';');
+                            path = path.map((ele) => this.formateLatLong(ele));
+                            path = path.filter((ele) => ele && ele.length > 1);
+                            this.pathCache.set(cacheKey, path);
+                        }
+                        if (path && path.length > 0) {
+                            route['path'] = path;
+                            this.extendBound(route['path'], showAllFitbound);
+                            await this.drawLine(route['path'], i, route, enablefitbound, type);
+                            route['index'] = i;
+                        }
+                        else {
+                            this.extendBound(null, showAllFitbound);
+                        }
+                        resolve(true);
+                    },
+                    error: (err) => {
+                        console.warn('Failed path retrieval', err);
+                        reject(false);
+                    }
+                });
+            }
+            else {
+                this.extendBound(null, showAllFitbound);
+                resolve(true);
+            }
+        });
+    }
+    /**
+     * Batch toggle visibility for routes on the map.
+     * If visibleIds is empty, shows everything in the registry.
+     * Otherwise, shows only those in visibleIds and hides the rest.
+     */
+    setRoutesVisibility(visibleIds, showAllOverride, prefix) {
+        const showAll = showAllOverride !== undefined ? showAllOverride : (visibleIds.length === 0);
+        this.activeRoutesRegistry.forEach((data, id) => {
+            const registryId = String(id).trim();
+            // If a prefix is provided, only operate on routes matching that prefix.
+            if (prefix && !registryId.startsWith(`${prefix}-`)) {
+                return;
+            }
+            const isVisible = showAll || visibleIds.includes(registryId);
+            const visibility = isVisible ? 'visible' : 'none';
+            const display = isVisible ? 'block' : 'none';
+            // Toggle New Layer Format
+            const newLayerId = `route-layer-${data.routeType}-${data.index || id}`;
+            if (this.map.getLayer(newLayerId)) {
+                this.map.setLayoutProperty(newLayerId, 'visibility', visibility);
+            }
+            // Legacy/Alternate Layer Formats
+            const legacyId = `route-for-job-code${id}`;
+            if (this.map.getLayer(legacyId)) {
+                this.map.setLayoutProperty(legacyId, 'visibility', visibility);
+            }
+            if (this.map.getLayer(`line${id}`)) {
+                this.map.setLayoutProperty(`line${id}`, 'visibility', visibility);
+            }
+            // Toggle Markers
+            const originM = this.markerOriginList.get(registryId);
+            if (originM)
+                originM.getElement().style.display = display;
+            const destM = this.markerDestinationList.get(registryId);
+            if (destM)
+                destM.getElement().style.display = display;
+            // Toggle Arcs
+            if (this.activeArcs[registryId]) {
+                this.activeArcs[registryId].pathEl.style.display = display;
+            }
+        });
+        // Recalculate bounds based on visible routes
+        this.recalculateVisibleBounds(visibleIds);
+    }
+    recalculateVisibleBounds(visibleIds) {
+        const showAll = visibleIds.length === 0;
+        this.bounds = new mapboxgl.LngLatBounds();
+        this.originDestinationCordinates = [];
+        const normalizedVisibleIds = visibleIds.map(vid => String(vid).trim());
+        this.activeRoutesRegistry.forEach((data, id) => {
+            const registryId = String(id).trim();
+            if (showAll || normalizedVisibleIds.includes(registryId)) {
+                if (data.bounds && !data.bounds.isEmpty()) {
+                    this.bounds.extend(data.bounds);
+                    this.originDestinationCordinates.push(data.cordinates);
+                }
+                else if (data.cordinates && data.cordinates.length > 0) {
+                    // Fallback if bounds weren't pre-calculated
+                    data.cordinates.forEach((coord) => this.bounds.extend(coord));
+                    this.originDestinationCordinates.push(data.cordinates);
+                }
+            }
+        });
+        if (!this.bounds.isEmpty() && this.map) {
+            const canvas = this.map.getCanvas();
+            const mapW = canvas.clientWidth;
+            const mapH = canvas.clientHeight;
+            let padTop = Math.max(0, (Number(this.padding?.top) || 0) + (Number(this.customTopForCustomer) || 0) + 80);
+            let padBot = Math.max(0, (Number(this.padding?.bottom) || 0) + (Math.max(0, Number(this.windowActualHeightWidth.availHeight) - (Number(window.innerHeight) - 65))) + 80);
+            let padLeft = Math.max(0, (Number(this.padding?.left) || 0) + (window.innerWidth > 1000 ? 350 : 50));
+            let padRight = Math.max(0, (Number(this.padding?.right) || 0) + 80);
+            // Safety Clamps: Ensure padding doesn't exceed canvas size
+            const maxHorizPad = mapW * 0.8;
+            const maxVertPad = mapH * 0.8;
+            if (padLeft + padRight > maxHorizPad) {
+                const factor = maxHorizPad / (padLeft + padRight);
+                padLeft *= factor;
+                padRight *= factor;
+            }
+            if (padTop + padBot > maxVertPad) {
+                const factor = maxVertPad / (padTop + padBot);
+                padTop *= factor;
+                padBot *= factor;
+            }
+            try {
+                this.map.fitBounds(this.bounds, {
+                    padding: { top: padTop, bottom: padBot, left: padLeft, right: padRight },
+                    pitch: 65,
+                    maxZoom: 12,
+                    duration: 800
+                });
+            }
+            catch (err) {
+                console.warn('fitBounds failed, trying with default padding', err);
+                this.map.fitBounds(this.bounds, { padding: 50, pitch: 65, maxZoom: 16 });
+            }
+        }
+    }
+    async clearAllRoutes() {
+        // 1. Remove all markers
+        this.markerOriginList.forEach(marker => marker.remove());
+        this.markerDestinationList.forEach(marker => marker.remove());
+        this.markerOriginList.clear();
+        this.markerDestinationList.clear();
+        // 2. Remove all arcs
+        Object.keys(this.activeArcs).forEach(index => {
+            const arc = this.activeArcs[index];
+            if (arc.pathEl.parentNode)
+                arc.pathEl.parentNode.removeChild(arc.pathEl);
+            if (this.svgOverlay) {
+                const grad = this.svgOverlay.querySelector(`defs #arc-grad-${index}`);
+                if (grad && grad.parentNode)
+                    grad.parentNode.removeChild(grad);
+            }
+        });
+        this.activeArcs = {};
+        // 3. Remove all line layers and sources using registry metadata
+        this.activeRoutesRegistry.forEach((data, regId) => {
+            const type = data.routeType || 'jobcode';
+            const idx = data.index || regId.split('-').pop();
+            const layerId = `route-layer-${type}-${idx}`;
+            const sourceId = `route-source-${type}-${idx}`;
+            this.map.getLayer(layerId) ? this.map.removeLayer(layerId) : null;
+            this.map.getSource(sourceId) ? this.map.removeSource(sourceId) : null;
+            // Legacy fallback cleanup
+            this.map.getLayer(`line${idx}`) ? this.map.removeLayer(`line${idx}`) : null;
+            this.map.getSource(`line${idx}`) ? this.map.removeSource(`line${idx}`) : null;
+            this.map.getLayer(`route-for-job-code${idx}`) ? this.map.removeLayer(`route-for-job-code${idx}`) : null;
+            this.map.getSource(`route-source-for-job-code${idx}`) ? this.map.removeSource(`route-source-for-job-code${idx}`) : null;
+        });
+        // 4. Reset registries and bounds
+        this.activeRoutesRegistry.clear();
+        this.originDestinationCordinates = [];
+        this.bounds = new mapboxgl.LngLatBounds();
+        if (this.popup)
+            this.popup.remove();
+        return true;
+    }
+    clearBound() {
+        this.bounds = new mapboxgl.LngLatBounds();
+        this.originDestinationCordinates = [];
+        this.clearPadding();
+    }
+    formateLatLong(latlong) {
+        return latlong ? latlong.split(',').map((x) => +x).reverse() : null;
+    }
+    clearBoundWithCordinates() {
+        this.bounds = new mapboxgl.LngLatBounds();
+        this.originDestinationCordinates = [];
+    }
+    onResize(event) {
+        if (!this.bounds.isEmpty() && this.map) {
+            this.windowActualHeightWidth.availHeight =
+                window.innerHeight > window.screen.availHeight ? window.innerHeight : window.screen.availHeight;
+            setTimeout(() => {
+                const hRes = event.target ? event.target.innerHeight : window.innerHeight;
+                this.map.fitBounds(this.bounds, {
+                    padding: {
+                        top: (this.padding?.top || 0) + this.customTopForCustomer,
+                        bottom: (this.padding?.bottom || 0) + (this.windowActualHeightWidth.availHeight - (hRes - 65)),
+                        left: (this.padding?.left || 0),
+                        right: (this.padding?.right || 0),
+                    },
+                    pitch: 65,
+                });
+            }, 500);
+        }
+    }
+    setWindowHeight(screen) {
+        this.windowActualHeightWidth.availHeight = screen;
+    }
+    setPadding(padding) {
+        this.padding = padding;
+    }
+    clearPadding() {
+        this.padding = null;
+    }
+    removeJobFromMap(data) {
+        data.forEach((ele, index) => {
+            const id = ele['job_id'] ? ele['job_id'] : ele['route_id'];
+            this.removeRouteAndMarker(id);
+            if (index === data.length - 1) {
+                this.extendReBound();
+            }
+        });
+    }
+    resize() {
+        if (this.map) {
+            setTimeout(() => this.map.resize(), 0);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapboxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapboxService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapboxService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class CoolmapService {
+    mapbox = inject(MapboxService);
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    plottingIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "plottingIds" }] : []));
+    plotRoute(route, i, type = 'jobcode', enablefitbound, showAllFitbound) {
+        if (!route)
+            return;
+        return this.mapbox.plotRoute(route, i, type, enablefitbound, showAllFitbound);
+    }
+    loadMapProperty(pinRouteGeojson, index, unit, routeProps) {
+        this.mapbox.loadMapProperty(pinRouteGeojson, index, unit, routeProps);
+    }
+    removeRouteAndMarker(index, type = 'jobcode') {
+        return this.mapbox.removeRouteAndMarker(index, type);
+    }
+    clearAllRoutes() {
+        return this.mapbox.clearAllRoutes();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CoolmapService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CoolmapService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CoolmapService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/*
+ * Public API Surface of coolmap-services
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COOLMAP_CONFIG, CoolmapService, CoolmapServices, MapboxService, UtilsService, provideCoolmapConfig };
+//# sourceMappingURL=coolmap-services.mjs.map