@aggdirect/coolmap-services 0.0.8 → 1.0.0

package/fesm2020/aggdirect-coolmap-services.mjs

@@ -9,419 +9,421 @@ import * as i1 from '@angular/common/http';
 import * as i2 from '@angular/material/snack-bar';
 import * as i2$1 from '@angular/platform-browser';
 
-class UtilsService {
-    constructor(http, snackBar) {
-        this.http = http;
-        this.snackBar = snackBar;
-        this.analyticsRESTURL = '';
-        this.RESTURLPrefix = '';
-        this.pickupOptions = [];
-        this.destOptions = [];
-        this.ownerOptions = [];
-        this.customerOptions = [];
-        this.unitOptions = [];
-        this.materialOptions = [];
-        this.jcodeOptions = [];
-        this.driverOption = [];
-        this.truckingCompanayOption = [];
-        this.routeNameOptions = [];
-        this.preventnavChange = new BehaviorSubject(false);
-        this.navChangeObserve = this.preventnavChange.asObservable();
-        this.clearViewRouteforJobCode = new BehaviorSubject(false);
-        this.clearViewRouteforJobCodeObserve = this.clearViewRouteforJobCode.asObservable();
-        this.preVentJobdetailclose = new BehaviorSubject(false);
-        this.getpreVentJobdetailclose = this.preVentJobdetailclose.asObservable();
-        this.routeDetailsUtility = new BehaviorSubject({});
-        this.getrouteDetailsUtility = this.routeDetailsUtility.asObservable();
-        this.removeMapEntity = new BehaviorSubject({});
-        this.removeMapEntityUtility = this.removeMapEntity.asObservable();
-        this.dict = new Map();
-        this.analyticsRESTURL = 'https://test-analytics.aggdirect.com/REST/';
-        this.RESTURLPrefix = 'https://test-server.aggdirect.com/REST/';
-    }
-    getDateFormat(strVal, seprater) {
-        seprater = seprater ? seprater : '-';
-        const mydate = strVal;
-        return mydate?.getFullYear() + seprater + ((mydate ? mydate.getMonth() : 0) + 1) + seprater + mydate?.getDate();
-    }
-    getData(path) { return this.http.get(`${this.analyticsRESTURL}${path}`); }
-    postdata(path, data) { return this.http.post(`${this.analyticsRESTURL}${path}`, data); }
-    postDataWithRestUrl(path, data) { return this.http.post(`${this.RESTURLPrefix}${path}`, data); }
-    fetchAutoCompleteLocations(keyword) {
-        return this.http.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${keyword}.json?access_token=pk.eyJ1Ijoic2FudGFudS1vZ21hIiwiYSI6ImNsOGQ0cDVrNjAweTMzb3RmdG9ieTU5ZDkifQ.I6ZS7mViZYSvBo4zz-mGQQ&country=US`);
-    }
-    openSnackBar(message, className) {
-        this.snackBar.open(message, '', {
-            duration: 5000, verticalPosition: 'top', horizontalPosition: 'center', panelClass: [className ? className : 'default']
-        });
-    }
-    makeOptions(item) {
-        if (item.order_number) {
-            (this.jcodeOptions.findIndex((elem) => elem.job_id === item.job_id) === -1) ? this.jcodeOptions.push({ job_code: item.order_number, job_id: item.job_id }) : null;
-            if (item.driver_list && item.driver_list?.length > 0) {
-                item.driver_list.forEach((driver) => {
-                    this.driverOption.findIndex(elem => elem === driver['driver_name']) === -1 ? this.driverOption.push(driver['driver_name']) : null;
-                    this.truckingCompanayOption.findIndex(elem => elem === driver['trucking_company']) === -1 ? this.truckingCompanayOption.push(driver['trucking_company']) : null;
-                });
-            }
-        }
-        ((this.pickupOptions.findIndex((elem) => elem === item.pickup_location)) === -1) ? this.pickupOptions.push(item.pickup_location) : null;
-        ((this.destOptions.findIndex((elem) => elem === item.delivery_location)) === -1) ? this.destOptions.push(item.delivery_location) : null;
-        (this.customerOptions.findIndex((customer) => customer === item.customer_name) === -1) ? this.customerOptions.push(item.customer_name) : null;
-        (this.unitOptions.findIndex((elem) => elem === item.unit) === -1) ? this.unitOptions.push(item.unit) : null;
-        (this.materialOptions.findIndex((elem) => elem === item.material) === -1) ? this.materialOptions.push(item.material) : null;
-        if (item.route_name)
-            this.routeNameOptions.findIndex(elem => elem === item.route_name) === -1 ? this.routeNameOptions.push(item.route_name) : null;
-    }
-    filter(value, filters) {
-        if (typeof value !== 'string') {
-            return [];
-        }
-        const filterValue = value.toLowerCase();
-        if (filterValue === '') {
-            return [];
-        }
-        const searchResults = [];
-        this.unitOptions.map(unit => {
-            if (unit.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "unit", "label": unit, "value": unit });
-            }
-        });
-        this.customerOptions.map(unit => {
-            if (unit.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "customer", "label": unit, "value": unit });
-            }
-        });
-        this.materialOptions.map(unit => {
-            if (unit.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "material", "label": unit, "value": unit });
-            }
-        });
-        this.pickupOptions.map(unit => {
-            if (unit.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "pickup location", "label": unit, "value": unit });
-            }
-        });
-        this.destOptions.map(unit => {
-            if (unit.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "destination location", "label": unit, "value": unit });
-            }
-        });
-        this.jcodeOptions.map(unit => {
-            if (unit.job_code.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "job", "label": unit['job_code'], "value": unit });
-            }
-        });
-        this.driverOption.map(unit => {
-            if (unit.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "Driver", "label": unit, "value": unit });
-            }
-        });
-        this.truckingCompanayOption.map(unit => {
-            if (unit.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "Trucking Company", "label": unit, "value": unit });
-            }
-        });
-        this.routeNameOptions.map(unit => {
-            if (unit.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "Route name", "label": unit, "value": unit });
-            }
-        });
-        const searchDict = {};
-        filters.map((filter) => {
-            searchDict[filter['name'] + filter['type']] = filter;
-        });
-        const furtherFilter = [];
-        searchResults.map(search => {
-            if ((search['label'] + search['type']) in searchDict) { }
-            else {
-                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[filterval[0]['type']]);
-                }
-                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[filterval[0]['type']]);
-                }
-                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 index = element.driver_list?.findIndex(ele => { return filterval[0]['name'] === ele['driver_name']; });
-                    if (index !== -1)
-                        result_list_boolean.push(true);
-                }
-                if (filterval[0]['type'] === 'Trucking Company') {
-                    const index = element.driver_list?.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;
-        });
-    }
-    clearOptions() {
-        this.pickupOptions = [];
-        this.destOptions = [];
-        this.ownerOptions = [];
-        this.customerOptions = [];
-        this.unitOptions = [];
-        this.materialOptions = [];
-        this.jcodeOptions = [];
-        this.routeNameOptions = [];
-    }
-    setdictValue(key, value) {
-        this.dict.set(key, value);
-    }
-    getdictValue(key) {
-        return JSON.parse(this.dict.get(key));
-    }
-    removedictValue(key) {
-        this.dict.delete(key);
-    }
-    conveySearchIcon(value) {
-        if (value && typeof (value) !== 'object')
-            return true;
-        return false;
-    }
-}
-UtilsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UtilsService, deps: [{ token: i1.HttpClient }, { token: i2.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable });
-UtilsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UtilsService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UtilsService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+class UtilsService {
+    constructor(http, snackBar) {
+        this.http = http;
+        this.snackBar = snackBar;
+        this.analyticsRESTURL = '';
+        this.RESTURLPrefix = '';
+        this.pickupOptions = [];
+        this.destOptions = [];
+        this.ownerOptions = [];
+        this.customerOptions = [];
+        this.unitOptions = [];
+        this.materialOptions = [];
+        this.jcodeOptions = [];
+        this.driverOption = [];
+        this.truckingCompanayOption = [];
+        this.routeNameOptions = [];
+        this.preventnavChange = new BehaviorSubject(false);
+        this.navChangeObserve = this.preventnavChange.asObservable();
+        this.clearViewRouteforJobCode = new BehaviorSubject(false);
+        this.clearViewRouteforJobCodeObserve = this.clearViewRouteforJobCode.asObservable();
+        this.preVentJobdetailclose = new BehaviorSubject(false);
+        this.getpreVentJobdetailclose = this.preVentJobdetailclose.asObservable();
+        this.routeDetailsUtility = new BehaviorSubject({});
+        this.getrouteDetailsUtility = this.routeDetailsUtility.asObservable();
+        this.removeMapEntity = new BehaviorSubject({});
+        this.removeMapEntityUtility = this.removeMapEntity.asObservable();
+        this.dict = new Map();
+        this.analyticsRESTURL = 'https://test-analytics.aggdirect.com/REST/';
+        this.RESTURLPrefix = 'https://test-server.aggdirect.com/REST/';
+    }
+    getDateFormat(strVal, seprater) {
+        seprater = seprater ? seprater : '-';
+        const mydate = strVal;
+        return mydate?.getFullYear() + seprater + ((mydate ? mydate.getMonth() : 0) + 1) + seprater + mydate?.getDate();
+    }
+    getData(path) { return this.http.get(`${this.analyticsRESTURL}${path}`); }
+    postdata(path, data) { return this.http.post(`${this.analyticsRESTURL}${path}`, data); }
+    postDataWithRestUrl(path, data) { return this.http.post(`${this.RESTURLPrefix}${path}`, data); }
+    fetchAutoCompleteLocations(keyword) {
+        return this.http.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${keyword}.json?access_token=pk.eyJ1Ijoic2FudGFudS1vZ21hIiwiYSI6ImNsOGQ0cDVrNjAweTMzb3RmdG9ieTU5ZDkifQ.I6ZS7mViZYSvBo4zz-mGQQ&country=US`);
+    }
+    openSnackBar(message, className) {
+        this.snackBar.open(message, '', {
+            duration: 5000, verticalPosition: 'top', horizontalPosition: 'center', panelClass: [className ? className : 'default']
+        });
+    }
+    makeOptions(item) {
+        if (item.order_number) {
+            (this.jcodeOptions.findIndex((elem) => elem.job_id === item.job_id) === -1) ? this.jcodeOptions.push({ job_code: item.order_number, job_id: item.job_id }) : null;
+            if (item.driver_list && item.driver_list?.length > 0) {
+                item.driver_list.forEach((driver) => {
+                    this.driverOption.findIndex(elem => elem === driver['driver_name']) === -1 ? this.driverOption.push(driver['driver_name']) : null;
+                    this.truckingCompanayOption.findIndex(elem => elem === driver['trucking_company']) === -1 ? this.truckingCompanayOption.push(driver['trucking_company']) : null;
+                });
+            }
+        }
+        ((this.pickupOptions.findIndex((elem) => elem === item.pickup_location)) === -1) ? this.pickupOptions.push(item.pickup_location) : null;
+        ((this.destOptions.findIndex((elem) => elem === item.delivery_location)) === -1) ? this.destOptions.push(item.delivery_location) : null;
+        (this.customerOptions.findIndex((customer) => customer === item.customer_name) === -1) ? this.customerOptions.push(item.customer_name) : null;
+        (this.unitOptions.findIndex((elem) => elem === item.unit) === -1) ? this.unitOptions.push(item.unit) : null;
+        (this.materialOptions.findIndex((elem) => elem === item.material) === -1) ? this.materialOptions.push(item.material) : null;
+        if (item.route_name)
+            this.routeNameOptions.findIndex(elem => elem === item.route_name) === -1 ? this.routeNameOptions.push(item.route_name) : null;
+    }
+    filter(value, filters) {
+        if (typeof value !== 'string') {
+            return [];
+        }
+        const filterValue = value.toLowerCase();
+        if (filterValue === '') {
+            return [];
+        }
+        const searchResults = [];
+        this.unitOptions.map(unit => {
+            if (unit.toLowerCase().includes(filterValue)) {
+                searchResults.push({ "type": "unit", "label": unit, "value": unit });
+            }
+        });
+        this.customerOptions.map(unit => {
+            if (unit.toLowerCase().includes(filterValue)) {
+                searchResults.push({ "type": "customer", "label": unit, "value": unit });
+            }
+        });
+        this.materialOptions.map(unit => {
+            if (unit.toLowerCase().includes(filterValue)) {
+                searchResults.push({ "type": "material", "label": unit, "value": unit });
+            }
+        });
+        this.pickupOptions.map(unit => {
+            if (unit.toLowerCase().includes(filterValue)) {
+                searchResults.push({ "type": "pickup location", "label": unit, "value": unit });
+            }
+        });
+        this.destOptions.map(unit => {
+            if (unit.toLowerCase().includes(filterValue)) {
+                searchResults.push({ "type": "destination location", "label": unit, "value": unit });
+            }
+        });
+        this.jcodeOptions.map(unit => {
+            if (unit.job_code.toLowerCase().includes(filterValue)) {
+                searchResults.push({ "type": "job", "label": unit['job_code'], "value": unit });
+            }
+        });
+        this.driverOption.map(unit => {
+            if (unit.toLowerCase().includes(filterValue)) {
+                searchResults.push({ "type": "Driver", "label": unit, "value": unit });
+            }
+        });
+        this.truckingCompanayOption.map(unit => {
+            if (unit.toLowerCase().includes(filterValue)) {
+                searchResults.push({ "type": "Trucking Company", "label": unit, "value": unit });
+            }
+        });
+        this.routeNameOptions.map(unit => {
+            if (unit.toLowerCase().includes(filterValue)) {
+                searchResults.push({ "type": "Route name", "label": unit, "value": unit });
+            }
+        });
+        const searchDict = {};
+        filters.map((filter) => {
+            searchDict[filter['name'] + filter['type']] = filter;
+        });
+        const furtherFilter = [];
+        searchResults.map(search => {
+            if ((search['label'] + search['type']) in searchDict) { }
+            else {
+                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[filterval[0]['type']]);
+                }
+                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[filterval[0]['type']]);
+                }
+                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 index = element.driver_list?.findIndex(ele => { return filterval[0]['name'] === ele['driver_name']; });
+                    if (index !== -1)
+                        result_list_boolean.push(true);
+                }
+                if (filterval[0]['type'] === 'Trucking Company') {
+                    const index = element.driver_list?.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;
+        });
+    }
+    clearOptions() {
+        this.pickupOptions = [];
+        this.destOptions = [];
+        this.ownerOptions = [];
+        this.customerOptions = [];
+        this.unitOptions = [];
+        this.materialOptions = [];
+        this.jcodeOptions = [];
+        this.routeNameOptions = [];
+    }
+    setdictValue(key, value) {
+        this.dict.set(key, value);
+    }
+    getdictValue(key) {
+        return JSON.parse(this.dict.get(key));
+    }
+    removedictValue(key) {
+        this.dict.delete(key);
+    }
+    conveySearchIcon(value) {
+        if (value && typeof (value) !== 'object')
+            return true;
+        return false;
+    }
+}
+UtilsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UtilsService, deps: [{ token: i1.HttpClient }, { token: i2.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable });
+UtilsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UtilsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UtilsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2.MatSnackBar }]; } });
 
-class CoolmapService {
-    constructor(utils, eventManager) {
-        this.utils = utils;
-        this.eventManager = eventManager;
-        this.markerOriginList = [];
-        this.markerDestinationList = [];
-        this.initiatecoolmap = new BehaviorSubject(true);
-        this.reintiatecoolmap = this.initiatecoolmap.asObservable();
-        this.bounds = new mapboxgl.LngLatBounds();
-        this.originDestinationCordinates = [];
-        this.eventManager.addGlobalEventListener('window', 'resize', this.onResize.bind(this));
-        this.windowActualHeightWidth = { availHeight: 0 };
-    }
-    initiateMapForAddRoute(el) {
-        return new Promise((resolve, reject) => {
-            this.map = new mapboxgl.Map({
-                accessToken: 'pk.eyJ1Ijoic2FudGFudS1vZ21hIiwiYSI6ImNsOGQ0cDVrNjAweTMzb3RmdG9ieTU5ZDkifQ.I6ZS7mViZYSvBo4zz-mGQQ',
-                container: el,
-                style: 'mapbox://styles/santanu-ogma/cl8ep33uz003414n1twlosz9d',
-                center: [-77.036873, 38.907192],
-                zoom: 10, bearing: 0, pitch: 65, interactive: true,
-            });
-            this.map.once('load', (res) => {
-                resolve(res);
-            });
-        });
-    }
-    //  Below method Load route with animation
-    loadMapProperty(pinRouteGeojson, index, unit, route, bottom) {
-        return new Promise((resolve, reject) => {
-            let origin = pinRouteGeojson.features[0].geometry.coordinates[0];
-            const linecolor = (unit === 'Ton') ? '#ff7272' : (unit === 'Load') ? '#a3c52e' : '#ae23d1';
-            let destination = pinRouteGeojson.features[0].geometry.coordinates[pinRouteGeojson.features[0].geometry.coordinates.length - 1];
-            this.extendBound(pinRouteGeojson.features[0].geometry.coordinates, true).then((res) => {
-                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;
-                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, 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: route.pickup_location ? route.pickup_location : '',
-                        drop: route.delivery_location ? route.delivery_location : '',
-                        routeType: route.project ? 'Project' : 'Route',
-                        title: route.project ? route.project : route.route_name ? route.route_name : '',
-                        material: route.material ? route.material : '',
-                        type: route.unit ? route.unit : ''
-                    };
-                    this.createPopup(datasetForPopup);
-                });
-                this.map.on('mouseleave', `line${index}`, (e) => {
-                    this.map.setPaintProperty(`line${index}`, 'line-width', 2);
-                    if (this.popup) {
-                        this.popup.remove();
-                    }
-                });
-            });
-            this.map.once('idle', (res) => {
-                resolve(true);
-            });
-        });
-    }
-    //  Below method Load route without animation
-    drawLine(cordinates, index, route, enablefitbound, routeType) {
-        let linecolor;
-        let origin = cordinates[0];
-        let destination = cordinates[cordinates.length - 1];
-        if (origin[0] && origin[1] && destination && destination[0] && destination[1]) {
-            linecolor = this.provideLineColor(route['unit'], routeType);
-            if (enablefitbound) {
-                const padding = {
-                    top: this.padding.top, bottom: this.padding.bottom + (this.windowActualHeightWidth.availHeight - (window.innerHeight - 65)),
-                    left: this.padding.left, right: this.padding.right
-                };
-                this.map.fitBounds([origin, destination], { padding }, { fitboundCompleteJob: true });
-            }
-            if (this.map.getSource(`route-source-for-job-code${index}`)) {
-                this.removeRouteAndMarker(index).then(() => { });
-            }
-            this.map.addSource(`route-source-for-job-code${index}`, {
-                'type': 'geojson',
-                'data': { 'type': 'Feature', 'properties': {}, 'geometry': { 'type': 'LineString', 'coordinates': cordinates } }
-            });
-            this.map.addLayer({
-                'id': `route-for-job-code${index}`, 'type': 'line', 'source': `route-source-for-job-code${index}`,
-                paint: { 'line-color': linecolor, 'line-width': 2 },
-                layout: { 'line-cap': 'round', 'line-join': 'round' }
-            });
-            const dataSetForMap = {
-                origin, destination, index, linecolor, route
-            };
-            this.createMarker(dataSetForMap);
-            this.map.on('mouseenter', `route-for-job-code${index}`, (e) => {
-                if (this.popup) {
-                    this.popup.remove();
-                }
-                this.map.setPaintProperty(`route-for-job-code${index}`, 'line-width', 5);
-                this.map.setPaintProperty(`route-for-job-code${index}`, 'line-opacity', 1);
-                const datasetForPopup = {
-                    coordinate: [e.lngLat.lng, e.lngLat.lat],
-                    pickup: route.pickup_location ? route.pickup_location : '',
-                    drop: route.delivery_location ? 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 ? route.route_name : '',
-                    material: route.material ? route.material : '',
-                    type: route.unit ? route.unit : ''
-                };
-                this.createPopup(datasetForPopup);
-            });
-            this.map.on('mouseleave', `route-for-job-code${index}`, (e) => {
-                this.map.setPaintProperty(`route-for-job-code${index}`, 'line-width', 2);
-                if (this.popup) {
-                    this.popup.remove();
-                }
-            });
-        }
-    }
-    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;
-        }
-        return color;
-    }
-    showRoutePopup(arcDetails, event, isViewRoute) {
-        if (this.popup) {
-            this.popup.remove();
-            this.map.setPaintProperty(`${isViewRoute ? 'line' : 'route-for-job-code'}${arcDetails.layer.props.data.index}`, 'line-width', 2);
-        }
-        if (arcDetails.color && this.map.getLayoutProperty(arcDetails.layer.id, 'visibility') !== 'none') {
-            this.map.setPaintProperty(`${isViewRoute ? 'line' : 'route-for-job-code'}${arcDetails.layer.props.data.index}`, 'line-width', 5);
-            this.map.setPaintProperty(`${isViewRoute ? 'line' : 'route-for-job-code'}${arcDetails.layer.props.data.index}`, 'line-opacity', 1);
-            const datasetForPopup = {
-                coordinate: arcDetails.coordinate,
-                pickup: arcDetails.layer.props.data.route.pickup_location ? arcDetails.layer.props.data.route.pickup_location : '',
-                drop: arcDetails.layer.props.data.route.delivery_location ? 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 ? arcDetails.layer.props.data.route.route_name : '',
-                material: arcDetails.layer.props.data.route.material ? arcDetails.layer.props.data.route.material : '',
-                type: arcDetails.layer.props.data.route.unit ? arcDetails.layer.props.data.route.unit : ''
-            };
-            this.createPopup(datasetForPopup);
-        }
-    }
-    createPopup(datasetForPopup) {
-        this.popup = new mapboxgl.Popup({
-            closeButton: false,
-            closeOnClick: false,
-            closeOnMove: true,
-            anchor: 'bottom-left'
-        });
-        this.popup.setLngLat(datasetForPopup.coordinate)
+class CoolmapService {
+    constructor(utils, eventManager) {
+        this.utils = utils;
+        this.eventManager = eventManager;
+        this.markerOriginList = [];
+        this.markerDestinationList = [];
+        this.initiatecoolmap = new BehaviorSubject(true);
+        this.reintiatecoolmap = this.initiatecoolmap.asObservable();
+        this.bounds = new mapboxgl.LngLatBounds();
+        this.originDestinationCordinates = [];
+        this.eventManager.addGlobalEventListener('window', 'resize', this.onResize.bind(this));
+        this.windowActualHeightWidth = { availHeight: 0 };
+    }
+    initiateMapForAddRoute(el) {
+        return new Promise((resolve, reject) => {
+            if (this.map)
+                this.map.remove();
+            this.map = new mapboxgl.Map({
+                accessToken: 'pk.eyJ1Ijoic2FudGFudS1vZ21hIiwiYSI6ImNsOGQ0cDVrNjAweTMzb3RmdG9ieTU5ZDkifQ.I6ZS7mViZYSvBo4zz-mGQQ',
+                container: el,
+                style: 'mapbox://styles/santanu-ogma/cl8ep33uz003414n1twlosz9d',
+                center: [-77.036873, 38.907192],
+                zoom: 10, bearing: 0, pitch: 65, interactive: true,
+            });
+            this.map.once('load', (res) => {
+                resolve(res);
+            });
+        });
+    }
+    //  Below method Load route with animation
+    loadMapProperty(pinRouteGeojson, index, unit, route, bottom) {
+        return new Promise((resolve, reject) => {
+            let origin = pinRouteGeojson.features[0].geometry.coordinates[0];
+            const linecolor = (unit === 'Ton') ? '#ff7272' : (unit === 'Load') ? '#a3c52e' : '#ae23d1';
+            let destination = pinRouteGeojson.features[0].geometry.coordinates[pinRouteGeojson.features[0].geometry.coordinates.length - 1];
+            this.extendBound(pinRouteGeojson.features[0].geometry.coordinates, true).then((res) => {
+                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;
+                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, 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: route.pickup_location ? route.pickup_location : '',
+                        drop: route.delivery_location ? route.delivery_location : '',
+                        routeType: route.project ? 'Project' : 'Route',
+                        title: route.project ? route.project : route.route_name ? route.route_name : '',
+                        material: route.material ? route.material : '',
+                        type: route.unit ? route.unit : ''
+                    };
+                    this.createPopup(datasetForPopup);
+                });
+                this.map.on('mouseleave', `line${index}`, (e) => {
+                    this.map.setPaintProperty(`line${index}`, 'line-width', 2);
+                    if (this.popup) {
+                        this.popup.remove();
+                    }
+                });
+            });
+            this.map.once('idle', (res) => {
+                resolve(true);
+            });
+        });
+    }
+    //  Below method Load route without animation
+    drawLine(cordinates, index, route, enablefitbound, routeType) {
+        let linecolor;
+        let origin = cordinates[0];
+        let destination = cordinates[cordinates.length - 1];
+        if (origin[0] && origin[1] && destination && destination[0] && destination[1]) {
+            linecolor = this.provideLineColor(route['unit'], routeType);
+            if (enablefitbound) {
+                const padding = {
+                    top: this.padding.top, bottom: this.padding.bottom + (this.windowActualHeightWidth.availHeight - (window.innerHeight - 65)),
+                    left: this.padding.left, right: this.padding.right
+                };
+                this.map.fitBounds([origin, destination], { padding }, { fitboundCompleteJob: true });
+            }
+            if (this.map.getSource(`route-source-for-job-code${index}`)) {
+                this.removeRouteAndMarker(index).then(() => { });
+            }
+            this.map.addSource(`route-source-for-job-code${index}`, {
+                'type': 'geojson',
+                'data': { 'type': 'Feature', 'properties': {}, 'geometry': { 'type': 'LineString', 'coordinates': cordinates } }
+            });
+            this.map.addLayer({
+                'id': `route-for-job-code${index}`, 'type': 'line', 'source': `route-source-for-job-code${index}`,
+                paint: { 'line-color': linecolor, 'line-width': 2 },
+                layout: { 'line-cap': 'round', 'line-join': 'round' }
+            });
+            const dataSetForMap = {
+                origin, destination, index, linecolor, route
+            };
+            this.createMarker(dataSetForMap);
+            this.map.on('mouseenter', `route-for-job-code${index}`, (e) => {
+                if (this.popup) {
+                    this.popup.remove();
+                }
+                this.map.setPaintProperty(`route-for-job-code${index}`, 'line-width', 5);
+                this.map.setPaintProperty(`route-for-job-code${index}`, 'line-opacity', 1);
+                const datasetForPopup = {
+                    coordinate: [e.lngLat.lng, e.lngLat.lat],
+                    pickup: route.pickup_location ? route.pickup_location : '',
+                    drop: route.delivery_location ? 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 ? route.route_name : '',
+                    material: route.material ? route.material : '',
+                    type: route.unit ? route.unit : ''
+                };
+                this.createPopup(datasetForPopup);
+            });
+            this.map.on('mouseleave', `route-for-job-code${index}`, (e) => {
+                this.map.setPaintProperty(`route-for-job-code${index}`, 'line-width', 2);
+                if (this.popup) {
+                    this.popup.remove();
+                }
+            });
+        }
+    }
+    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;
+        }
+        return color;
+    }
+    showRoutePopup(arcDetails, event, isViewRoute) {
+        if (this.popup) {
+            this.popup.remove();
+            this.map.setPaintProperty(`${isViewRoute ? 'line' : 'route-for-job-code'}${arcDetails.layer.props.data.index}`, 'line-width', 2);
+        }
+        if (arcDetails.color && this.map.getLayoutProperty(arcDetails.layer.id, 'visibility') !== 'none') {
+            this.map.setPaintProperty(`${isViewRoute ? 'line' : 'route-for-job-code'}${arcDetails.layer.props.data.index}`, 'line-width', 5);
+            this.map.setPaintProperty(`${isViewRoute ? 'line' : 'route-for-job-code'}${arcDetails.layer.props.data.index}`, 'line-opacity', 1);
+            const datasetForPopup = {
+                coordinate: arcDetails.coordinate,
+                pickup: arcDetails.layer.props.data.route.pickup_location ? arcDetails.layer.props.data.route.pickup_location : '',
+                drop: arcDetails.layer.props.data.route.delivery_location ? 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 ? arcDetails.layer.props.data.route.route_name : '',
+                material: arcDetails.layer.props.data.route.material ? arcDetails.layer.props.data.route.material : '',
+                type: arcDetails.layer.props.data.route.unit ? arcDetails.layer.props.data.route.unit : ''
+            };
+            this.createPopup(datasetForPopup);
+        }
+    }
+    createPopup(datasetForPopup) {
+        this.popup = new mapboxgl.Popup({
+            closeButton: false,
+            closeOnClick: false,
+            closeOnMove: true,
+            anchor: 'bottom-left'
+        });
+        this.popup.setLngLat(datasetForPopup.coordinate)
             .setHTML(`
       <div class="destination">
           <div class="duration">
@@ -434,256 +436,256 @@ class CoolmapService {
           <span><b>Material:</b> ${datasetForPopup.material}</span>
           <span><b>Type:</b> ${datasetForPopup.type}</span>
       </div>
-      `)
-            .addTo(this.map);
-    }
-    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));
-    }
-    createMarker(routeDetails) {
-        if (routeDetails.origin[0] && routeDetails.origin[1] && routeDetails.destination[0] && routeDetails.destination[1]) {
-            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);
-            const el = document.createElement('div');
-            el.className = 'marker';
-            el.innerHTML = `<span class='markerPointer' style='background:${routeDetails.linecolor}'><b>P</b><span class='markerSpan' style='border-top: 10px solid ${routeDetails.linecolor}'></span></span>`;
-            const originMarker = new mapboxgl.Marker(el)
-                .setPopup(popup).setLngLat(routeDetails.origin).addTo(this.map);
-            originMarker.getElement().addEventListener('mouseenter', () => originMarker.togglePopup());
-            originMarker.getElement().addEventListener('mouseleave', () => originMarker.togglePopup());
-            const elementForDestination = document.createElement('div');
-            elementForDestination.className = 'marker';
-            elementForDestination.innerHTML = `<span class='markerPointer' style='background:${routeDetails.linecolor}'><b>D</b><span class='markerSpan' style='border-top: 10px solid ${routeDetails.linecolor}'></span></span>`;
-            const destinationMarker = new mapboxgl.Marker(elementForDestination).setPopup(popupForDestination).setLngLat(routeDetails.destination).addTo(this.map);
-            destinationMarker.getElement().addEventListener('mouseenter', () => destinationMarker.togglePopup());
-            destinationMarker.getElement().addEventListener('mouseleave', () => destinationMarker.togglePopup());
-            this.markerOriginList[routeDetails.index] = originMarker;
-            this.markerDestinationList[routeDetails.index] = destinationMarker;
-            const colorArray = this.hexToRGB(routeDetails.linecolor);
-            const arcLayer = new MapboxLayer({
-                id: 'arc-layer' + routeDetails.index,
-                type: ArcLayer,
-                pickable: true,
-                data: { route: routeDetails.route, index: routeDetails.index },
-                getWidth: 1,
-                getSourcePosition: routeDetails.origin,
-                getTargetPosition: routeDetails.destination,
-                getTargetColor: [255, 255, 255],
-                getSourceColor: [colorArray[0], colorArray[1], colorArray[2]],
-                onHover: (info, event) => this.showRoutePopup(info, event, routeDetails.isViewRoute),
-            });
-            this.map.addLayer(arcLayer);
-        }
-    }
-    async removeRouteAndMarker(index) {
-        if (this.map) {
-            this.map.getLayer(`arc-layer${index}`) ? this.map.removeLayer(`arc-layer${index}`) : '';
-            this.map.getLayer(`line${index}`) ? this.map.removeLayer(`line${index}`) : '';
-            this.map.getLayer(`custom_layer${index}`) ? this.map.removeLayer(`custom_layer${index}`) : '';
-            this.map.getSource(`line${index}`) ? this.map.removeSource(`line${index}`) : '';
-            this.map.getLayer(`route-for-job-code${index}`) ? this.map.removeLayer(`route-for-job-code${index}`) : '';
-            this.map.getSource(`route-source-for-job-code${index}`) ? this.map.removeSource(`route-source-for-job-code${index}`) : '';
-            this.findMarkerBound(index);
-            this.markerOriginList[index] ? this.markerOriginList[index].remove() : '';
-            this.markerDestinationList[index] ? this.markerDestinationList[index].remove() : '';
-            await true;
-        }
-    }
-    findMarkerBound(index) {
-        const indexOfCordinates = this.originDestinationCordinates.findIndex((x) => (x[0][0].toFixed(6) == this.markerOriginList[index]?.getLngLat()?.lng.toFixed(6)) && (x[0][1].toFixed(6) == this.markerOriginList[index]?.getLngLat()?.lat.toFixed(6)));
-        if (indexOfCordinates >= 0) {
-            this.originDestinationCordinates.splice(indexOfCordinates, 1);
-        }
-    }
-    async filterRoute(ID, visibility, showAllFitbound) {
-        if (ID) {
-            if (this.map.getLayer(`route-for-job-code${ID}`)) {
-                this.map.setLayoutProperty(`route-for-job-code${ID}`, 'visibility', visibility);
-                const originM = this.markerOriginList[ID].getElement();
-                originM.style.display = ((visibility === 'visible') ? 'block' : visibility);
-                const destinationM = this.markerDestinationList[ID].getElement();
-                destinationM.style.display = ((visibility === 'visible') ? 'block' : visibility);
-                if (visibility === 'none' && showAllFitbound) {
-                    this.findMarkerBound(ID);
-                    this.extendReBound();
-                }
-            }
-            if (this.map.getLayer(`arc-layer${ID}`)) {
-                this.map.setLayoutProperty(`arc-layer${ID}`, 'visibility', visibility);
-            }
-        }
-        await true;
-    }
-    extendBound(route, showAllFitbound) {
-        return new Promise((resolve, reject) => {
-            if (route) {
-                if (typeof route === 'string') {
-                    let path = route.split(';');
-                    path = path.map((ele) => { return ele = this.formateLatLong(ele); });
-                    path.forEach((ele, index) => { if (ele.length === 1)
-                        path.splice(index, 1); });
-                    route = path;
-                }
-                if (route[0][0] && route[0][1] && route[route.length - 1][0] && route[route.length - 1][1]) {
-                    this.originDestinationCordinates.push(route);
-                    route.map((item) => {
-                        this.bounds.extend(item);
-                    });
-                }
-            }
-            if (showAllFitbound) {
-                const padding = { top: this.padding.top, bottom: (this.padding.bottom + (this.windowActualHeightWidth.availHeight - (window.innerHeight - 65))), left: this.padding.left, right: this.padding.right };
-                setTimeout(() => {
-                    if (showAllFitbound && (Object.keys(this.bounds).length > 0))
-                        this.map.fitBounds(this.bounds, { padding }, { fitboundComplete: true });
-                }, 100);
-                this.map.once('moveend', (event) => { if (event.fitboundComplete) {
-                    resolve(true);
-                } });
-            }
-        });
-    }
-    extendReBound(bottom) {
-        return new Promise((resolve, reject) => {
-            this.bounds = new mapboxgl.LngLatBounds();
-            if (this.originDestinationCordinates.length >= 0) {
-                this.originDestinationCordinates.map((item, index) => {
-                    item.map((route) => {
-                        this.bounds.extend(route);
-                    });
-                    if (index === (this.originDestinationCordinates.length - 1)) {
-                        const padding = { top: this.padding.top, bottom: (this.padding.bottom + (this.windowActualHeightWidth.availHeight - (window.innerHeight - 65))), left: this.padding.left, right: this.padding.right };
-                        setTimeout(() => {
-                            if (this.originDestinationCordinates.length > 0)
-                                this.map.fitBounds(this.bounds, { padding });
-                        }, 500);
-                        resolve(true);
-                    }
-                });
-            }
-            else {
-                resolve(true);
-            }
-        });
-    }
-    plotRoute(route, i, type, enablefitbound, showAllFitbound) {
-        return new Promise((resolve, reject) => {
-            let param = {};
-            if (['jobcode'].includes(type)) {
-                param['job'] = route['job_id'];
-                this.utils.postDataWithRestUrl('schedule/job/path', param).subscribe((res) => {
-                    if (res['data']['route']) {
-                        let path = res['data']['route'].split(';');
-                        path = path.map((ele) => { return ele = this.formateLatLong(ele); });
-                        path.forEach((ele, index) => { if (ele.length === 1)
-                            path.splice(index, 1); });
-                        route['path'] = path;
-                        this.extendBound(route['path'], showAllFitbound);
-                        if (route['path'] && route['path'].length > 0)
-                            this.drawLine(route['path'], i, route, enablefitbound, type);
-                        route['index'] = i;
-                    }
-                    else {
-                        this.extendBound(null, showAllFitbound);
-                    }
-                    resolve(true);
-                }, (err) => { if (err) {
-                    reject(false);
-                } });
-            }
-            else if (['jobrouteList', 'addroute'].includes(type)) {
-                if (route['path'] && route['path'].length > 0) {
-                    let path = route['path'].split(';');
-                    path = path.map((ele) => { return ele = this.formateLatLong(ele); });
-                    path.forEach((ele, index) => { if (ele.length === 1)
-                        path.splice(index, 1); });
-                    this.extendBound(path, showAllFitbound);
-                    this.drawLine(path, i, route, enablefitbound, type);
-                }
-                ;
-            }
-        });
-    }
-    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.windowActualHeightWidth.availHeight = (window.innerHeight > window.screen.availHeight) ? window.innerHeight : window.screen.availHeight;
-            setTimeout(() => {
-                this.map.fitBounds(this.bounds, { padding: { top: this.padding.top, bottom: this.padding.bottom + (this.windowActualHeightWidth.availHeight - (event.target.innerHeight - 65)), left: this.padding.left, right: this.padding.right } });
-            }, 500);
-        }
-    }
-    setWindowHeight(screen) {
-        this.windowActualHeightWidth.availHeight = screen;
-    }
-    setPadding(padding) { this.padding = padding; }
-    clearPadding() { this.padding = null; }
-    removeJobFromMap(data) {
-        data.map((ele, index) => {
-            const id = (ele['job_id'] ? ele['job_id'] : ele['route_id']);
-            this.removeRouteAndMarker(id);
-            if (index === (data.length - 1)) {
-                this.extendReBound();
-            }
-        });
-    }
-}
-CoolmapService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CoolmapService, deps: [{ token: UtilsService }, { token: i2$1.EventManager }], target: i0.ɵɵFactoryTarget.Injectable });
-CoolmapService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CoolmapService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CoolmapService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+      `)
+            .addTo(this.map);
+    }
+    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));
+    }
+    createMarker(routeDetails) {
+        if (routeDetails.origin[0] && routeDetails.origin[1] && routeDetails.destination[0] && routeDetails.destination[1]) {
+            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);
+            const el = document.createElement('div');
+            el.className = 'marker';
+            el.innerHTML = `<span class='markerPointer' style='background:${routeDetails.linecolor}'><b>P</b><span class='markerSpan' style='border-top: 10px solid ${routeDetails.linecolor}'></span></span>`;
+            const originMarker = new mapboxgl.Marker(el)
+                .setPopup(popup).setLngLat(routeDetails.origin).addTo(this.map);
+            originMarker.getElement().addEventListener('mouseenter', () => originMarker.togglePopup());
+            originMarker.getElement().addEventListener('mouseleave', () => originMarker.togglePopup());
+            const elementForDestination = document.createElement('div');
+            elementForDestination.className = 'marker';
+            elementForDestination.innerHTML = `<span class='markerPointer' style='background:${routeDetails.linecolor}'><b>D</b><span class='markerSpan' style='border-top: 10px solid ${routeDetails.linecolor}'></span></span>`;
+            const destinationMarker = new mapboxgl.Marker(elementForDestination).setPopup(popupForDestination).setLngLat(routeDetails.destination).addTo(this.map);
+            destinationMarker.getElement().addEventListener('mouseenter', () => destinationMarker.togglePopup());
+            destinationMarker.getElement().addEventListener('mouseleave', () => destinationMarker.togglePopup());
+            this.markerOriginList[routeDetails.index] = originMarker;
+            this.markerDestinationList[routeDetails.index] = destinationMarker;
+            const colorArray = this.hexToRGB(routeDetails.linecolor);
+            const arcLayer = new MapboxLayer({
+                id: 'arc-layer' + routeDetails.index,
+                type: ArcLayer,
+                pickable: true,
+                data: { route: routeDetails.route, index: routeDetails.index },
+                getWidth: 1,
+                getSourcePosition: routeDetails.origin,
+                getTargetPosition: routeDetails.destination,
+                getTargetColor: [255, 255, 255],
+                getSourceColor: [colorArray[0], colorArray[1], colorArray[2]],
+                onHover: (info, event) => this.showRoutePopup(info, event, routeDetails.isViewRoute),
+            });
+            this.map.addLayer(arcLayer);
+        }
+    }
+    async removeRouteAndMarker(index) {
+        if (this.map) {
+            this.map.getLayer(`arc-layer${index}`) ? this.map.removeLayer(`arc-layer${index}`) : '';
+            this.map.getLayer(`line${index}`) ? this.map.removeLayer(`line${index}`) : '';
+            this.map.getLayer(`custom_layer${index}`) ? this.map.removeLayer(`custom_layer${index}`) : '';
+            this.map.getSource(`line${index}`) ? this.map.removeSource(`line${index}`) : '';
+            this.map.getLayer(`route-for-job-code${index}`) ? this.map.removeLayer(`route-for-job-code${index}`) : '';
+            this.map.getSource(`route-source-for-job-code${index}`) ? this.map.removeSource(`route-source-for-job-code${index}`) : '';
+            this.findMarkerBound(index);
+            this.markerOriginList[index] ? this.markerOriginList[index].remove() : '';
+            this.markerDestinationList[index] ? this.markerDestinationList[index].remove() : '';
+            await true;
+        }
+    }
+    findMarkerBound(index) {
+        const indexOfCordinates = this.originDestinationCordinates.findIndex((x) => (x[0][0].toFixed(6) == this.markerOriginList[index]?.getLngLat()?.lng.toFixed(6)) && (x[0][1].toFixed(6) == this.markerOriginList[index]?.getLngLat()?.lat.toFixed(6)));
+        if (indexOfCordinates >= 0) {
+            this.originDestinationCordinates.splice(indexOfCordinates, 1);
+        }
+    }
+    async filterRoute(ID, visibility, showAllFitbound) {
+        if (ID) {
+            if (this.map.getLayer(`route-for-job-code${ID}`)) {
+                this.map.setLayoutProperty(`route-for-job-code${ID}`, 'visibility', visibility);
+                const originM = this.markerOriginList[ID].getElement();
+                originM.style.display = ((visibility === 'visible') ? 'block' : visibility);
+                const destinationM = this.markerDestinationList[ID].getElement();
+                destinationM.style.display = ((visibility === 'visible') ? 'block' : visibility);
+                if (visibility === 'none' && showAllFitbound) {
+                    this.findMarkerBound(ID);
+                    this.extendReBound();
+                }
+            }
+            if (this.map.getLayer(`arc-layer${ID}`)) {
+                this.map.setLayoutProperty(`arc-layer${ID}`, 'visibility', visibility);
+            }
+        }
+        await true;
+    }
+    extendBound(route, showAllFitbound) {
+        return new Promise((resolve, reject) => {
+            if (route) {
+                if (typeof route === 'string') {
+                    let path = route.split(';');
+                    path = path.map((ele) => { return ele = this.formateLatLong(ele); });
+                    path.forEach((ele, index) => { if (ele.length === 1)
+                        path.splice(index, 1); });
+                    route = path;
+                }
+                if (route[0][0] && route[0][1] && route[route.length - 1][0] && route[route.length - 1][1]) {
+                    this.originDestinationCordinates.push(route);
+                    route.map((item) => {
+                        this.bounds.extend(item);
+                    });
+                }
+            }
+            if (showAllFitbound) {
+                const padding = { top: this.padding.top, bottom: (this.padding.bottom + (this.windowActualHeightWidth.availHeight - (window.innerHeight - 65))), left: this.padding.left, right: this.padding.right };
+                setTimeout(() => {
+                    if (showAllFitbound && (Object.keys(this.bounds).length > 0))
+                        this.map.fitBounds(this.bounds, { padding }, { fitboundComplete: true });
+                }, 100);
+                this.map.once('moveend', (event) => { if (event.fitboundComplete) {
+                    resolve(true);
+                } });
+            }
+        });
+    }
+    extendReBound(bottom) {
+        return new Promise((resolve, reject) => {
+            this.bounds = new mapboxgl.LngLatBounds();
+            if (this.originDestinationCordinates.length >= 0) {
+                this.originDestinationCordinates.map((item, index) => {
+                    item.map((route) => {
+                        this.bounds.extend(route);
+                    });
+                    if (index === (this.originDestinationCordinates.length - 1)) {
+                        const padding = { top: this.padding.top, bottom: (this.padding.bottom + (this.windowActualHeightWidth.availHeight - (window.innerHeight - 65))), left: this.padding.left, right: this.padding.right };
+                        setTimeout(() => {
+                            if (this.originDestinationCordinates.length > 0)
+                                this.map.fitBounds(this.bounds, { padding });
+                        }, 500);
+                        resolve(true);
+                    }
+                });
+            }
+            else {
+                resolve(true);
+            }
+        });
+    }
+    plotRoute(route, i, type, enablefitbound, showAllFitbound) {
+        return new Promise((resolve, reject) => {
+            let param = {};
+            if (['jobcode'].includes(type)) {
+                param['job'] = route['job_id'];
+                this.utils.postDataWithRestUrl('schedule/job/path', param).subscribe((res) => {
+                    if (res['data']['route']) {
+                        let path = res['data']['route'].split(';');
+                        path = path.map((ele) => { return ele = this.formateLatLong(ele); });
+                        path.forEach((ele, index) => { if (ele.length === 1)
+                            path.splice(index, 1); });
+                        route['path'] = path;
+                        this.extendBound(route['path'], showAllFitbound);
+                        if (route['path'] && route['path'].length > 0)
+                            this.drawLine(route['path'], i, route, enablefitbound, type);
+                        route['index'] = i;
+                    }
+                    else {
+                        this.extendBound(null, showAllFitbound);
+                    }
+                    resolve(true);
+                }, (err) => { if (err) {
+                    reject(false);
+                } });
+            }
+            else if (['jobrouteList', 'addroute'].includes(type)) {
+                if (route['path'] && route['path'].length > 0) {
+                    let path = route['path'].split(';');
+                    path = path.map((ele) => { return ele = this.formateLatLong(ele); });
+                    path.forEach((ele, index) => { if (ele.length === 1)
+                        path.splice(index, 1); });
+                    this.extendBound(path, showAllFitbound);
+                    this.drawLine(path, i, route, enablefitbound, type);
+                }
+                ;
+            }
+        });
+    }
+    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.windowActualHeightWidth.availHeight = (window.innerHeight > window.screen.availHeight) ? window.innerHeight : window.screen.availHeight;
+            setTimeout(() => {
+                this.map.fitBounds(this.bounds, { padding: { top: this.padding.top, bottom: this.padding.bottom + (this.windowActualHeightWidth.availHeight - (event.target.innerHeight - 65)), left: this.padding.left, right: this.padding.right } });
+            }, 500);
+        }
+    }
+    setWindowHeight(screen) {
+        this.windowActualHeightWidth.availHeight = screen;
+    }
+    setPadding(padding) { this.padding = padding; }
+    clearPadding() { this.padding = null; }
+    removeJobFromMap(data) {
+        data.map((ele, index) => {
+            const id = (ele['job_id'] ? ele['job_id'] : ele['route_id']);
+            this.removeRouteAndMarker(id);
+            if (index === (data.length - 1)) {
+                this.extendReBound();
+            }
+        });
+    }
+}
+CoolmapService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CoolmapService, deps: [{ token: UtilsService }, { token: i2$1.EventManager }], target: i0.ɵɵFactoryTarget.Injectable });
+CoolmapService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CoolmapService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CoolmapService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: UtilsService }, { type: i2$1.EventManager }]; } });
 
-class Route {
-    constructor() {
-        this.index = 0;
-    }
-}
-const EstinationData = ['estimated_distance', 'estimated_time'];
-var EstinationEnum;
-(function (EstinationEnum) {
-    EstinationEnum["estimated_distance"] = "miles";
-    EstinationEnum["estimated_time"] = "time";
-})(EstinationEnum || (EstinationEnum = {}));
-const JobCodeOverviewData = ['customer_contact', 'delivery_contact', 'pickup_location', 'delivery_location', 'project', 'unit'];
-var JobCodeOverviewEnum;
-(function (JobCodeOverviewEnum) {
-    JobCodeOverviewEnum["customer_contact"] = "Customer Contact";
-    JobCodeOverviewEnum["delivery_contact"] = "Delivery Contact";
-    JobCodeOverviewEnum["pickup_location"] = "Pickup";
-    JobCodeOverviewEnum["delivery_location"] = "Delivery";
-    JobCodeOverviewEnum["project"] = "Project Name";
-    JobCodeOverviewEnum["unit"] = "Job Type";
-})(JobCodeOverviewEnum || (JobCodeOverviewEnum = {}));
-const DriversmsCardKey = ['order_number', 'date', 'values', 'material', 'unit', 'pickup_location', 'delivery_location'];
-var DriverSmsCardEnum;
-(function (DriverSmsCardEnum) {
-    DriverSmsCardEnum["order_number"] = "Jobcode";
-    DriverSmsCardEnum["date"] = "Date";
-    DriverSmsCardEnum["values"] = "Total tasks";
-    DriverSmsCardEnum["material"] = "Material";
-    DriverSmsCardEnum["unit"] = "Unit";
-    DriverSmsCardEnum["pickup_location"] = "Pickup Address";
-    DriverSmsCardEnum["delivery_location"] = "Delivery Address";
-})(DriverSmsCardEnum || (DriverSmsCardEnum = {}));
-class PopupData {
+class Route {
+    constructor() {
+        this.index = 0;
+    }
+}
+const EstinationData = ['estimated_distance', 'estimated_time'];
+var EstinationEnum;
+(function (EstinationEnum) {
+    EstinationEnum["estimated_distance"] = "miles";
+    EstinationEnum["estimated_time"] = "time";
+})(EstinationEnum || (EstinationEnum = {}));
+const JobCodeOverviewData = ['customer_contact', 'delivery_contact', 'pickup_location', 'delivery_location', 'project', 'unit'];
+var JobCodeOverviewEnum;
+(function (JobCodeOverviewEnum) {
+    JobCodeOverviewEnum["customer_contact"] = "Customer Contact";
+    JobCodeOverviewEnum["delivery_contact"] = "Delivery Contact";
+    JobCodeOverviewEnum["pickup_location"] = "Pickup";
+    JobCodeOverviewEnum["delivery_location"] = "Delivery";
+    JobCodeOverviewEnum["project"] = "Project Name";
+    JobCodeOverviewEnum["unit"] = "Job Type";
+})(JobCodeOverviewEnum || (JobCodeOverviewEnum = {}));
+const DriversmsCardKey = ['order_number', 'date', 'values', 'material', 'unit', 'pickup_location', 'delivery_location'];
+var DriverSmsCardEnum;
+(function (DriverSmsCardEnum) {
+    DriverSmsCardEnum["order_number"] = "Jobcode";
+    DriverSmsCardEnum["date"] = "Date";
+    DriverSmsCardEnum["values"] = "Total tasks";
+    DriverSmsCardEnum["material"] = "Material";
+    DriverSmsCardEnum["unit"] = "Unit";
+    DriverSmsCardEnum["pickup_location"] = "Pickup Address";
+    DriverSmsCardEnum["delivery_location"] = "Delivery Address";
+})(DriverSmsCardEnum || (DriverSmsCardEnum = {}));
+class PopupData {
 }
 
-/*
- * Public API Surface of coolmap-services
+/*
+ * Public API Surface of coolmap-services
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { CoolmapService, DriverSmsCardEnum, DriversmsCardKey, EstinationData, EstinationEnum, JobCodeOverviewData, JobCodeOverviewEnum, PopupData, Route, UtilsService };