@aggdirect/coolmap-services 0.0.1

package/README.md

@@ -0,0 +1,24 @@
+# CoolmapServices
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project coolmap-services` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project coolmap-services`.
+> Note: Don't forget to add `--project coolmap-services` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build coolmap-services` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build coolmap-services`, go to the dist folder `cd dist/coolmap-services` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test coolmap-services` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/coolmap-services'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/coolmap-services",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@aggdirect/coolmap-services",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^14.2.0",
+    "@angular/core": "^14.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "allowedNonPeerDependencies": {
+    "mapbox-gl": "^2.10.0",
+    "@types/mapbox-gl": "^2.7.5",
+    "@turf/turf": "^6.5.0",
+    "deck.gl": "^8.4.16"
+  },
+  "description": "This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.0.",
+  "main": "karma.conf.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Navin Vishwakarma <navin@ogmaconceptions.com>",
+  "contributors": [
+    "Santanu Das <santanu.das@ogmaconceptions.com>"
+  ],
+  "license": "ISC"
+}

package/src/lib/coolmap-services.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CoolmapServicesComponent } from './coolmap-services.component';
+
+describe('CoolmapServicesComponent', () => {
+  let component: CoolmapServicesComponent;
+  let fixture: ComponentFixture<CoolmapServicesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CoolmapServicesComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CoolmapServicesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/coolmap-services.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-coolmap-services',
+  template: `
+    <p>
+      coolmap-services works!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class CoolmapServicesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/coolmap-services.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CoolmapServicesComponent } from './coolmap-services.component';
+
+
+
+@NgModule({
+  declarations: [
+    CoolmapServicesComponent
+  ],
+  imports: [
+  ],
+  exports: [
+    CoolmapServicesComponent
+  ]
+})
+export class CoolmapServicesModule { }

package/src/lib/coolmap-services.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CoolmapServicesService } from './coolmap-services.service';
+
+describe('CoolmapServicesService', () => {
+  let service: CoolmapServicesService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CoolmapServicesService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/coolmap-services.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CoolmapServicesService {
+
+  constructor() { }
+}

package/src/lib/service/coolmap.service.ts

@@ -0,0 +1,445 @@
+import { Injectable } from '@angular/core';
+import * as mapboxgl from 'mapbox-gl';
+import * as turf from '@turf/turf';
+import { BehaviorSubject } from 'rxjs';
+import { PopupData, Route } from './data-model';
+import { UtilsService } from './utils.service';
+import { EventManager } from '@angular/platform-browser';
+import { MapboxLayer } from "@deck.gl/mapbox";
+import { ArcLayer } from '@deck.gl/layers';
+
+declare const Threebox: any;
+
+@Injectable({ providedIn: 'root' })
+export class CoolmapService {
+  map!: mapboxgl.Map
+  markerOriginList: mapboxgl.Marker[] = [];
+  markerDestinationList: mapboxgl.Marker[] = [];
+  public initiatecoolmap = new BehaviorSubject(true);
+  reintiatecoolmap = this.initiatecoolmap.asObservable();
+  bounds = new mapboxgl.LngLatBounds();
+  originDestinationCordinates: any = [];
+  padding!: any;
+  windowActualHeightWidth!: any;
+  popup: mapboxgl.Popup;
+
+  constructor(private utils: UtilsService, private eventManager: EventManager) {
+    this.eventManager.addGlobalEventListener('window', 'resize', this.onResize.bind(this)); this.windowActualHeightWidth = { availHeight: 0 };
+  }
+
+  initiateMapForAddRoute(el: HTMLElement) {
+    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: any, index: number, unit: any, route?: any, bottom?: number) {
+    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: any) => {
+        const point: any = {
+          '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: PopupData = {
+          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?: any, index?: number | any, route?: any, enablefitbound?: boolean, routeType?: string) {
+    let linecolor: any;
+    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: PopupData = {
+          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: string, type?: string | undefined) {
+    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?): void {
+    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: PopupData = {
+        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: PopupData): void {
+    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">
+            <p class="pickprt"><b>Pickup Location:</b> ${datasetForPopup.pickup}</p>
+            <p class="dropprt"><b>Drop Location:</b> ${datasetForPopup.drop}</p>
+          </div>
+          ${datasetForPopup.jobCode ? '<span><b>Job Code:</b> ' + datasetForPopup.jobCode + '</span>' : ''}
+          ${datasetForPopup.customer ? '<span><b>Customer:</b> ' + datasetForPopup.customer + '</span>' : ''}
+          <span><b>${datasetForPopup.routeType} Name:</b> ${datasetForPopup.title}</span>
+          <span><b>Material:</b> ${datasetForPopup.material}</span>
+          <span><b>Type:</b> ${datasetForPopup.type}</span>
+      </div>
+      `)
+    .addTo(this.map);
+  }
+
+  hexToRGB(hex: any): [number, number, number] {
+    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: number | string | any) {
+    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: any) {
+    const indexOfCordinates = this.originDestinationCordinates.findIndex((x: any) =>
+      (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: any, visibility: string, showAllFitbound?: boolean) {
+    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: any, showAllFitbound: boolean | undefined) {
+    return new Promise((resolve, reject) => {
+      if (route) {
+        if (typeof route === 'string') {
+          let path: any = route.split(';');
+          path = path.map((ele: string | any) => { return ele = this.formateLatLong(ele) });
+          path.forEach((ele: any, index: number) => { 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: any) => {
+            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: any) => { if (event.fitboundComplete) { resolve(true) } });
+      }
+    });
+  }
+
+  extendReBound(bottom?: number) {
+    return new Promise((resolve, reject) => {
+      this.bounds = new mapboxgl.LngLatBounds();
+
+      if (this.originDestinationCordinates.length >= 0) {
+        this.originDestinationCordinates.map((item: any, index: number) => {
+          item.map((route: any) => {
+            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: any, i: number | any, type: string, enablefitbound?: boolean, showAllFitbound?: boolean) {
+    return new Promise((resolve, reject) => {
+      let param: any = {};
+      if (['jobcode'].includes(type)) {
+        param['job'] = route['job_id']
+        this.utils.postDataWithRestUrl('schedule/job/path', param).subscribe((res: any) => {
+          if (res['data']['route']) {
+            let path = res['data']['route'].split(';');
+            path = path.map((ele: string | any) => { return ele = this.formateLatLong(ele) });
+            path.forEach((ele: any, index: number) => { 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: string | any) => { return ele = this.formateLatLong(ele) });
+          path.forEach((ele: any, index: number) => { 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: string) { return latlong ? latlong.split(',').map(x => +x).reverse() : null; }
+  clearBoundWithCordinates() {
+    this.bounds = new mapboxgl.LngLatBounds(); this.originDestinationCordinates = [];
+  }
+
+  onResize(event: any) {
+    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: any) {
+    this.windowActualHeightWidth.availHeight = screen;
+  }
+  setPadding(padding: any) { this.padding = padding }
+  clearPadding() { this.padding = null }
+  removeJobFromMap(data: Route[]) {
+    data.map((ele: any, index: number) => {
+      const id = (ele['job_id'] ? ele['job_id'] : ele['route_id']);
+      this.removeRouteAndMarker(id);
+      if (index === (data.length - 1)) {
+        this.extendReBound();
+      }
+    })
+  }
+}

package/src/lib/service/data-model.ts

@@ -0,0 +1,80 @@
+
+export class Route {
+  index: number = 0;
+  type?: string | null;
+  // Job Code
+  customer_contact?: string | null;
+  customer_name?: string | null;
+  delivery_contact?: string | null;
+  delivery_lat?: number | null;
+  delivery_location?: string | null | undefined;
+  delivery_lon?: number | null;
+  driver_list?: Array<any>;
+  material?: string | null;
+  order_number?: string | null;
+  pickup_lat?: number | null;
+  pickup_location?: string | null | undefined;
+  pickup_lon?: number | null;
+  project?: string | null;
+  total_count?: number;
+  unit?: string | null;
+  values: any;
+  job_id?: string;
+  isSelected?: boolean;
+  date?: string;
+  // Add Route
+  created_at?: string | null;
+  created_by_name?: string | null;
+  customer_id?: string | null;
+  delivery_lat_lng?: string | null;
+  estimated_distance?: string | null;
+  estimated_time?: string | null;
+  materials_id?: string | null;
+  path?: [number, number];
+  pickup_lat_lng?: string | null;
+  route_id?: string | null;
+  route_name?: string | null;
+  unit_id?: string | null;
+  note?: string | null
+  isActive?: boolean;
+  prevent?: boolean;
+}
+
+export const EstinationData = ['estimated_distance', 'estimated_time']
+export enum EstinationEnum {
+  estimated_distance = "miles",
+  estimated_time = "time"
+}
+
+export const JobCodeOverviewData = ['customer_contact', 'delivery_contact', 'pickup_location', 'delivery_location', 'project', 'unit']
+export enum JobCodeOverviewEnum {
+  customer_contact = 'Customer Contact',
+  delivery_contact = 'Delivery Contact',
+  pickup_location = 'Pickup',
+  delivery_location = 'Delivery',
+  project = 'Project Name',
+  unit = 'Job Type',
+}
+
+export const DriversmsCardKey = ['order_number', 'date', 'values', 'material', 'unit', 'pickup_location', 'delivery_location']
+export enum DriverSmsCardEnum {
+  order_number = 'Jobcode',
+  date = 'Date',
+  values = 'Total tasks',
+  material = 'Material',
+  unit = 'Unit',
+  pickup_location = 'Pickup Address',
+  delivery_location = 'Delivery Address'
+}
+
+export class PopupData {
+  coordinate: [number, number];
+  pickup: string | null;
+  jobCode?: string | null;
+  customer?: string | null;
+  drop: string | null;
+  routeType: string | null;
+  title: string | null;
+  material: string | null;
+  type: string | null;
+}

package/src/lib/service/utils.service.ts

@@ -0,0 +1,198 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { BehaviorSubject } from 'rxjs';
+import { Route } from './data-model';
+
+@Injectable({ providedIn: 'root' })
+export class UtilsService {
+  analyticsRESTURL = '';
+  RESTURLPrefix = '';
+  pickupOptions: any[] = [];
+  destOptions: any[] = [];
+  ownerOptions: any[] = [];
+  customerOptions: any[] = [];
+  unitOptions: any[] = [];
+  materialOptions: any[] = [];
+  jcodeOptions: any[] = [];
+  driverOption: any[] = [];
+  truckingCompanayOption: any[] = [];
+  routeNameOptions: any[] = [];
+  public 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<string, string>();
+  constructor(private http: HttpClient,private snackBar: MatSnackBar) {
+    this.analyticsRESTURL = 'https://test-analytics.aggdirect.com/REST/';
+    this.RESTURLPrefix = 'https://test-server.aggdirect.com/REST/';
+  }
+  getDateFormat(strVal: Date | null, seprater?: string) {
+    seprater = seprater ? seprater : '-';
+    const mydate = strVal;
+    return mydate?.getFullYear() + seprater + ((mydate ? mydate.getMonth() : 0) + 1) + seprater + mydate?.getDate();
+  }
+  getData(path: string) { return this.http.get(`${this.analyticsRESTURL}${path}`) }
+  postdata(path: string, data: any) { return this.http.post(`${this.analyticsRESTURL}${path}`, data) }
+  postDataWithRestUrl(path: string, data: any) { return this.http.post(`${this.RESTURLPrefix}${path}`, data) }
+  fetchAutoCompleteLocations(keyword: string) {
+    return this.http.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${keyword}.json?access_token=pk.eyJ1Ijoic2FudGFudS1vZ21hIiwiYSI6ImNsOGQ0cDVrNjAweTMzb3RmdG9ieTU5ZDkifQ.I6ZS7mViZYSvBo4zz-mGQQ&country=US`)
+  }
+  openSnackBar(message: string, className?: string) {
+    this.snackBar.open(message, '', {
+      duration: 5000, verticalPosition: 'top', horizontalPosition: 'center', panelClass: [className ? className : 'default']
+    });
+  }
+
+  makeOptions(item: Route) {
+    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: string, filters: any) {
+    if (typeof value !== 'string') { return [] }
+    const filterValue = value.toLowerCase();
+    if (filterValue === '') { return [] }
+    const searchResults: any[] = [];
+    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: any = {}
+    filters.map((filter: { [x: string]: any; }) => {
+      searchDict[filter['name'] + filter['type']] = filter;
+    })
+    const furtherFilter: any[] = [];
+    searchResults.map(search => {
+      if ((search['label'] + search['type']) in searchDict) { }
+      else { furtherFilter.push(search) }
+    });
+    return furtherFilter;
+  }
+
+  getSearchResults(list: Route[], filterval: any): any {
+    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'] as keyof Route]);
+        }
+        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'] as keyof Route]);
+        }
+        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: string, value: string) {
+    this.dict.set(key, value);
+  }
+  getdictValue(key: string) {
+    return JSON.parse(this.dict.get(key));
+  }
+  removedictValue(key: string) {
+    this.dict.delete(key);
+  }
+  conveySearchIcon(value: any): boolean{
+    if(value && typeof(value) !== 'object') return true;
+    return false
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,13 @@
+/*
+ * Public API Surface of coolmap-services
+ */
+
+export * from './lib/coolmap-services.service';
+export * from './lib/coolmap-services.component';
+export * from './lib/coolmap-services.module';
+export * from './lib/service/coolmap.service';
+export * from './lib/service/utils.service';
+export * from './lib/service/data-model';
+
+
+

package/src/test.ts

@@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);

package/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}