@aggdirect/coolmap-services 0.0.5 → 0.0.7

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

@@ -1,445 +0,0 @@
-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

@@ -1,80 +0,0 @@
-
-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;
-}