nickcam / flareclusterlayer Goto Github PK

View Code? Open in Web Editor NEW

133.0 133.0 51.0 1.49 MB

ArcGIS javascript custom graphics layer. Create clusters...with flares.

Home Page: https://flareclusterlayer.azurewebsites.net/index_v4.html

License: MIT License

JavaScript 43.54% HTML 22.66% TypeScript 33.79%

arcgis cluster esri-jsapi flares typescript

flareclusterlayer's People

Contributors

Stargazers

Watchers

flareclusterlayer's Issues

recreating the clusters in v4.11 is not showing graphics

Hi nick,

In v4.11 scene view when i tries to recreate the cluster by removing all the graphics and adding them back is not working.The graphics are not adding .unless i zoom in and zoom out then the graphic is coming back to the map.

Map object initialization

How is the _setMap method called? In the example, it's called automatically, but I had to set the map explicitely. Why? Does it look for map and surface objects at some specific locations?

Improve the documentation on how to run and integrate this Layer

It would be nice to have, within the README, a quick example of how we can use this layer easily in our ArcGIS projects, so that in a quick glance you'd get the idea of how to start using it.

Due to my recent PR opened (#47), I think a section with requirements and how to start the project would be nice too. In my case, I didn't have the http-server required dependency for running the npm run server script.

Issue with numbers on main clusters

Hello,

I'm currently using the 4.6 code of this library for a custom web application that uses the latest ArcGIS API. My main issue right now is for some reason the numbers for the main clusters show for a second or two and then disappear afterwards. Also, when I move the map, then stop moving the map, the numbers show but disappear as well.

I wanted to know if someone has any idea of what could be causing this?

I've attached a zip file that has a brief clip showing what I am running into.

screen-capture.zip

Any help would be appreciated!

Chrome 70 ruined the flare...

Since last update of Chrome the flare is cut inside a small rectangle
Have no clue

On mouse over flares does not showing up at all.

HI Nicak,
Im mouse overing on the clustergroup but the flare tool tips are not showing up.Could you please look into my code .Am i missing any property?.Please look into my code below.

/*
Copyright 2018 Esri
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import {
Component,
OnInit,
ViewChild,
ElementRef,
Input,
Output,
EventEmitter,
HostListener
} from '@angular/core';
import { loadModules } from 'esri-loader';
import esri = __esri;
import { Urls } from '@enums/urls.enum';
import { BrandNames, BrandColors } from '@enums/brand.enum';
import { AppSettingsService } from '@services/app-settings/app-settings.service';
import { UserService } from '@services/user/user.service';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { Router } from '@angular/router';
import { FleetDataService } from '@fleet/services/fleet-data.service';
import { DatePipe } from '@angular/common';
import { ApiService } from '@services/api/api.service';
import { ToolbarToggleFilterbarService } from '@fleet/services/events/toolbar-toggle-filterbar.service';
import { TranslateService } from '@ngx-translate/core';
import { FleetFilterDataStoreService } from '@fleet/services/fleet-filter-data-store/fleet-filter-data-store.service';
import { Location } from '@angular/common';
import { markParentViewsForCheck } from '@angular/core/src/view/util';
import { Popup } from 'auth0-js';
import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
import { FleetService } from '../../services/fleet.service';
import { SelectedVehicleService } from '@fleet/services/events/selected-vehicle.service';
import { UtilService } from '@services/util/util.service';
import { NavmapService } from '@fleet/services/navmap.service';
import { FaultsFilterDataService } from '@fleet/services/fleet-faults-filter/faults-filter-data.service';

@component({
selector: 'app-fleet-map',
templateUrl: './fleet-map.component.html',
styleUrls: ['./fleet-map.component.css'],
animations: [
trigger('collapseVehicles', [
state(
'collapsed',
style({
height: '0',
minHeight: '0',
display: 'none',
overflow: 'hidden'
})
),
state('expanded', style({ height: '*' })),
transition('expanded <=> collapsed', animate('350ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
])
]
})
export class FleetMapComponent implements OnInit {
imageUrl: any;
map: esri.Map;
// private mapView: esri.MapView;
mapViewProperties: esri.MapViewProperties;

filtersBarOpen: boolean;
_refData: any;
@ViewChild('mapViewNode') public mapViewEl: ElementRef;

/**

@Private _zoom sets map zoom
@Private _center sets map center
@Private _basemap sets type of map
*/
private _zoom = 10;
private _center: Array = [0.1278, 51.5074];
private _basemap = 'gray';

vehicleData: any;
totalMapheight: string;
result: any = this.translate.instant('PAGE_MAIN.ALERTS.NO_ACTIVE_ALERTS');
// ------------------------------------------New

@ViewChild(PerfectScrollbarComponent) public directiveScroll: PerfectScrollbarComponent;
@ViewChild('listPS', { read: ElementRef }) public panel: ElementRef;
public brands = BrandNames;

@input()
vehicleId;

@input()
selectedValue;
collapse;

fleetType = {};

vehicleType = {};
titleValue;
filterValue = 'fleet';
filterOptions = [];
fleetTypeCollapse = {};
vehicleTypeCollapse = {};
vehicleTypeSize = {};
fleetTypeSize = {};
filtersBarOpen1: boolean;

showReset = false;
clickedId;
showLoader = true;
sctollTopPosition = 0;
mapDataLoaded: boolean = true;

// ------------------------------

constructor(
private userService: UserService,
public _router: Router,
public fleetdata: FleetDataService,
public datepipe: DatePipe,
public apiService: ApiService,
toggleFilterBarService: ToolbarToggleFilterbarService,
public readonly translate: TranslateService,
public fleetFilterDataStore: FleetFilterDataStoreService,
public location: Location,

public _location: Location,

public fleetService: FleetService,
public selectedVehicleService: SelectedVehicleService,
public _fleetfilterStore: FleetFilterDataStoreService,
public utilService: UtilService,
public elem: ElementRef,
public navMapService: NavmapService,
public faultFiltersDataService: FaultsFilterDataService,
public elRef: ElementRef,
public router: Router,
public translateService: TranslateService

) {
toggleFilterBarService.openFiltersBar$.subscribe(value => {
this.filtersBarOpen = value;
this.totalMapheight = this.calulateHeight();
});

this.translateService
  .get('GLOBAL.FLEET.SINGULAR')
  .subscribe(data => this.fleetService.updateFilterOptionValue(0, data));

this.translateService
  .get('GLOBAL.VEHICLE_TYPE')
  .subscribe(data => this.fleetService.updateFilterOptionValue(1, data));

toggleFilterBarService.openFiltersBar$.subscribe(value => {
  this.filtersBarOpen1 = value;
});
this.initializeMap("");

//this.mapDataLoaded = true;

}

async initializeMap(vehicle: any) {
//alert("test");

try {
  const [
    EsriMap,
    EsriSceneView,
    MapView,
    EsriPoint,
    EsriLegend,
    EsriRequest,
    EsriConfig,
    EsriFeatureLayer,
    EsriSearch,
    UniqueValueRenderer,
    PopupTemplate,
    LabelClass,
    jsonUtils,
    Expand,
    LayerList,
    BasemapGallery,
    Zoom,
    Locate,
    fcl,
    SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, TextSymbol, TextSymbol3DLayer, Font, ClassBreaksRenderer,
    watchUtils, webMercatorUtils, SpatialReference, Color, Graphic

  ] = await loadModules([
    'esri/Map',
    'esri/views/SceneView',
    'esri/views/MapView',
    'esri/geometry/Point',
    'esri/widgets/Legend',
    'esri/request',
    'esri/config',
    'esri/layers/FeatureLayer',
    'esri/widgets/Search',
    'esri/renderers/UniqueValueRenderer',
    'esri/PopupTemplate',
    'esri/layers/support/LabelClass',
    'esri/symbols/support/jsonUtils',
    'esri/widgets/Expand',
    'esri/widgets/LayerList',
    'esri/widgets/BasemapGallery',
    'esri/widgets/Zoom',
    'esri/widgets/Locate',
    'http://tl0235085.cnh1.cnhgroup.cnh.com:8080/fcl/flareclusterlayer_v4.js',
    //'https://euevoawain050.azurewebsites.net/fcl/flareclusterlayer_v4.js',
    'esri/symbols/SimpleMarkerSymbol',
    'esri/symbols/SimpleLineSymbol',
    'esri/symbols/SimpleFillSymbol',
    'esri/symbols/TextSymbol',
    'esri/symbols/TextSymbol3DLayer',
    'esri/symbols/Font',
    'esri/renderers/ClassBreaksRenderer',
    'esri/core/watchUtils',
    'esri/geometry/support/webMercatorUtils',
    'esri/geometry/SpatialReference',
    'dojo/_base/Color',
    'esri/Graphic'



  ]);

  let map,

    sceneView,
    activeView,
    graphics,
    clusterLayer;

  // set some defaults
  const maxSingleFlareCount = 5;
  const areaDisplayMode = 'activated';
  let flagcheck: Boolean = false;

  const dojoConfig = {
    async: true,
    tlmSiblingOfDojo: false,
    packages: [{
      name: 'fcl',
      location: location.pathname.replace(/\/[^/]+$/, '') + '/fcl'
    }],
    has: {
      // tslint:disable-next-line:max-line-length
      'esri-promise-compatibility': 1 // enable native promises and remove the warning about using when() instead of then(). https://developers.arcgis.com/javascript/latest/guide/release-notes/index.html#improved-compatibility-with-javascript-promises
    }
  };



  // const map: esri.Map = new EsriMap(mapProperties);
  this.map = new EsriMap({
    basemap: 'satellite',
    ground: 'world-elevation'
  });
  ////console.log(vehicle);

  if (vehicle) {
    // Set type of map view
    this.mapViewProperties = {
      popup: {
        dockEnabled: true,
        dockOptions: {
          // Disables the dock button from the popup
          buttonEnabled: false,
          // Ignore the default sizes that trigger responsive docking
          breakpoint: false,
        },
        //actions:[]
      },
      container: this.mapViewEl.nativeElement,
      center: [vehicle.location[1], vehicle.location[0]],
      zoom: 18,
      map: this.map
    };
  } else {

    this.mapViewProperties = {
      popup: {
        dockEnabled: true,
        dockOptions: {
          // Disables the dock button from the popup
          buttonEnabled: false,
          // Ignore the default sizes that trigger responsive docking
          breakpoint: false,
        },
        //actions:[]
      },
      container: this.mapViewEl.nativeElement,
      center: [-97.922211, 39.381266],
      zoom: 3,
      map: this.map
    }

  }
  //this.MapViewProperties.surface.style.cursor = "pointer";



  const mapView: esri.MapView = new EsriSceneView(this.mapViewProperties);
  const data1 = [];
  // this.map.destroy();
  //  if(this._zoom == 11){
  //   mapView.goTo({
  //     center: this._center,
  //     zoom: this._zoom
  //   })
  // }

  const fields = [
    {
      name: 'ObjectID',
      alias: 'ObjectID',
      type: 'oid'
    },
    {
      name: 'name',
      alias: 'Name',
      type: 'string'
    }
  ];
  const points = [];
  const pointsL = [];
  let pointsLayer;
  let pointsLayerL;
  mapView.when(() => {
    // ////////console.log.log('it loaded');
    EsriRequest('/api/get/units/', {
      responseType: 'json'
    })
      .then(res => {
        const tractors = res.data;
        this.vehicleData = tractors;
        // //////console.log(tractors.content.length);
        for (let j = 0; j < tractors.content.length; j++) {
          if (tractors.content[j].location) {
            //    //////console.log('tractors', tractors);
            //////console.log(tractors.content[j].status.name);
            data1.push({

              Id: j,
              x: tractors.content[j].location[1],
              y: tractors.content[j].location[0],
              brand: tractors.content[j].brand,
              brandCode: tractors.content[j].brandCode,
              heading: tractors.content[j].heading,
              id: tractors.content[j].id,
              model: tractors.content[j].model,
              name: tractors.content[j].name,
              serialNumber: tractors.content[j].serialNumber,
              speed: tractors.content[j].speed,
              status: this.translate.instant(
                'GLOBAL.VEHICLE.STATUS.' + tractors.content[j].status.name
              ),
              type: tractors.content[j].type.code,
              value: tractors.content[j].type.code,
              imgName: this.getimage(tractors.content[j].type.code),
              engHours: this.getVehicleDetail(
                'engHours',
                tractors.content[j]
              ),
              engHoursText: this.translate.instant(
                'PAGE_FAULTS.ENGINE_HOURS'
              ),
              fuelLevelText: this.translate.instant(
                'BALLOON.VEHICLE.FUEL_LEVEL'
              ),
              currentSpeedText: this.translate.instant(
                'BALLOON.VEHICLE.CURRENT_SPEED'
              ),
              activeAlartTxt: this.translate.instant(
                'PAGE_MAIN.ALERTS.ACTIVE_ALERTS'
              ),
              vehicleDetailsTxt: this.translate.instant(
                'BALLOON.VEHICLE.CTA.VEHICLE_DETAILS'
              ),
              fuelLevel: this.getVehicleDetail(
                'fuelLevel',
                tractors.content[j]
              ),
              statusColor: this.checkStatus(
                tractors.content[j].status.name
              ),
              customstatustypebrand:
                tractors.content[j].status.name +
                tractors.content[j].type.code +
                tractors.content[j].brandCode,
              brandColor: this.getBrandColor(),
              vehicleObj: JSON.stringify(tractors.content[j]),
              lastUpdate: this.getStatusDate(tractors.content[j].lastUpdate)
            });
            points.push({
              geometry: new EsriPoint({
                x: tractors.content[j].location[1],
                y: tractors.content[j].location[0]
              }),
              attributes: {
                ObjectID: j,
                brand: tractors.content[j].brand,
                brandCode: tractors.content[j].brandCode,
                heading: tractors.content[j].heading,
                id: tractors.content[j].id,
                model: tractors.content[j].model,
                name: tractors.content[j].name,
                serialNumber: tractors.content[j].serialNumber,
                speed: tractors.content[j].speed,
                status: this.translate.instant(
                  'GLOBAL.VEHICLE.STATUS.' + tractors.content[j].status.name
                ),
                type: tractors.content[j].type.code,
                value: tractors.content[j].type.code,
                imgName: this.getimage(tractors.content[j].type.code),
                engHours: this.getVehicleDetail(
                  'engHours',
                  tractors.content[j]
                ),
                engHoursText: this.translate.instant(
                  'PAGE_FAULTS.ENGINE_HOURS'
                ),
                fuelLevelText: this.translate.instant(
                  'BALLOON.VEHICLE.FUEL_LEVEL'
                ),
                currentSpeedText: this.translate.instant(
                  'BALLOON.VEHICLE.CURRENT_SPEED'
                ),
                activeAlartTxt: this.translate.instant(
                  'PAGE_MAIN.ALERTS.ACTIVE_ALERTS'
                ),
                vehicleDetailsTxt: this.translate.instant(
                  'BALLOON.VEHICLE.CTA.VEHICLE_DETAILS'
                ),
                fuelLevel: this.getVehicleDetail(
                  'fuelLevel',
                  tractors.content[j]
                ),
                statusColor: this.checkStatus(
                  tractors.content[j].status.name
                ),
                customstatustypebrand:
                  tractors.content[j].status.name +
                  tractors.content[j].type.code +
                  tractors.content[j].brandCode,
                brandColor: this.getBrandColor(),
                vehicleObj: JSON.stringify(tractors.content[j]),
                lastUpdate: this.getStatusDate(tractors.content[j].lastUpdate)
                // totalAlerts: this.getTotalAlerts(tractors.content[j].id)
              }
            });
            pointsL.push({
              geometry: new EsriPoint({
                x: tractors.content[j].location[1],
                y: tractors.content[j].location[0]
              }),
              attributes: {
                ObjectID: j,
                brand: tractors.content[j].brand,
                brandCode: tractors.content[j].brandCode,
                heading: tractors.content[j].heading,
                id: tractors.content[j].id,
                model: tractors.content[j].model,
                name: tractors.content[j].name,
                serialNumber: tractors.content[j].serialNumber,
                speed: tractors.content[j].speed,
                status: tractors.content[j].status.name,
                type: tractors.content[j].type.code,
                value: tractors.content[j].type.code,
                imgName: this.getimage(tractors.content[j].type.code),
                engHours: this.getVehicleDetail(
                  'engHours',
                  tractors.content[j]
                ),
                fuelLevel: this.getVehicleDetail(
                  'fuelLevel',
                  tractors.content[j]
                ),
                statusColor: this.checkStatus(
                  tractors.content[j].status.name
                ),
                customstatustypebrand:
                  tractors.content[j].status.name +
                  tractors.content[j].type.code +
                  tractors.content[j].brandCode,
                brandColor: this.getBrandColor(),
                vehicleObj: JSON.stringify(tractors.content[j]),
                lastUpdate: this.getStatusDate(tractors.content[j].lastUpdate)
                // totalAlerts: this.getTotalAlerts(tractors.content[j].id)
              }
            });
          }
        }
        //////console.log(data1);
        const pointsRenderer = {
          type: 'unique-value', // autocasts as new UniqueValueRenderer()
          field: 'customstatustypebrand',
          valueExpressionTitle: 'Title to display',
          uniqueValueInfos: [
            {
              value: 'WORKINGTRACTORSCSAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/working.png',
                '#25b03d'
              )
            },
            {
              value: 'KEYONTRACTORSCSAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/KeyON.png',
                '#e7a603'
              )
            },
            {
              value: 'IDLETRACTORSCSAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/Idle.png',
                '#f47825'
              )
            },
            {
              value: 'MOVINGTRACTORSCSAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/Moving.png',
                '#F97C5A'
              )
            },
            {
              value: 'TRAVELINGTRACTORSCSAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/Traveling.png',
                '#035db1'
              )
            },
            {
              value: 'OFFTRACTORSCSAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/Off.png',
                '#F97C5A'
              )
            },
            {
              value: 'WORKINGTRACTORSNHAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/working.png',
                '#25b03d'
              )
            },
            {
              value: 'KEYONTRACTORSNHAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/KeyON.png',
                '#e7a603'
              )
            },
            {
              value: 'IDLETRACTORSNHAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/Idle.png',
                '#f47825'
              )
            },
            {
              value: 'MOVINGTRACTORSNHAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/Moving.png',
                '#F97C5A'
              )
            },
            {
              value: 'TRAVELINGTRACTORSNHAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/Traveling.png',
                '#035db1'
              )
            },
            {
              value: 'OFFTRACTORSNHAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/Off.png',
                '#F97C5A'
              )
            }
          ]
        };

        const pointsRendererL = {
          type: 'unique-value', // autocasts as new UniqueValueRenderer()
          field: 'status1',
          valueExpressionTitle: 'Title to display',
          uniqueValueInfos: [
            {
              value: this.translate.instant('GLOBAL.VEHICLE.STATUS.WORKING'),
              symbol: {
                type: 'simple-marker',
                // autocasts as new SimpleMarkerSymbol()
                color: '#25b03d'
              }
            },
            {
              value: this.translate.instant('GLOBAL.VEHICLE.STATUS.KEYON'),
              symbol: {
                type: 'simple-marker',
                // autocasts as new SimpleMarkerSymbol()
                color: '#e7a603'
              }
            },
            {
              value: this.translate.instant('GLOBAL.VEHICLE.STATUS.IDLE'),
              symbol: {
                type: 'simple-marker',
                // autocasts as new SimpleMarkerSymbol()
                color: '#f47825'
              }
            },
            {
              value: this.translate.instant('GLOBAL.VEHICLE.STATUS.MOVING'),
              symbol: {
                type: 'simple-marker',
                // autocasts as new SimpleMarkerSymbol()
                color: '#01a8b4'
              }
            },
            {
              value: this.translate.instant(
                'GLOBAL.VEHICLE.STATUS.TRAVELING'
              ),
              symbol: {
                type: 'simple-marker',
                // autocasts as new SimpleMarkerSymbol()
                color: '#035db1'
              }
            },
            {
              value: this.translate.instant('GLOBAL.VEHICLE.STATUS.OFF'),
              symbol: {
                type: 'simple-marker',
                // autocasts as new SimpleMarkerSymbol()
                color: 'grey'
              }
            }
          ]
        };
        pointsRenderer.valueExpressionTitle = this.translate.instant(
          'PAGE_VEHICLE_DETAILS.STATUS'
        );
        pointsRendererL.valueExpressionTitle = this.translate.instant(
          'PAGE_VEHICLE_DETAILS.STATUS'
        );

        //  //////console.log(points);
        const popup = {
          content:
            // tslint:disable-next-line:max-line-length
            '<div id =\'main-div\' style =\'width:100%;position: absolute;top: 37px;right: 0px;bottom: auto;z-index: 1000;-webkit-box-shadow: 0 0 4px 1px rgba(0,0,0,.4); box-shadow: 0 0 4px 1px rgba(0,0,0,.4);background-color: #dcdcdc;pointer-events: visiblePainted;pointer-events: auto;overflow: auto;   display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal; -ms-flex-direction: row;flex-direction: row;-webkit-box-align: stretch;-ms-flex-align:stretch; align-items: stretch;\'>' +
            '<div></div>' +
            '<div style =\'box-sizing: border-box;flex-basis: 100%;width:100%;\'>' +
            '<div style = \'padding: 0;margin: 0;width: 100%; -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);\'>' +
            '<div style = \'height: 40px;color: #fff;background-color: #000;padding: 9px 30px 0 10px;width: 100%;   position: relative;\'>' +
            '<div style = \'overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 210px;  float: left;\'>{name}</div>' +
            '<div style = \'max-width: 140px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;   float: right;\'>' +
            '<span style = \'color: #dcdcdc;\'>{lastUpdate}</span>' +
            '</div>' +
            // tslint:disable-next-line:max-line-length
            '<div style = \'position: absolute;cursor: pointer;top: 0;right: 0;width: 34px;height: 38px;display: -webkit-box; display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;\'>' +
            // tslint:disable-next-line:max-line-length
            // '<div id="closeicon" style="margin-bottom: 3px;">X</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '<div style = \'padding: 8px;height: calc(100% - 40px);width: 100%;\'>' +
            '<div style = \'min-height: 100px;position: relative;display: block;width: 100%;\'>' +
            '<div style=\'visibility: inherit;display: block;height: 100%;\'>' +
            '<div style=\'background-color: #fff;-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), 0 0 2px 0     rgba(0,0,0,.12);box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), 0 0 2px 0 rgba(0,0,0,.12);margin-bottom: 10px;\'>' +
            '<div style =\'max-width: 100%;height: 64px;position: relative;\'>' +
            '<div style = \'padding-right: 14px;padding-left: 14px;margin: 15px 0;width: 75px;height: 34px; font-size: 15px;font-weight: 700;text-transform: uppercase;text-align: center;float: left;\'>' +
            '<img alt=\'truck\' src=\'{imgName}\'>' +
            '</div>' +
            '<div style = \'padding-top: 13px; overflow: hidden; float: left;width:52%;\'>' +
            // tslint:disable-next-line:max-line-length
            '<div style=\'touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);color: #000;font-weight: 700;font-size: 15px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\'>{name}</div>' +
            // tslint:disable-next-line:max-line-length
            '<div style=\'touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);font-size: 12px;color: #4c4c51;margin-bottom: 10px;white-space: nowrap;max-width: 170px;text-overflow: ellipsis;    overflow: hidden;\'>' +
            '{brand}{model} | {serialNumber}' +
            '</div>' +
            '</div>' +
            '<div style = \'width: 80px;float: right;padding-top: 20px;display:inline-flex;position:absolute;margin-left: 5px;    white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\'>' +
            '<div style = \'width: 14px;height: 14px;overflow: hidden;position: relative;border-radius:50%;background-color:{statusColor}\'>' +
            '</div>' +
            '<div style = \'color: {statusColor};font-size: 12px;font-weight: 700;padding-left:5px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;\'>{status}</div>' +
            '</div>' +
            '<div style = \'position: absolute;width: calc(100% - 28px);height: 2px;background-color: #dcdcdc;left: 14px;right: 14px;bottom: 0;\'>' +
            '</div>' +
            '</div>' +
            // tslint:disable-next-line:max-line-length
            '<div style = \'height: 64px;padding: 14px;background-color: #fff;width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content:space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;text-align: center;\'>' +
            '<div style = \'max-width: 33%;width: 33%;flex-basis: 33%; color:#000;\'>' +
            '<div style = \'font-size: 12px;font-weight:800;\'>{engHoursText}</div>' +
            '<div style = \'white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: 500;\'>' +
            '<span style = \'font-size: 24px;font-weight:800;\'>{engHours}</span>' +
            '</div>' +
            '</div>' +
            '<div style = \'flex-shrink: 0;max-width: 33%;width: 33%; flex-basis: 33%;color:#000;\'>' +
            '<div style = \'font-size: 12px;font-weight:800\'>{fuelLevelText}</div>' +
            '<div style = \'white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: 500;\'>' +
            '<span style = \'font-size: 24px;font-weight:800;\'>{fuelLevel}</span>' +
            '</div>' +
            '</div>' +
            '<div  style = \'flex-shrink: 0;max-width: 33%;width: 33%; flex-basis: 33%;color:#000;\'>' +
            '<div style = \'font-size: 12px;font-weight:800;\'>{currentSpeedText}</div>' +
            '<div style = \'white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: 500;\'>' +
            '<span style = \'font-size: 24px;font-weight:800;\'>{speed}</span> Km/h' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '<div style = \'position: relative;height: 24px;text-transform: capitalize;color:#000;\'>' +
            '<div style = \'float: left;\'>{activeAlartTxt}</div>' +
            '</div>' +
            '<div style = \'background-color: #fff;-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), 0 0 2px 0 rgba(0,0,0,.12); box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), 0 0 2px 0 rgba(0,0,0,.12); margin-bottom: 10px;\'>' +
            '<div style = \'display: flex; -webkit-box-align: center;align-items:center;\'>' +
            '<div style = \'width: 100%;\'>' +
            '<div style =\'display: flex;-webkit-box-align: center;align-items: center;padding:10px\'>' +
            '<div id="totalAlerts" style = \'font-size: 12px;color: #707070;text-transform: capitalize;\'> ' +
            '</div>' +
            '<div style=\'float:right;padding-left:212px\'><input type="image" id="alertbut" src="/assets/images/arrow.png" width="22" height="22">' +
            '</div>' +
            '</div>' +
            '</div>' +
            '<div style = \'position: absolute;right: 14px;top: 0;bottom: 0;-webkit-box-pack: center;justify-content: center; font-size: 20px;cursor: pointer;display: flex;-webkit-box-align: center;align-items: center;\'>' +
            // tslint:disable-next-line:max-line-length
            '<span style = \'font-family: cnh-evo-iconfont!important;content: attr(data-icon);font-style: normal!important;font-weight: 400!important;font-variant: normal!important;text-transform: none!important;    line-height: 1;-webkit-font-smoothing: antialiased;\'></span>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '<div style = \'display: flex;justify-content: space-between;padding: 8px 0 0 0;\'>' +
            '<div style = \'width: 100%;float: left;padding-right: 0;\'>' +
            '<button class="\'vehicle-but\'" id="vbut"  style = \'color:#fff; background-color:{brandColor};padding-top:8px;padding-bottom:8px;width: 100%;flex-basis: 100%;\'>' +
            '<span class=\'mat-button-wrapper\'> {vehicleDetailsTxt}</span>' +
            '</button>' +
            '<input type=hidden id="vId"' +
            ' value="{id}"/>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>'
        };
        if (points) {
          // create graphics
          pointsLayer = new EsriFeatureLayer({
            screenSizePerspectiveEnabled: true,
            source: points, // autocast as an array of esri/Graphic
            // create an instance of esri/layers/support/Field for each field object
            fields: fields, // This is required when creating a layer from Graphics
            objectIdField: 'ObjectID', // This must be defined when creating a layer from Graphics
            renderer: pointsRenderer, // set the visualization on the layer
            // feature reduction is set to selection because our scene contains too many points and they overlap
            outFields: ['*'],
            labelsVisible: true,
            id: 'featureLayerId',
            popupTemplate: popup,
            title: this.translate.instant('PAGE_MAP.LEGEND.LEGEND'),
            legendEnabled: true,
            labelingInfo: [
              {
                labelPlacement: 'center-right',
                labelExpressionInfo: {
                  value: '{name}'
                },
                symbol: {
                  type: 'label-3d', // autocasts as new LabelSymbol3D()
                  symbolLayers: [
                    {
                      type: 'text', // autocasts as new TextSymbol3DLayer()
                      material: {
                        color: 'black'
                      },
                      // we set a halo on the font to make the labels more visible with any kind of background
                      halo: {
                        size: 10,
                        color: [255, 255, 255]
                      },
                      size: 10
                    }
                  ]
                }
              }
            ],
            geometryType: 'point'
          });
          pointsLayerL = new EsriFeatureLayer({
            screenSizePerspectiveEnabled: true,
            source: pointsL, // autocast as an array of esri/Graphic
            // create an instance of esri/layers/support/Field for each field object
            fields: fields, // This is required when creating a layer from Graphics
            objectIdField: 'ObjectID1', // This must be defined when creating a layer from Graphics
            renderer: pointsRendererL, // set the visualization on the layer
            // feature reduction is set to selection because our scene contains too many points and they overlap
            outFields: ['*'],
            labelsVisible: true,
            id: 'featureLayerId1',
            popupTemplate: popup,
            title: this.translate.instant('PAGE_MAP.LEGEND.LEGEND'),
            legendEnabled: true,
            geometryType: 'point'
          });
          const defaultSym = new SimpleMarkerSymbol({
            size: 10,
            color: '#FF0000',
            outline: null
          });
          const singleRenderer = new UniqueValueRenderer({
            field: 'customstatustypebrand',
            defaultSymbol: defaultSym,
            uniqueValueInfos: [
              {
                value: 'WORKINGTRACTORSCSAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/working.png',
                  '#25b03d'
                )
              },
              {
                value: 'KEYONTRACTORSCSAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/KeyON.png',
                  '#e7a603'
                )
              },
              {
                value: 'IDLETRACTORSCSAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/Idle.png',
                  '#f47825'
                )
              },
              {
                value: 'MOVINGTRACTORSCSAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/Moving.png',
                  '#F97C5A'
                )
              },
              {
                value: 'TRAVELINGTRACTORSCSAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/Traveling.png',
                  '#035db1'
                )
              },
              {
                value: 'OFFTRACTORSCSAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/Off.png',
                  '#F97C5A'
                )
              },
              {
                value: 'WORKINGTRACTORSNHAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/working.png',
                  '#25b03d'
                )
              },
              {
                value: 'KEYONTRACTORSNHAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/KeyON.png',
                  '#e7a603'
                )
              },
              {
                value: 'IDLETRACTORSNHAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/Idle.png',
                  '#f47825'
                )
              },
              {
                value: 'MOVINGTRACTORSNHAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/Moving.png',
                  '#F97C5A'
                )
              },
              {
                value: 'TRAVELINGTRACTORSNHAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/Traveling.png',
                  '#035db1'
                )
              },
              {
                value: 'OFFTRACTORSNHAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/Off.png',
                  '#F97C5A'
                )
              }
            ]
          });

          const renderer = new ClassBreaksRenderer({
            // defaultSymbol: this.getUniqueValueSymbol(
            //   '/assets/Icon-Vehicle-Cih/CaseTractors/working.png',
            //   '#25b03d')
            // defaultSymbol: defaultSym
          });
          renderer.field = 'clusterCount';

           const smSymbol = new SimpleMarkerSymbol({ size: 20, outline: new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 255, 255, 0.7]), 10), color: [255, 255, 255, 1.0] });
          // const smSymbol = new SimpleMarkerSymbol('circle', 20,
          //   new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([110, 204, 57, .6]), 500),
          //   new Color([110, 204, 57]));
         // const mdSymbol = new SimpleMarkerSymbol('circle', 20, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([241, 211, 87, .7]), 15), new Color([241, 211, 87, 1.0]));
          const mdSymbol = new SimpleMarkerSymbol({ size: 20, outline: new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 255, 255, 0.7]), 10), color: [255, 255, 255, 1.0] });
          // var lgSymbol = new SimpleMarkerSymbol({ size: 50, outline: new SimpleLineSymbol({ color: [41, 163, 41, 0.8] }), color: [51, 204, 51, 0.8] });
          const lgSymbol = new SimpleMarkerSymbol('circle', 20,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 255, 255, .6]), 15),
            new Color([110, 204, 57, .6]));
          const xlSymbol = new SimpleMarkerSymbol({ size: 60, outline: new SimpleLineSymbol({ color: [200, 52, 59, 0.8] }), color: [250, 65, 74, 0.8] });

         const  small = new SimpleMarkerSymbol("circle", 25,
          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([212,116,60,0.5]), 15),
          new Color([212,116,60,0.75]));
         const medium = new SimpleMarkerSymbol("circle", 50,
          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([178,70,37,0.5]), 15),
          new Color([178,70,37,0.75]));
         const large = new SimpleMarkerSymbol("circle", 80,
          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([144,24,13,0.5]), 15),
          new Color([144,24,13,0.75]));
          const  xlarge = new SimpleMarkerSymbol("circle", 110,
          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([102,0,0,0.5]), 15),
          new Color([102,0,0,0.75]));



          renderer.addClassBreakInfo(0, 3, smSymbol);
          renderer.addClassBreakInfo(3, 10, mdSymbol);
          renderer.addClassBreakInfo(10, 100, lgSymbol);
          renderer.addClassBreakInfo(100, Infinity, xlSymbol);
          // renderer.addClassBreakInfo(0, 3, small);
          // renderer.addClassBreakInfo(3, 10, medium);
          // renderer.addClassBreakInfo(10, 100, large);
          // renderer.addClassBreakInfo(100, Infinity, xlarge);

          let areaRenderer;

          // if area display mode is set. Create a renderer to display cluster areas. Use SimpleFillSymbols as the areas are polygons
          const defaultAreaSym = new SimpleFillSymbol({
            style: 'solid',
            color: [0, 0, 0, 0.2],
            outline: new SimpleLineSymbol({ color: [0, 0, 0, 0.3] })
          });

          areaRenderer = new ClassBreaksRenderer({
            defaultSymbol: defaultAreaSym
          });
          areaRenderer.field = 'clusterCount';

          const smAreaSymbol = new SimpleFillSymbol({ color: [255, 204, 102, 0.4], outline: new SimpleLineSymbol({ color: [221, 159, 34, 0.8], style: 'dash' }) });
          const mdAreaSymbol = new SimpleFillSymbol({ color: [102, 204, 255, 0.4], outline: new SimpleLineSymbol({ color: [82, 163, 204, 0.8], style: 'dash' }) });
          const lgAreaSymbol = new SimpleFillSymbol({ color: [51, 204, 51, 0.4], outline: new SimpleLineSymbol({ color: [41, 163, 41, 0.8], style: 'dash' }) });
          const xlAreaSymbol = new SimpleFillSymbol({ color: [250, 65, 74, 0.4], outline: new SimpleLineSymbol({ color: [200, 52, 59, 0.8], style: 'dash' }) });

          areaRenderer.addClassBreakInfo(0, 3, smAreaSymbol);
          areaRenderer.addClassBreakInfo(3, 10, mdAreaSymbol);
          areaRenderer.addClassBreakInfo(10, 100, lgAreaSymbol);
          areaRenderer.addClassBreakInfo(100, Infinity, xlAreaSymbol);

          // Set up another class breaks renderer to style the flares individually
          const flareRenderer = new ClassBreaksRenderer({
            defaultSymbol: renderer.defaultSymbol
          });
          flareRenderer.field = 'clusterCount';

          const smFlareSymbol = new SimpleMarkerSymbol({ size: 10, color: [255, 204, 102, 0.8], outline: new SimpleLineSymbol({ color: [221, 159, 34, 0.8] }) });
          const mdFlareSymbol = new SimpleMarkerSymbol({ size: 10, color: [102, 204, 255, 0.8], outline: new SimpleLineSymbol({ color: [82, 163, 204, 0.8] }) });
          const lgFlareSymbol = new SimpleMarkerSymbol({ size: 10, color: [51, 204, 51, 0.8], outline: new SimpleLineSymbol({ color: [41, 163, 41, 0.8] }) });
          const xlFlareSymbol = new SimpleMarkerSymbol({ size: 10, color: [250, 65, 74, 0.8], outline: new SimpleLineSymbol({ color: [200, 52, 59, 0.8] }) });

          flareRenderer.addClassBreakInfo(0, 3, smFlareSymbol);
          flareRenderer.addClassBreakInfo(3, 10, mdFlareSymbol);
          flareRenderer.addClassBreakInfo(10, 100, lgFlareSymbol);
          flareRenderer.addClassBreakInfo(100, Infinity, xlFlareSymbol);

          // set up a popup template
          const popupTemplate = new PopupTemplate({
            title: '{name}',
            content: [{
              type: 'fields',
              fieldInfos: [
                { fieldName: 'type', label: 'Facility Type', visible: true },
                { fieldName: 'name', label: 'Post Code', visible: true }
              ]
            }]
          });


          const options = {
            id: 'flare-cluster-layer',
            clusterRenderer: renderer,
            areaRenderer: areaRenderer,
            flareRenderer: flareRenderer,
            singleRenderer: singleRenderer,
            singlePopupTemplate: popup,
            spatialReference: new SpatialReference({ 'wkid': 4326 }),

            clusterRatio: 50,
            clusterAreaDisplay: 'always',
            data: data1,
            zoomOnClick: true,
            subTypeFlareProperty: "customstatustypebrand",
            singleFlareTooltipProperty: "name",
            displaySubTypeFlares: true,
            maxSingleFlareCount: maxSingleFlareCount,



          };

          //////console.log(options);

          clusterLayer = new fcl.FlareClusterLayer(options);




          this.map.add(pointsLayerL);
          this.map.add(clusterLayer);
          ////console.log(pointsLayerL);
          // this.map.add(pointsLayer);

          // clusterLayer.draw(this.map);

          //

          console.log(clusterLayer);
          clusterLayer.on("draw-complete", function () {
            flagcheck =false;
            //console.log('draw complete event callback');
          });
          clusterLayer.on("click", function () {
            alert("test");
          });
          const doc = document.getElementsByClassName('.esri-search__submit-button');
          const color = this.getBrandColor();
          if (doc.length !== 0) {
            doc[0]['style'].backgroundColor = color;
          }


        }
        const selectedGraphic = new Graphic({
          geometry: points[0].geometry,
          symbol: {
            type: "simple-marker",
            style: "circle",
            color: "orange",
            size: "12px", // pixels
            outline: { // autocasts as new SimpleLineSymbol()
              color: [255, 255, 0],
              width: 2 // points
            }
          }
        });
        selectedGraphic.popupTemplate = popup;
        //mapView.graphics.add(selectedGraphic);

        ////console.log(mapView.map.allLayers.items[3].data);

        //////console.log(mapView.graphics);
        const screenPoint = {
          x: 595.6000366210938,
          y: 166
        };


        ////console.log(webMercatorUtils.lngLatToXY(vehicle.location[1], vehicle.location[0]));

        ////console.log(screenPoint);


        // Search for graphics at the clicked location
        // mapView.hitTest(screenPoint).then(function (response) {
        //   //alert("test");
        //   var result = response.results[0];
        //   ////console.log(response.results);
        //   ////console.log(result);

        //   if (!result.graphic.popupTemplate) {

        //     var lon = result.mapPoint.longitude;
        //     var lat = result.mapPoint.latitude;
        //     //////console.log(zoom);

        //     mapView.goTo({
        //       // center: [result.graphic.geometry.longitude,result.graphic.geometry.latitude],
        //       center: [result.graphic.geometry['longitude'], result.graphic.geometry['latitude']],
        //       zoom: zoomvar
        //     });

        //   }

        // });

      });
    // clusterLayer.on("clusters-shown", onClustersShown);

    // mapView.popup.dockEnabled = true;
    // mapView.popup.dockOptions = { buttonEnabled: false };
    // // mapView.popup.actions = [];

    mapView.popup.alignment = 'top-right';

    // Get the screen point from the view's click event
    // ////console.log(mapView);
   
    let zoomvar = 10;

    mapView.on('click', function (event) {

      setTimeout(() => {



        const elm = document.getElementById('vbut');
        if (elm !== null) {
          elm.onclick = function () {
            // tslint:disable-next-line:no-shadowed-variable
            const evnt = new CustomEvent('CallAngularService');

            window.dispatchEvent(evnt);
          };
        }

        const alertelm = document.getElementById('alertbut');
        if (alertelm !== null) {
          alertelm.onclick = function () {
            // tslint:disable-next-line:no-shadowed-variable
            const evnt = new CustomEvent('CallAlertService');

            window.dispatchEvent(evnt);
          };
        }


        const evnt = new CustomEvent('CallTotalAlertService');
        window.dispatchEvent(evnt);


      }, 10);

      
      const screenPoint = {
        x: event.x,
        y: event.y
      };
     
      //console.log(event);
     
     

      // Search for graphics at the clicked location
      mapView.hitTest(screenPoint).then(function (response) {
        
        //console.log(response.results);
        const result = response.results[0];
        //console.log(result.graphic);
        //console.log(result.graphic.attributes.clusterCount);
        
        const evt = new CustomEvent('CallHighlightService');

        //window.dispatchEvent(evt);
        //console.log(result.graphic.attributes.x);
            if(result.graphic.attributes.x!=undefined){
              zoomvar+= 2;
            // alert("inside clusterobject");
            // alert(result.graphic.attributes.clusterCount);
            console.log(result.graphic.attributes);
            if(result.graphic.attributes.clusterCount>=2){
              mapView.goTo({
                //center: [result.graphic.geometry["longitude"],result.graphic.geometry["latitude"]],
               center: [result.graphic.attributes["clusterObject"].points[0][0],result.graphic.attributes["clusterObject"].points[0][1]],
               zoom: zoomvar,
             });

            }else{
              console.log(result.graphic.attributes);
              mapView.goTo({
                //center: [result.graphic.geometry["longitude"],result.graphic.geometry["latitude"]],
               center: [result.graphic.attributes["clusterObject"].points[0][0],result.graphic.attributes["clusterObject"].points[0][1]],
               zoom: zoomvar
             });
            }
            
            
        }else{
          alert("outside clusterobject");
           console.log(result);
          mapView.goTo({
            //center: [result.graphic.geometry["longitude"],result.graphic.geometry["latitude"]],
           center: [result.graphic.geometry["longitude"],result.graphic.geometry["latitude"]],
           zoom: 9

        });

      }

      });


    });





    //  ////console.log(mapView);

    const legend = new EsriLegend({
      view: mapView,
      layerInfos: [{
        layer: clusterLayer,
        title: 'NY Educational Attainment'
      }]

    });

    mapView.ui.empty('top-left');
    const bgExpand1 = new Expand({
      view: mapView,
      content: '<div> <cnh-map-legend style = "position: absolute;left: 27px;bottom: 24px;z-index: 5000;">' +
        '<div style = "display: block; width: 164px; min-height: 40px; background-color:rgba(0,0,0,.8);box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);color: #fff;border-radius: 2px;">' +
        '<cnh-map-legend-header style = "border-bottom: 1px solid #707070;text-align:center;top: 0; right: 0;bottom: 0; z-index: 100;height: 40px; width: 100%;font-size: 12px;display: block;">' +
        '<div style ="margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline; font-size: inherit;">' +
        '<div style ="margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;font-size: inherit;line-height:40px;height:100%"> LEGEND </div>' +
        '</div> </cnh-map-legend-header>' +
        '<cnh-map-legend-list-simple style = "margin: 0; border: 0; font-size: 100%;font: inherit;vertical-align: baseline;font-size: inherit;">' +
        ' <div style = "padding: 14px;font-size: 12px; font-weight: 400; color: #f3f6f9; text-transform: uppercase;">' +
        '<div style ="vertical-align: baseline;">Vehicle status</div>' +
        '<cnh-map-legend-item-simple style ="box-sizing: border-box;">' +
        '<div style ="width:100%;  height: 30px;display: flex;justify-content: flex-start; align-items: center;">' +
        '<div style="flex-basis: 20%;"> <span style="width: 18px; height: 18px;border-radius: 100%;display: block;background-color: #25b03d;"></span>' +
        '</div>' +
        '<div style="flex-basis: 80%;font-size: 11px;color: #fff;padding-left: 5px;"> In work </div>' +
        '</div>' +
        '</cnh-map-legend-item-simple>' +
        '<cnh-map-legend-item-simple>' +
        '<div style="width: 100%; height: 30px;justify-content: flex-start;align-items: center; display: flex;">' +
        '<div style = "flex-basis: 20%">' +
        '<span style = "width: 18px; height: 18px; border-radius: 100%;display: block; background-color: #e7a603;"></span>' +
        '</div>' +
        '<div style ="flex-basis:80%;font-size: 11px; color: #fff;padding-left: 5px;">Key On</div>' +
        '</div>' +
        '</cnh-map-legend-item-simple>' +
        '<cnh-map-legend-item-simple style = "">' +
        '<div style="width: 100%;height: 30px; display: flex;align-items: center;">' +
        '<div style = "flex-basis: 20%"><span style = "    width: 18px;height: 18px;border-radius: 100%;display: block;background-color: #f47825;"></span>' +
        '</div>' +
        '<div style ="flex-basis: 80%;font-size: 11px; color: #fff;padding-left: 5px;">IDLE</div>' +
        '</div>' +
        '</cnh-map-legend-item-simple>' +
        '<cnh-map-legend-item-simple style = "">' +
        '<div style="width: 100%;height: 30px; display: flex;justify-content: flex-start;align-items: center;">' +
        '<div style = "flex-basis: 20%">' +
        '<span style = "width: 18px;height: 18px;border-radius: 100%;display: block;background-color: #01a8b4;"></span>' +
        '</div>' +
        '<div style ="flex-basis: 80%;font-size: 11px;color: #fff;padding-left: 5px;">Moving</div>' +
        '</div>' +
        '</cnh-map-legend-item-simple>' +
        '<cnh-map-legend-item-simple style = "">' +
        '<div style="width: 100%;height: 30px;display: flex;justify-content: flex-start;align-items: center;">' +
        '<div style = "flex-basis: 20%">' +
        '<span style = "    width: 18px;height: 18px;border-radius: 100%;display: block;background-color: #035db1;"></span>' +
        '</div>' +
        '<div style ="flex-basis: 80%;font-size: 11px;color: #fff;padding-left: 5px;">TRAVELING</div>' +
        '</div>' +
        '</cnh-map-legend-item-simple>' +
        '<cnh-map-legend-item-simple style = "">' +
        '<div style="width: 100%;height: 30px;display: flex;justify-content: flex-start;align-items: center;">' +
        '<div style = "flex-basis: 20%">' +
        '<span style = "width: 18px;height: 18px;border-radius: 100%;display: block;background-color: #adadad;"></span>' +
        '</div>' +
        '<div style ="flex-basis: 80%;font-size: 11px;color: #fff;padding-left: 5px;"> OFF</div>' +
        '</div>' +
        '</cnh-map-legend-item-simple>' +
        '</div>' +
        '</cnh-map-legend-list-simple>' +
        '</div>' +
        '</cnh-map-legend>' +
        '</div>'
    });
    // mapView.ui.add(bgExpand1, 'bottom-left');
    const searchWidget = new EsriSearch({
      view: mapView
    });
    searchWidget.watch('visible', function () {
      alert("searchwidgetclick");
    });
    // searchWidget.startup();
    mapView.ui.add(searchWidget, 'top-left');

    const basemapGallery = new BasemapGallery({
      view: mapView,
      container: document.createElement('div')
    });

    // Create an Expand instance and set the content
    // property to the DOM node of the basemap gallery widget
    // Use an Esri icon font to represent the content inside
    // of the Expand widget
    const bgExpand = new Expand({
      view: mapView,
      content: basemapGallery
    });
    const zoom = new Zoom({
      view: mapView
    });

    mapView.ui.add(zoom, 'top-right');

    // close the expand whenever a basemap is selected
    basemapGallery.watch('activeBasemap', function () {
      // const mobileSize =
      //   mapView.heightBreakpoint === 'xsmall' ||
      //   mapView.widthBreakpoint === 'xsmall';

      // if (mobileSize) {
      //   bgExpand.collapse();
      // }
    });
    const locateBtn = new Locate({
      view: mapView
    });
    // Add the expand instance to the ui
    mapView.ui.add(bgExpand, 'top-right');
    mapView.ui.add(locateBtn, 'top-right');

    // Add a legend instance to the panel of a
    // ListItem in a LayerList instance
    const layerList = new LayerList({
      view: mapView,
      listItemCreatedFunction: function (event) {
        const item = event.item;
        //////console.log(item);
        if (item.layer.type !== 'group') {
          // don't show legend twice
          if (item.layer.type === 'graphics') {
            //////console.log("test");
            item.layer.listMode = 'hide';
            // event.preventDefault();
          } else {
            if (item.layer.renderer.field === 'status1') {
              item.panel = {
                content: 'legend',
                open: false,
                //click:alert("test")
              };
            } else {
              item.layer.listMode = 'hide';
            }
          }
        } else {
          item.layer.listMode = 'hide';
        }
      },

      createActionsFunction: this.defineActions
    });
    //  //////console.log(layerList);
    mapView.ui.add(layerList, 'bottom-left');

    layerList.on("trigger-action", this.toggleRenderer);


    mapView.popup.watch('visible', function (evt) {


      setTimeout(() => {
        const elm = document.getElementById('vbut');
        if (elm !== null) {
          elm.onclick = function () {
            const event = new CustomEvent('CallAngularService');

            window.dispatchEvent(event);
          };
        }

        const alertelm = document.getElementById('alertbut');
        if (alertelm !== null) {
          alertelm.onclick = function () {
            const event = new CustomEvent('CallAlertService');

            window.dispatchEvent(event);
          };
        }

        if (evt === true) {
          const event = new CustomEvent('CallTotalAlertService');
          window.dispatchEvent(event);
        }

        // const closeicon = document.getElementById('closeicon');
        // if (closeicon !== null) {
        //   closeicon.onclick = function () {
        //     const event = new CustomEvent('CallCloseService');

        // window.dispatchEvent(event);
        //  };
        // };
      }, 10);
    });

  });



  setTimeout(() => {
    // //////console.log('called');
    const doc = document.getElementsByClassName('esri-search__submit-button');
    const color = this.getBrandColor();
    if (doc.length !== 0) {
      doc[0]['style'].backgroundColor = color;
    }
  }, 1000);

  this.mapDataLoaded = true;

}
catch (error) {
  alert('We have an error: ' + error);
}

}
toggleRenderer(evt) {
alert(evt);

}

@HostListener('window:CallHighlightService')
onCallHighlightService() {
setTimeout(() => {
const id = document.getElementById('vId')['value'];
this.apiService.getVehicleDataById(id).subscribe(response => {
this.fleetdata.vehicleId = response;
this.fleetdata.showMapVehicleInfo = true;
this.ngOnInit();
this.selectedVehicleService.updateSelectedVehicle(this.fleetdata.vehicleId);

  });
}, 10);

}
@HostListener('window:CallAngularService')
onCallAngularService() {
// Run your service call here
const id = document.getElementById('vId')['value'];
this.apiService.getVehicleDataById(id).subscribe(response => {
const data = { vehicleData: response };
this.fleetdata.storage = [];
this.fleetdata.storage = data;
this._router
.navigateByUrl('/', { skipLocationChange: true })
.then(() => this._router.navigate(['/fleet/vehicalInfo']));
});
}
@HostListener('window:CallAlertService')
onCallAlertService() {
// Run your service call here
const id = document.getElementById('vId')['value'];
this._router.navigate(['/fleet/faults/detail/' + id]);
}
@HostListener('window:CallTotalAlertService')
onCallTotalAlertService() {
// Run your service call here
let id = document.getElementById('vId');
if (id !== null) {
id = id['value'];
}
this.getTotalAlerts(id);
}

@HostListener('window:CallCloseService')
onCallCloseService() {
alert('test');
}
getimage(type: any): any {
let imgUrl = null;
if (type === 'TRACTORS') {
imgUrl =
'/assets/Icon-Vehicle-Cih/icon-vehicle-cih-tractor-cch-medium.png';
} else {
imgUrl = '/assets/Icon-Vehicle-Cih/icon-vehicle-cih-combine-medium.png';
}
return imgUrl;
}
getStatusDate(date: any): any {
const statusDate = this.datepipe.transform(new Date(date), 'MM/dd/yyyy');
return statusDate;
}

calulateHeight() {
if (this.userService.getBrand() === BrandNames.CIH) {
return this.filtersBarOpen
? window.innerHeight - 215 + 'px'
: window.innerHeight - 170 + 'px';
} else {
return this.filtersBarOpen
? window.innerHeight - 255 + 'px'
: window.innerHeight - 210 + 'px';
}
}

getVehicleDetail(name: any, arr: any): any {
let response: any = this.translate.instant('GLOBAL.NO_DATA');

if (name === 'engHours') {
  if (arr.parameters === undefined) {
    return '0';
  } else {
    arr.parameters.forEach(element => {
      if (element.label === 'Engine hours') {
        response =
          Math.round(element.value * 100) / 100 + '' + element.unit;
      }
    });
  }
} else if (name === 'fuelLevel') {
  if (arr.parameters === undefined) {
    return '0';
  } else {
    arr.parameters.forEach(element => {
      if (element.label === 'Fuel tank level') {
        response = (Math.round(element.value * 100) / 100) + '' + element.unit;
      }
    });
  }
}
return response;

}
// Function that automatically creates the symbol for the points of interest
getUniqueValueSymbol(name, color) {
const verticalOffset = {
screenLength: 40,
maxWorldLength: 200,
minWorldLength: 35
};
// The point symbol is visualized with an icon symbol. To clearly see the location of the point
// we displace the icon vertically and add a callout line. The line connects the offseted symbol with the location
// of the point feature.
return {
type: 'point-3d', // autocasts as new PointSymbol3D()
symbolLayers: [
{
type: 'icon', // autocasts as new IconSymbol3DLayer()
resource: {
href: name
},
outline: {
color: [0, 0, 0, 255],
width: 1,
type: 'esriSLS',
style: 'esriSLSSolid'
},
size: 30
}
],

  verticalOffset: verticalOffset

  // callout: {
  //  type: "line", // autocasts as new LineCallout3D()
  //  color: "white",
  //  size: 2,
  //  border: {
  //    color: color
  //  }
  // }
};

}
checkStatus(status) {
switch (status) {
case 'KEYON':
return '#e7a603';
case 'OFF':
return 'grey';
case 'WORKING':
return '#25b03d';
case 'MOVING':
return '#01a8b4';
case 'Keyon':
return '#e7a603';
case 'IDLE':
return '#f47825';
case 'TRAVEL':
return '#035db1';
default:
return 'black';
}
}

getBrandColor() {
switch (this.userService.getBrand()) {
case BrandNames.CIH:
return BrandColors.CIH;

  case BrandNames.NH:
    return BrandColors.NH;

  default:
    break;
}

}

getTotalAlerts(id) {
let count: any = 0;
let res: any = null;
this.apiService.getUnitFaults(id).subscribe(response => {
res = response;
if (res['content'] !== undefined) {
res['content'].forEach(element => {
if (element.severity === 'HIGH') {
count += element.occurrences;
}
});
if (count > 0) {
this.result =
'' +
count +
' ' +
'' +
this.translate.instant('PAGE_MAIN.ALERTS.HIGH_FAULTS') +
'';
document.getElementById('totalAlerts').innerHTML = this.result;
} else {
document.getElementById(
'totalAlerts'
).innerHTML = this.translate.instant(
'PAGE_MAIN.ALERTS.NO_ACTIVE_ALERTS'
);
}
} else {
const doc = document.getElementById('totalAlerts');
if (doc !== null) {
doc.innerHTML = this.translate.instant(
'PAGE_MAIN.ALERTS.NO_ACTIVE_ALERTS'
);
}
}
});
}
ngOnInit() {
this.navMapService.selectedOption = 'map';
this.mapDataLoaded = true;
// alert('test2');
this.totalMapheight = this.calulateHeight();

// ////console.log(mapView);
// ////console.log(this.map);
// ////console.log(this._zoom);
if (this._zoom === 3) {
  // alert("test");
  // this.initializeMap();
} else {
  // this.initializeMap();
  ////////console.log(mapView);
}
const dojoConfig = {
  has: {
    'esri-featurelayer-webgl': 1
  }
};


this.fleetType = this.fleetService.getFleetType();
this.filterValue = this.fleetService.getFilterValue();
this.fleetService.fleetType$.subscribe(data => {
  if (data !== null) {
    if (this._router.url === '/fleet/overview/map') {
      this.vType = data;

      let arr = [];
      const vObj = {};
      // tslint:disable-next-line:forin
      for (const key in this.vType) {
        if (this.vType.hasOwnProperty(key)) {
          const val = this.vType[key];
          val.forEach(element => {
            if (element['location'] !== undefined) {
              arr.push(element);
            }
          });
        }
        vObj[key] = arr;
        arr = [];
      }
      this.fleetType = vObj;
    } else {
      this.fleetType = data;
    }
    this.vehicleDataLoaded = this._fleetfilterStore.vehicleDataLoaded;
  }
});

this.fleetService.vehicleType$.subscribe(data => {
  if (data !== null) {
    if (this._router.url === '/fleet/overview/map') {
      this.vType = data;
      let count = 0;
      let arr = [];
      const vObj = {};
      // tslint:disable-next-line:no-var-keyword
      // tslint:disable-next-line:forin
      for (const key in this.vType) {
        if (this.vType.hasOwnProperty(key)) {
          const val = this.vType[key];
          val.forEach(element => {
            if (element['location'] !== undefined) {
              arr.push(element);
            }
          });
        }
        vObj[key] = arr;
        count += arr.length;
        arr = [];
      }
      this.vehicleType = vObj;
    } else {
      this.vehicleType = data;
    }

    this.vehicleDataLoaded = this._fleetfilterStore.vehicleDataLoaded;
  }
});

this.fleetService.fleetTypeCollapse$.subscribe(data => {
  this.fleetTypeCollapse = data;
});

this.fleetService.clickedId$.subscribe(id => {
  this.clickedId = id;
});

this.collapse = this.fleetService.getCollapseValue();

this.fleetTypeCollapse = this.fleetService.getFleetTypeCollapse();

this.vehicleTypeCollapse = this.fleetService.getVehicleTypeCollapse();
this.filterOptions = this.fleetService.getFilterOptions();

this.titleValue = this.fleetService.getTitleValue();

}

exportID(vehicle) {
this.vehicleId.emit(vehicle.id);
}

changeRoute(vehicle) {

this.ngOnInit();
this.ngAfterViewInit();
this.fleetdata.vehicleId = vehicle;
//this.mapDataLoaded = false;
this.initializeMap(vehicle);

// mapView.goTo({
//   center: [vehicle.location[1], vehicle.location[0]],
//   zoom: 18
// });
// alert('test1');
const divScrollElement = this.panel.nativeElement.querySelector('.ps__rail-y').attributes.style;
const scrollCurrentTopPosition = divScrollElement.value
  .split(';')[0]
  .substring(4, divScrollElement.value.split(';')[0].length - 2);
localStorage.setItem('scrollTop', scrollCurrentTopPosition);

vehicle['imageUrl'] = this.utilService.getImageUrl(vehicle);
const id = vehicle.id;
const name = vehicle.name;

this.fleetService.vId = id;
this.fleetService.vName = name;

this.selectedVehicleService.updateSelectedVehicle(vehicle);

const currentRoute = this._location
  .path()
  .substring(1)
  .split('/')[1];

this.fleetdata.vehicleDetail = vehicle;
this.fleetdata.showMapVehicleInfo = true;

}

resetRoute() {
this.clickedId = '';

this.fleetService._clickedId.next(0);
this.fleetService._elementCount.next(0);

const currentRoute = this._location
  .path()
  .substring(1)
  .split('/')[1];

this.fleetService.vName = this.updatedCount + ' Fleets';
this.fleetService.vId = this.updatedVCount + ' Vehicles';

const doc = document.getElementsByClassName('list-active');

this.fleetdata.vehicleDetail = null;
this.fleetdata.vehicleId = null;

if (doc.length !== 0) {
  doc[0].classList.remove('list-active');
}
if (this._router.url === '/fleet/overview/map') {
  this.fleetdata.showMapVehicleInfo = false;
} else {
  // this._router.navigate(['/fleet/service']);
}

}

updateCollapseValue(collapse) {
this.fleetService.setCollapseValue(collapse);
}

updateFilterValue(filterValue) {
this.fleetService.setFilterValue(filterValue);
}

// tslint:disable-next-line:use-life-cycle-interface
ngAfterViewInit() {
setTimeout(() => {
if (this.directiveScroll !== undefined) {
this.directiveScroll.directiveRef.scrollToElement('.list-active');
const item = localStorage.getItem('scrollTop');
if (typeof item !== 'undefined') {
this.directiveScroll.directiveRef.scrollToTop(+item);
localStorage.setItem('scrollTop', '0');
} else {
this.directiveScroll.directiveRef.scrollToTop();
}
}
const doc = document.getElementsByClassName('list-active');
// if (this._router.url === '/fleet/faults/overview') {
// if (doc.length !== 0) {
// doc[0].classList.remove('list-active');
// }
// }
if (doc.length === 0) {
this.showReset = false;
} else {
this.showReset = true;
}
}, 10);

}

valuechange($event, item) {
this.fleetService.setFilterValue($event.id);
this.filterValue = $event.id;
}
navOverview() {
this._router.navigate(['/fleet/overview']);
}
}

Creating multiple FCL's on the same map

Got another question for you Nick. Is there a way to add multiple FCLs (V3) to a map with different default simple marker symbols?

Angular 2

Hi Nick, work in this project!
I want to use this in my project in angular 2 but is not that straightforward, is it possible to have an implementation of this in angular 2 or more detail explanation using systemjs and esriSystem??

Activated cluster group does not show properly

Hi,

I noticed in the demo, and in my own project that when a cluster group gets activated, for certain clusters, the cluster and its associated flares do not render properly. I've been taking a look at the code personally to fix it, and I wanted to ask if you had any tips or ideas as to where in the code this issue could be, and what could be causing it?

Here's a screenshot of the issue:

Also, in the screenshot, what exactly is that invisible box (the one that is cutting off the flares of the cluster) that contains the cluster, and its flares? Is that the reason for it not rendering properly?

I do want to note that it seems browser dependent as well. I've tested it on Firefox, and IE, and the issue doesn't crop up. However, in Chrome it does.

Anyways, any help would be appreciated!

Show popup when clicking on an individual clustered graphic

I've just come across this awesome repo (I can't believe it still isn't core functionality!) and have only looked your demo so far, not the raw code.

When clicking on a cluster icon, the individual markers in that cluster are shown, and when hovering over an individual marker you see its tooltip ("Red Rock" in this example):

I was hoping to see a popup when I click on the Red Rock graphic, similar to that seen when you click on a non-clustered graphic:

Is it possible to show the full popup when clicking on a clustered graphic? Thanks

JSAPI 4.1 TypeScript

I'm running into an issue with the 4.1 typescript file. I had been using the 4.2 which was working beautifully, but ran into a separate bug in the ESRI code with removing a FeatureLayer and need to fall back to the 4.1 API. I'm running Angular 2 and load with systemjs. When the 4.1 typescript file is loaded, the constructor is throwing an error on the following line:
this.on("layerview-create", (evt) => this.layerViewCreated(evt));

The exception is "EXCEPTION: TypeError: _this.on is not a function". Its almost as though the transpiled JS isn't understanding what 'this' should be. Any ideas on this?

how to dynamics add point

"import * as X" versus "import X" with esri Modules

Note: This is NOT an issue with your project, but more of a question because of my lack of competence and you seem very competent.

Hi Nickcam,
First of all: Amazing project! I would love to use it in my project. I'm having one question though.

Your way of importing esri modules, like for example:

import * as Graphic from "esri/Graphic";

does not work when I use your .ts file in my project, because it cannot find the constructor of the esri Modules. I usually need to import them like

import Graphic from "esri/Graphic";

Any idea what that could be?

I am using the exact same tsconfig.json settings, but I'm transpilling with tsc instead. Also I have included the typings.

FlareClusterLayer does not work in IE

It seems FlareClusterLayer does not work in IE, After zoom-in or Pan, Cluster symbols do not show and cluster count remains on map. It works perfect in Chrome.

JSAPI V 4.2 compatibility

Hi Nick
Looks like version 4.2 of the JSAPI has been released a few days ago - unfortunately the documentation is not up to date yet, but it seems to be breaking FCL.

It cannot find the 2D VectorGroup - hopefully it was just renamed/moved and not removed from the JSAPI.

PS. let me know if there is some way to donate something to your great work! I could really use this feature in my application, but we also need the new features of 4.2 :)

Best regards
Netik

Flares do not activate when a completely new cluster layer is initialized

Apologies for another issue at hand. But I ran into this issue when I started testing out my code that destroys the previous cluster layer and completely instantiates a new cluster layer on the map.

To be clear, I'm storing the cluster layer globally and adding it to the map (specifically a group layer) when I first initialize it, and then when I decide to go create a new one, I make sure to remove the cluster layer from the group layer, and set the global variable to be null, so there's no references whatsoever to the cluster layer anymore.

Now getting to the issue at hand, when I create a new one, with the same process as mentioned above (store globally, adding to group layer), and I try to hover over a cluster to see the flares associated with the cluster, it does not show the flares for any of the clusters anymore.

I did do some digging today and noticed when it tried to activate the cluster, it could the not find the cluster id in the associated this.clusters object.

                    var cluster = _this._clusters[g.attributes.clusterId];

I believe that is the issue, but I do not understand why it would it would not be there anymore.

Anyways, as usual, any help at all is appreciated!

Licence and commercial use

I'm working on adjusting this application for use in a commercial web application for a customer who might be paranoid about potential legal gotchas. As there is no license file, I hope it is public domain, but I would prefer to be sure. So, what kind of license is this app?

Integrating with react-arcgis.

Hey Nick!

Thank you so much for creating this library. I'm having bit of a trouble integrating it into an application i am working on.
The project uses (React-arcgis NPM library)[https://www.npmjs.com/package/react-arcgis] and we're trying to implement clustering on the map.
I am able to initialize the FeatureClusterLayer object but when i add it to the map, it provides me with an error saying 'the object added is neither a layer nor a promise that resolves to a layer.'

The WIP branch is here:
https://github.com/bcgov/mds/tree/feature/clustering/frontend

I had to include the library as just a github import since it's not published as a npm module:
https://github.com/bcgov/mds/tree/feature/clustering/frontend/src/FlareClusterLayer

I updated the FlareClusterLayer_v4.js so that I can import the FlareClusterLayer object.
I am using the import in this file:
https://github.com/bcgov/mds/blob/feature/clustering/frontend/src/components/maps/MinePin.js

I know you may not be familiar with the stack or the issue, but i'm mostly here to brainstorm or in case you may have run into this in past?
Let me know.

Thanks

Details:
Languages - React.js
Arcgis 4.8

Arcgis for js 4.9

Hi,nick.At first,my English is not good.I have a problem when introducing this FlareClusterLayer_v4.js to my Vue project.I received an error message,but I can't say it very clearly.So please see the attachment I uploaded for details.

Tooltip for individual points

Is it possible to activate/add tooltip similar to cluster flare tooltip, for individual points which are not in cluster ?

Reclustering when panning?

Just wondering why it reclusters when you pan the map and all of the data is in the extent before and after the pan?

Btw, I think this is amazing and I plan on implementing it in our application.

Print Cluster Layer with the Esri 4.x Api Print Widget

Has anyone had any luck getting the Cluster layer to appear in the pdf print-out that is produced by the Esri api's Print Widget? Currently, the Cluster layer does not show up at all in the pdf print-out.

Does anyone know what it would take to be able to get this to work?

Thanks!

how to solove the question : execute too many times

i will realise an effect that when view zoom than 14, view will remove FlareClusterLayer, and add a FeatureLayer, but the FlareClusterLayer has been execute. below is my code 🔢

init...
zoom watch
run app, and drag the view 、zoom the view too many times, the app will be caton ，and print

draw-data-3d: xx.xxxxxx ms

the memory is rising

What clustering algorithm do you use?

There is something wrong with the 4.12 API

Hi,This is my first use the FlareClusterLayer，I‘m trying to run the index_v4.html file in the demo，but the graphics do not show，only when the mouse moved on it，the map only show the moused one，when I am trying to use the 4.11 API all of it seems all right. Is this a bug for 4.12 API?

use vueJS to finish aggregation analysis

Looking forward to use vueJS to finish aggregation analysis

Getting node_module error while running application

Hi @nickcam,
First of all I would like to thank you for this clustering part. I am facing some issue while running your code. I have cloned you code. Then I write "npm install" command in visual code studio. I am getting "no such file or directory, open '..\projects\9-3-2019\FlareClusterLayer\node_modules.staging\semver-6e4f5872\package.json'. I am missing some libraries or what. I am new to Angular also.

'Always' mode in 4.0 example

Does the 'always' mode for the 'Display cluster area mode' work in your 4.0 example?

Use with other projection (27700)

Hi,

I am trying to make it work in British National Grid (27700).
It came up with an error message when trying to get the "webExtent" in the code, which I "solved" by using the geometry service project tool instead. All the clusters seem to generate ok in code(although only when I pass decimal degrees coordinates), but they don't show on the map.

Any idea?

Thanks,
Matt

Chrome issue: flares do not line up after panning the map

Hi Nick,

We noticed an issue with the FCL v3 while using it in Chrome. If you pan the map and then hover over a cluster, the flares tend to show up around the clusters previous position instead of it's new position. The flares position does get reset to the new position though if the zoom level changes. I used the plnkr you've made for me before to take a few screenshots to illustrate the issue.

Normal flare position:

After panning to the left:

After panning to the right:

Not sure if you were aware of this or not.
Cheers,
Dumitru

Using in Angular app

when i do this https://github.com/Esri/esri-loader#configuring-dojo
i dont need to npm install dojo typings right?
somehow its giving me
http://localhost:4200/fcl/FlareClusterLayer_v3.js net::ERR_ABORTED 404 (Not Found)

thank you

Originally posted by @dealsmyself in #22 (comment)

Graphics not displaying

I have been trying to use your FlareClusterLayer with a REST service that returns JSON of points. I am using the GraphicsLayer base class load function to call the REST service and store the point data as the FlareClusterLayer._data. After that I call the draw function.

I can see console log statements when I pan around that tell me if the data is clustered or not during the draw function. I cannot get any graphics to show up on the map. I am not familiar with what part of your code loads the graphics in the view. Maybe you have some insight that could help me. Thank you much.

flareCluster displaced when map is not full body, and after pan

Hi nickcam,

thanks for your cluster extension. I tried to used it in map instance which is not 100% of the body span. I noticed flareCluster has been displaced from the cluster group center on mouseover. I'm attaching screenshot of that.
Thanks in advance for your input on that issue.

only support webMercator basemap?

hi, @nickcam . i like this flareclusterlayer very much. thanks your share. but i found that the source code seems convert all graphic to webMercator project? does it means that the layer only can add to webMercator basemap?

checking the mouse point inside the actual circle of the cluster group and it's flares instead of using the rectanglar bounding box

HI Nick,

Im working on finding the mouse pointer inside the cluster group circle and show the flares because the rectangle box is not working for me.Do you know how to find the mouse pointer inside the cluster group and see if the pointer is inside or not.

FlareClusterLayer.prototype._viewPointerMove = function (evt) {
//alert("pointermove");
var _this = this;
var mousePos = this._getMousePos(evt);

        // if there's an active cluster and the current screen pos is within the bounds of that cluster's group container, don't do anything more. 
        // TODO: would probably be better to check if the point is in the actual circle of the cluster group and it's flares instead of using the rectanglar bounding box.
		
		
        if (this._activeCluster && this._activeCluster.clusterGroup) {
			//return;
			//console.log("active cluster pointer move");
			console.log(mousePos);
			console.log(this._activeCluster);
            var bbox = this._activeCluster.clusterGroup.rawNode.getBoundingClientRect();
			//console.log(bbox);
			return;
			//console.log(mousePos.x);
			//console.log(bbox.left);
			//console.log(bbox.right);
			//console.log(mousePos.y);
			//console.log(bbox.top);
			//console.log(bbox.bottom);
           // if (bbox) {
				//mousePos.x = bbox.left + bbox.left;
				//bbox.left = (bbox.left - mousePos.x);
				//bbox.right = (bbox.right);
				//bbox.top = (bbox.top - mousePos.y);
				//bbox.bottom= (bbox.bottom - 200);
				//mousePos.y = bbox.top+bbox.top;
				
                //if (mousePos.x >= bbox.left && mousePos.x <= bbox.right && mousePos.y >= bbox.top && mousePos.y <= bbox.bottom)
                  //  return;
            //}
        }else{
			this._destroyTooltip();
		}
        if (!this._activeView.ready)
            return;
        var hitTest = this._activeView.hitTest(mousePos);
		//console.log(hitTest);
        if (!hitTest)
            return;
        hitTest.then(function (response) {
            var graphics = response.results;
            if (graphics.length === 0) {
				//console.log("no graphics");
                _this._deactivateCluster();
                return;
            }
            for (var i = 0, len = graphics.length; i < len; i++) {
				
                var g = graphics[i].graphic;
				//console.log(g);
                if (g && (g.attributes.clusterId != null && !g.attributes.isClusterArea)) {
                    var cluster = _this._clusters[g.attributes.clusterId];
                    _this._activateCluster(cluster);
                    return;
                }
                else {
                    _this._deactivateCluster();
                }
            }
        });
    };

Thank you.

[Feature Request] Strengthen with vue support

FlareClusterLayer version

4.X

Arcgis for js version

4.5

Vue version

2.5.2

problem

Hi Nick，Thank you for providing this project，i'm a vue user ,i having a problem using this open source project，i use FlareClusterLayer_v4.js import to my project ,but it not work,finally，i find
this is the Vue and TypeScript integration has always been flawed. https://vuejs.org/v2/guide/typescript.html#Recommended-Configuration,so i clone to locally,i'm modify tsconfig.json "strict": true, and run typescript-compile in VS Code ，but it compile failed

FireFox 48.0.1 clusterGroup hover position

When hovering over a clusterGroup the position shifts away from center. I have not had a chance to look at the code behind. Any quick idea?

The clusterArea looks like it originates from the center of the view, and then shifts/moves to the correct ending position, and the clusterGroup starts at the correct position and then shifts/moves away from the original position the same direction as the clusterArea is shifting.

See attached image.

Thanks!

Overlapping Icons

Is there any way to avoid icon overlapping ? I tried increasing clusterRatio but at lower zoom levels clusters are still overlapping.

Any Guidance will be helpful.

init.js:327 [esri.core.Accessor] Accessor#set Assigning an instance of 'FlareClusterLayer' which is not a subclass of 'esri.Graphic'

What is the reason for this?

legend

Nick,

I was trying to add legend to the cluster layer but It is showing no legend.How do you add legend to the cluster layer .Could you please look into it.Thanks.

flares not showing up in angular app

Hi nick,

I have created your sample inside my angular app just by copying your code.here the flares are not showing on tool tip of the cluster group.please see attached folder for the code.if possible can you please add your example sample inside angular component to see whether they are actually working or not.
fleet-map (2).zip

The cluster graphic did not show corretly

Hi,
Thank you for your code, but the graphics of the clusterlayer seems to be trimed by a boundbox sometimes.

Looking forward to your help,Thands a lot!

How to add multiple colors inside the cluster of points to represent unique features

Hi nick,

We really liked your flare cluster layer.In my requirement I want to show multiple default symbols based on the condition.How can I add multiple symbol layers inside the cluster renderer.Please help me.Thanks in advance.

var defaultSym = new SimpleMarkerSymbol({
size: 10,
color: "#FF0000",
outline: null
});

      var renderer = new ClassBreaksRenderer({
     
        defaultSymbol: defaultSym
    });

4.1 support

Can you add support for v4.1 of the Esri JS API?

How to add features by service URL?

Hi Nick, great project! I would love to use this in our project, however, I fail to understand how I can use it given a ArcGIS Feature Layer URL. By using a QueryTask I can get the JSON but it has a different structure than your data.json file ( coordinates are under the geometry object etc.).

Do I need to change the FCL code or is there any esri-way to load the features in a way that is compatible with your FCL?

I'm using the version 4.1 of the API btw.

FlareClusterLayer.js 用javascript引用时 js里面的define 报错define is not defined

loop through graphics

Hi Nick,

Im trying to loop through all the graphics on the cluster layer.But my mapview which has the cluster layer is returning graphics as null .Did I miss something here.Can you please look into it.
line #1056.(console.log(mapView.graphics);)

filtersBarOpen: boolean;
_refData: any;
@ViewChild('mapViewNode') public mapViewEl: ElementRef;

/**

@Private _zoom sets map zoom
@Private _center sets map center
@Private _basemap sets type of map
*/
private _zoom = 10;
private _center: Array = [0.1278, 51.5074];
private _basemap = 'gray';

vehicleData: any;
totalMapheight: string;
result: any = this.translate.instant('PAGE_MAIN.ALERTS.NO_ACTIVE_ALERTS');
// ------------------------------------------New

@ViewChild(PerfectScrollbarComponent) public directiveScroll: PerfectScrollbarComponent;
@ViewChild('listPS', { read: ElementRef }) public panel: ElementRef;
public brands = BrandNames;

@input()
vehicleId;

@input()
selectedValue;
collapse;

fleetType = {};

vehicleType = {};
titleValue;
filterValue = 'fleet';
filterOptions = [];
fleetTypeCollapse = {};
vehicleTypeCollapse = {};
vehicleTypeSize = {};
fleetTypeSize = {};
filtersBarOpen1: boolean;

showReset = false;
clickedId;
showLoader = true;
sctollTopPosition = 0;
mapDataLoaded:boolean =true;

// ------------------------------

public _location: Location,

public fleetService: FleetService,
public selectedVehicleService: SelectedVehicleService,
public _fleetfilterStore: FleetFilterDataStoreService,
public utilService: UtilService,
public elem: ElementRef,
public navMapService: NavmapService,
public faultFiltersDataService: FaultsFilterDataService,
public elRef: ElementRef,
public router: Router,
public translateService: TranslateService

) {
toggleFilterBarService.openFiltersBar$.subscribe(value => {
this.filtersBarOpen = value;
this.totalMapheight = this.calulateHeight();
});

this.translateService
  .get('GLOBAL.FLEET.SINGULAR')
  .subscribe(data => this.fleetService.updateFilterOptionValue(0, data));

this.translateService
  .get('GLOBAL.VEHICLE_TYPE')
  .subscribe(data => this.fleetService.updateFilterOptionValue(1, data));

toggleFilterBarService.openFiltersBar$.subscribe(value => {
  this.filtersBarOpen1 = value;
});
this.initializeMap("");

//this.mapDataLoaded = true;

}

async initializeMap(vehicle: any) {
//alert("test");

try {
  const [
    EsriMap,
    EsriSceneView,
    MapView,
    EsriPoint,
    EsriLegend,
    EsriRequest,
    EsriConfig,
    EsriFeatureLayer,
    EsriSearch,
    UniqueValueRenderer,
    PopupTemplate,
    LabelClass,
    jsonUtils,
    Expand,
    LayerList,
    BasemapGallery,
    Zoom,
    Locate,
    fcl,
    SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, TextSymbol, TextSymbol3DLayer, Font, ClassBreaksRenderer,
    watchUtils, webMercatorUtils, SpatialReference, Color,

  ] = await loadModules([
    'esri/Map',
    'esri/views/SceneView',
    'esri/views/MapView',
    'esri/geometry/Point',
    'esri/widgets/Legend',
    'esri/request',
    'esri/config',
    'esri/layers/FeatureLayer',
    'esri/widgets/Search',
    'esri/renderers/UniqueValueRenderer',
    'esri/PopupTemplate',
    'esri/layers/support/LabelClass',
    'esri/symbols/support/jsonUtils',
    'esri/widgets/Expand',
    'esri/widgets/LayerList',
    'esri/widgets/BasemapGallery',
    'esri/widgets/Zoom',
    'esri/widgets/Locate',
    // 'http://tl0235085.cnh1.cnhgroup.cnh.com:8080/fcl/flareclusterlayer_v4.js',
    'https://euevoawain050.azurewebsites.net/fcl/flareclusterlayer_v4.js',
    'esri/symbols/SimpleMarkerSymbol',
    'esri/symbols/SimpleLineSymbol',
    'esri/symbols/SimpleFillSymbol',
    'esri/symbols/TextSymbol',
    'esri/symbols/TextSymbol3DLayer',
    'esri/symbols/Font',
    'esri/renderers/ClassBreaksRenderer',
    'esri/core/watchUtils',
    'esri/geometry/support/webMercatorUtils',
    'esri/geometry/SpatialReference',
    'dojo/_base/Color',


  ]);

  let map,

    sceneView,
    activeView,
    graphics,
    clusterLayer;

  // set some defaults
  const maxSingleFlareCount = 5;
  const areaDisplayMode = 'activated';

  const dojoConfig = {
    async: true,
    tlmSiblingOfDojo: false,
    packages: [{
      name: 'fcl',
      location: location.pathname.replace(/\/[^/]+$/, '') + '/fcl'
    }],
    has: {
      // tslint:disable-next-line:max-line-length
      'esri-promise-compatibility': 1 // enable native promises and remove the warning about using when() instead of then(). https://developers.arcgis.com/javascript/latest/guide/release-notes/index.html#improved-compatibility-with-javascript-promises
    }
  };



  // const map: esri.Map = new EsriMap(mapProperties);
  this.map = new EsriMap({
    basemap: 'satellite',
    ground: 'world-elevation'
  });
 console.log(vehicle);

 if(vehicle)
 { 
   // Set type of map view
  this.mapViewProperties = {
    popup: {
      dockEnabled: true,
      dockOptions: {
        // Disables the dock button from the popup
        buttonEnabled: false,
        // Ignore the default sizes that trigger responsive docking
        breakpoint: false,
      },
      //actions:[]
    },
    container: this.mapViewEl.nativeElement,
    center: [vehicle.location[1], vehicle.location[0]],
     zoom: 18,
    map: this.map
  };
}else{
  
  this.mapViewProperties = {
    popup: {
      dockEnabled: true,
      dockOptions: {
        // Disables the dock button from the popup
        buttonEnabled: false,
        // Ignore the default sizes that trigger responsive docking
        breakpoint: false,
      },
      //actions:[]
    },
    container: this.mapViewEl.nativeElement,
    center:  [-97.922211, 39.381266],
     zoom: 3,
    map: this.map
  }

}




  const mapView: esri.MapView = new EsriSceneView(this.mapViewProperties);
  const data1 = [];
  // this.map.destroy();
  //  if(this._zoom == 11){
  //   mapView.goTo({
  //     center: this._center,
  //     zoom: this._zoom
  //   })
  // }

  const fields = [
    {
      name: 'ObjectID',
      alias: 'ObjectID',
      type: 'oid'
    },
    {
      name: 'name',
      alias: 'Name',
      type: 'string'
    }
  ];
  const points = [];
  const pointsL = [];
  let pointsLayer;
  let pointsLayerL;
  mapView.when(() => {
    // ////console.log.log('it loaded');
    EsriRequest('/api/get/units/', {
      responseType: 'json'
    })
      .then(res => {
        const tractors = res.data;
        this.vehicleData = tractors;
        // //console.log(tractors.content.length);
        for (let j = 0; j < tractors.content.length; j++) {
          if (tractors.content[j].location) {
            //    //console.log('tractors', tractors);
            //console.log(tractors.content[j].status.name);
            data1.push({

              Id: j,
              x: tractors.content[j].location[1],
              y: tractors.content[j].location[0],
              brand: tractors.content[j].brand,
              brandCode: tractors.content[j].brandCode,
              heading: tractors.content[j].heading,
              id: tractors.content[j].id,
              model: tractors.content[j].model,
              name: tractors.content[j].name,
              serialNumber: tractors.content[j].serialNumber,
              speed: tractors.content[j].speed,
              status: this.translate.instant(
                'GLOBAL.VEHICLE.STATUS.' + tractors.content[j].status.name
              ),
              type: tractors.content[j].type.code,
              value: tractors.content[j].type.code,
              imgName: this.getimage(tractors.content[j].type.code),
              engHours: this.getVehicleDetail(
                'engHours',
                tractors.content[j]
              ),
              engHoursText: this.translate.instant(
                'PAGE_FAULTS.ENGINE_HOURS'
              ),
              fuelLevelText: this.translate.instant(
                'BALLOON.VEHICLE.FUEL_LEVEL'
              ),
              currentSpeedText: this.translate.instant(
                'BALLOON.VEHICLE.CURRENT_SPEED'
              ),
              activeAlartTxt: this.translate.instant(
                'PAGE_MAIN.ALERTS.ACTIVE_ALERTS'
              ),
              vehicleDetailsTxt: this.translate.instant(
                'BALLOON.VEHICLE.CTA.VEHICLE_DETAILS'
              ),
              fuelLevel: this.getVehicleDetail(
                'fuelLevel',
                tractors.content[j]
              ),
              statusColor: this.checkStatus(
                tractors.content[j].status.name
              ),
              customstatustypebrand:
                tractors.content[j].status.name +
                tractors.content[j].type.code +
                tractors.content[j].brandCode,
              brandColor: this.getBrandColor(),
              vehicleObj: JSON.stringify(tractors.content[j]),
              lastUpdate: this.getStatusDate(tractors.content[j].lastUpdate)
            });
            points.push({
              geometry: new EsriPoint({
                x: tractors.content[j].location[1],
                y: tractors.content[j].location[0]
              }),
              attributes: {
                ObjectID: j,
                brand: tractors.content[j].brand,
                brandCode: tractors.content[j].brandCode,
                heading: tractors.content[j].heading,
                id: tractors.content[j].id,
                model: tractors.content[j].model,
                name: tractors.content[j].name,
                serialNumber: tractors.content[j].serialNumber,
                speed: tractors.content[j].speed,
                status: this.translate.instant(
                  'GLOBAL.VEHICLE.STATUS.' + tractors.content[j].status.name
                ),
                type: tractors.content[j].type.code,
                value: tractors.content[j].type.code,
                imgName: this.getimage(tractors.content[j].type.code),
                engHours: this.getVehicleDetail(
                  'engHours',
                  tractors.content[j]
                ),
                engHoursText: this.translate.instant(
                  'PAGE_FAULTS.ENGINE_HOURS'
                ),
                fuelLevelText: this.translate.instant(
                  'BALLOON.VEHICLE.FUEL_LEVEL'
                ),
                currentSpeedText: this.translate.instant(
                  'BALLOON.VEHICLE.CURRENT_SPEED'
                ),
                activeAlartTxt: this.translate.instant(
                  'PAGE_MAIN.ALERTS.ACTIVE_ALERTS'
                ),
                vehicleDetailsTxt: this.translate.instant(
                  'BALLOON.VEHICLE.CTA.VEHICLE_DETAILS'
                ),
                fuelLevel: this.getVehicleDetail(
                  'fuelLevel',
                  tractors.content[j]
                ),
                statusColor: this.checkStatus(
                  tractors.content[j].status.name
                ),
                customstatustypebrand:
                  tractors.content[j].status.name +
                  tractors.content[j].type.code +
                  tractors.content[j].brandCode,
                brandColor: this.getBrandColor(),
                vehicleObj: JSON.stringify(tractors.content[j]),
                lastUpdate: this.getStatusDate(tractors.content[j].lastUpdate)
                // totalAlerts: this.getTotalAlerts(tractors.content[j].id)
              }
            });
            pointsL.push({
              geometry: new EsriPoint({
                x: tractors.content[j].location[1],
                y: tractors.content[j].location[0]
              }),
              attributes: {
                ObjectID: j,
                brand: tractors.content[j].brand,
                brandCode: tractors.content[j].brandCode,
                heading: tractors.content[j].heading,
                id: tractors.content[j].id,
                model: tractors.content[j].model,
                name: tractors.content[j].name,
                serialNumber: tractors.content[j].serialNumber,
                speed: tractors.content[j].speed,
                status: tractors.content[j].status.name,
                type: tractors.content[j].type.code,
                value: tractors.content[j].type.code,
                imgName: this.getimage(tractors.content[j].type.code),
                engHours: this.getVehicleDetail(
                  'engHours',
                  tractors.content[j]
                ),
                fuelLevel: this.getVehicleDetail(
                  'fuelLevel',
                  tractors.content[j]
                ),
                statusColor: this.checkStatus(
                  tractors.content[j].status.name
                ),
                customstatustypebrand:
                  tractors.content[j].status.name +
                  tractors.content[j].type.code +
                  tractors.content[j].brandCode,
                brandColor: this.getBrandColor(),
                vehicleObj: JSON.stringify(tractors.content[j]),
                lastUpdate: this.getStatusDate(tractors.content[j].lastUpdate)
                // totalAlerts: this.getTotalAlerts(tractors.content[j].id)
              }
            });
          }
        }
        //console.log(data1);
        const pointsRenderer = {
          type: 'unique-value', // autocasts as new UniqueValueRenderer()
          field: 'customstatustypebrand',
          valueExpressionTitle: 'Title to display',
          uniqueValueInfos: [
            {
              value: 'WORKINGTRACTORSCSAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/working.png',
                '#25b03d'
              )
            },
            {
              value: 'KEYONTRACTORSCSAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/KeyON.png',
                '#e7a603'
              )
            },
            {
              value: 'IDLETRACTORSCSAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/Idle.png',
                '#f47825'
              )
            },
            {
              value: 'MOVINGTRACTORSCSAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/Moving.png',
                '#F97C5A'
              )
            },
            {
              value: 'TRAVELINGTRACTORSCSAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/Traveling.png',
                '#035db1'
              )
            },
            {
              value: 'OFFTRACTORSCSAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/Off.png',
                '#F97C5A'
              )
            },
            {
              value: 'WORKINGTRACTORSNHAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/working.png',
                '#25b03d'
              )
            },
            {
              value: 'KEYONTRACTORSNHAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/KeyON.png',
                '#e7a603'
              )
            },
            {
              value: 'IDLETRACTORSNHAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/Idle.png',
                '#f47825'
              )
            },
            {
              value: 'MOVINGTRACTORSNHAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/Moving.png',
                '#F97C5A'
              )
            },
            {
              value: 'TRAVELINGTRACTORSNHAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/Traveling.png',
                '#035db1'
              )
            },
            {
              value: 'OFFTRACTORSNHAG',
              symbol: this.getUniqueValueSymbol(
                '/assets/Icon-Vehicle-Cih/CaseTractors/Off.png',
                '#F97C5A'
              )
            }
          ]
        };

        const pointsRendererL = {
          type: 'unique-value', // autocasts as new UniqueValueRenderer()
          field: 'status1',
          valueExpressionTitle: 'Title to display',
          uniqueValueInfos: [
            {
              value: this.translate.instant('GLOBAL.VEHICLE.STATUS.WORKING'),
              symbol: {
                type: 'simple-marker',
                // autocasts as new SimpleMarkerSymbol()
                color: '#25b03d'
              }
            },
            {
              value: this.translate.instant('GLOBAL.VEHICLE.STATUS.KEYON'),
              symbol: {
                type: 'simple-marker',
                // autocasts as new SimpleMarkerSymbol()
                color: '#e7a603'
              }
            },
            {
              value: this.translate.instant('GLOBAL.VEHICLE.STATUS.IDLE'),
              symbol: {
                type: 'simple-marker',
                // autocasts as new SimpleMarkerSymbol()
                color: '#f47825'
              }
            },
            {
              value: this.translate.instant('GLOBAL.VEHICLE.STATUS.MOVING'),
              symbol: {
                type: 'simple-marker',
                // autocasts as new SimpleMarkerSymbol()
                color: '#01a8b4'
              }
            },
            {
              value: this.translate.instant(
                'GLOBAL.VEHICLE.STATUS.TRAVELING'
              ),
              symbol: {
                type: 'simple-marker',
                // autocasts as new SimpleMarkerSymbol()
                color: '#035db1'
              }
            },
            {
              value: this.translate.instant('GLOBAL.VEHICLE.STATUS.OFF'),
              symbol: {
                type: 'simple-marker',
                // autocasts as new SimpleMarkerSymbol()
                color: 'grey'
              }
            }
          ]
        };
        pointsRenderer.valueExpressionTitle = this.translate.instant(
          'PAGE_VEHICLE_DETAILS.STATUS'
        );
        pointsRendererL.valueExpressionTitle = this.translate.instant(
          'PAGE_VEHICLE_DETAILS.STATUS'
        );

        //  //console.log(points);
        const popup = {
          content:
            // tslint:disable-next-line:max-line-length
            '<div id =\'main-div\' style =\'width:100%;position: absolute;top: 40px;right: 0px;bottom: auto;z-index: 1000;-webkit-box-shadow: 0 0 4px 1px rgba(0,0,0,.4); box-shadow: 0 0 4px 1px rgba(0,0,0,.4);background-color: #dcdcdc;pointer-events: visiblePainted;pointer-events: auto;overflow: auto;   display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal; -ms-flex-direction: row;flex-direction: row;-webkit-box-align: stretch;-ms-flex-align:stretch; align-items: stretch;\'>' +
            '<div></div>' +
            '<div style =\'box-sizing: border-box;flex-basis: 100%;width:100%;\'>' +
            '<div style = \'padding: 0;margin: 0;width: 100%; -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);\'>' +
            '<div style = \'height: 40px;color: #fff;background-color: #000;padding: 9px 30px 0 10px;width: 100%;   position: relative;\'>' +
            '<div style = \'overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 210px;  float: left;\'>{name}</div>' +
            '<div style = \'max-width: 140px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;   float: right;\'>' +
            '<span style = \'color: #dcdcdc;\'>{lastUpdate}</span>' +
            '</div>' +
            // tslint:disable-next-line:max-line-length
            '<div style = \'position: absolute;cursor: pointer;top: 0;right: 0;width: 34px;height: 38px;display: -webkit-box; display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;\'>' +
            // tslint:disable-next-line:max-line-length
            // '<div id="closeicon" style="margin-bottom: 3px;">X</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '<div style = \'padding: 8px;height: calc(100% - 40px);width: 100%;\'>' +
            '<div style = \'min-height: 100px;position: relative;display: block;width: 100%;\'>' +
            '<div style=\'visibility: inherit;display: block;height: 100%;\'>' +
            '<div style=\'background-color: #fff;-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), 0 0 2px 0     rgba(0,0,0,.12);box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), 0 0 2px 0 rgba(0,0,0,.12);margin-bottom: 10px;\'>' +
            '<div style =\'max-width: 100%;height: 64px;position: relative;\'>' +
            '<div style = \'padding-right: 14px;padding-left: 14px;margin: 15px 0;width: 75px;height: 34px; font-size: 15px;font-weight: 700;text-transform: uppercase;text-align: center;float: left;\'>' +
            '<img alt=\'truck\' src=\'{imgName}\'>' +
            '</div>' +
            '<div style = \'padding-top: 13px; overflow: hidden; float: left;width:52%;\'>' +
            // tslint:disable-next-line:max-line-length
            '<div style=\'touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);color: #000;font-weight: 700;font-size: 15px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\'>{name}</div>' +
            // tslint:disable-next-line:max-line-length
            '<div style=\'touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);font-size: 12px;color: #4c4c51;margin-bottom: 10px;white-space: nowrap;max-width: 170px;text-overflow: ellipsis;    overflow: hidden;\'>' +
            '{model} | {id}' +
            '</div>' +
            '</div>' +
            '<div style = \'width: 80px;float: right;padding-top: 20px;display:inline-flex;position:absolute;margin-left: 5px;    white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\'>' +
            '<div style = \'width: 14px;height: 14px;overflow: hidden;position: relative;border-radius:50%;background-color:{statusColor}\'>' +
            '</div>' +
            '<div style = \'color: {statusColor};font-size: 12px;font-weight: 700;padding-left:5px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;\'>{status}</div>' +
            '</div>' +
            '<div style = \'position: absolute;width: calc(100% - 28px);height: 2px;background-color: #dcdcdc;left: 14px;right: 14px;bottom: 0;\'>' +
            '</div>' +
            '</div>' +
            // tslint:disable-next-line:max-line-length
            '<div style = \'height: 64px;padding: 14px;background-color: #fff;width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content:space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;text-align: center;\'>' +
            '<div style = \'max-width: 33%;width: 33%;flex-basis: 33%; color:#000;\'>' +
            '<div style = \'font-size: 12px;font-weight:800;\'>{engHoursText}</div>' +
            '<div style = \'white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: 500;\'>' +
            '<span style = \'font-size: 24px;font-weight:800;\'>{engHours}</span>' +
            '</div>' +
            '</div>' +
            '<div style = \'flex-shrink: 0;max-width: 33%;width: 33%; flex-basis: 33%;color:#000;\'>' +
            '<div style = \'font-size: 12px;font-weight:800\'>{fuelLevelText}</div>' +
            '<div style = \'white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: 500;\'>' +
            '<span style = \'font-size: 24px;font-weight:800;\'>{fuelLevel}</span>' +
            '</div>' +
            '</div>' +
            '<div  style = \'flex-shrink: 0;max-width: 33%;width: 33%; flex-basis: 33%;color:#000;\'>' +
            '<div style = \'font-size: 12px;font-weight:800;\'>{currentSpeedText}</div>' +
            '<div style = \'white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: 500;\'>' +
            '<span style = \'font-size: 24px;font-weight:800;\'>{speed}</span> Km/h' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '<div style = \'position: relative;height: 24px;text-transform: capitalize;color:#000;\'>' +
            '<div style = \'float: left;\'>{activeAlartTxt}</div>' +
            '</div>' +
            '<div style = \'background-color: #fff;-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), 0 0 2px 0 rgba(0,0,0,.12); box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), 0 0 2px 0 rgba(0,0,0,.12); margin-bottom: 10px;\'>' +
            '<div style = \'display: flex; -webkit-box-align: center;align-items:center;\'>' +
            '<div style = \'width: 100%;\'>' +
            '<div style =\'display: flex;-webkit-box-align: center;align-items: center;padding:10px\'>' +
            '<div id="totalAlerts" style = \'font-size: 12px;color: #707070;text-transform: capitalize;\'> ' +
            '</div>' +
            '<div style=\'float:right;padding-left:212px\'><input type="image" id="alertbut" src="/assets/images/arrow.png" width="22" height="22">' +
            '</div>' +
            '</div>' +
            '</div>' +
            '<div style = \'position: absolute;right: 14px;top: 0;bottom: 0;-webkit-box-pack: center;justify-content: center; font-size: 20px;cursor: pointer;display: flex;-webkit-box-align: center;align-items: center;\'>' +
            // tslint:disable-next-line:max-line-length
            '<span style = \'font-family: cnh-evo-iconfont!important;content: attr(data-icon);font-style: normal!important;font-weight: 400!important;font-variant: normal!important;text-transform: none!important;    line-height: 1;-webkit-font-smoothing: antialiased;\'></span>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '<div style = \'display: flex;justify-content: space-between;padding: 8px 0 0 0;\'>' +
            '<div style = \'width: 100%;float: left;padding-right: 0;\'>' +
            '<button class="\'vehicle-but\'" id="vbut"  style = \'color:#fff; background-color:{brandColor};padding-top:8px;padding-bottom:8px;width: 100%;flex-basis: 100%;\'>' +
            '<span class=\'mat-button-wrapper\'> {vehicleDetailsTxt}</span>' +
            '</button>' +
            '<input type=hidden id="vId"' +
            ' value="{id}"/>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>'
        };
        if (points) {
          // create graphics
          pointsLayer = new EsriFeatureLayer({
            screenSizePerspectiveEnabled: true,
            source: points, // autocast as an array of esri/Graphic
            // create an instance of esri/layers/support/Field for each field object
            fields: fields, // This is required when creating a layer from Graphics
            objectIdField: 'ObjectID', // This must be defined when creating a layer from Graphics
            renderer: pointsRenderer, // set the visualization on the layer
            // feature reduction is set to selection because our scene contains too many points and they overlap
            outFields: ['*'],
            labelsVisible: true,
            id: 'featureLayerId',
            popupTemplate: popup,
            title: this.translate.instant('PAGE_MAP.LEGEND.LEGEND'),
            legendEnabled: true,
            labelingInfo: [
              {
                labelPlacement: 'center-right',
                labelExpressionInfo: {
                  value: '{name}'
                },
                symbol: {
                  type: 'label-3d', // autocasts as new LabelSymbol3D()
                  symbolLayers: [
                    {
                      type: 'text', // autocasts as new TextSymbol3DLayer()
                      material: {
                        color: 'black'
                      },
                      // we set a halo on the font to make the labels more visible with any kind of background
                      halo: {
                        size: 10,
                        color: [255, 255, 255]
                      },
                      size: 10
                    }
                  ]
                }
              }
            ],
            geometryType: 'point'
          });
          pointsLayerL = new EsriFeatureLayer({
            screenSizePerspectiveEnabled: true,
            source: pointsL, // autocast as an array of esri/Graphic
            // create an instance of esri/layers/support/Field for each field object
            fields: fields, // This is required when creating a layer from Graphics
            objectIdField: 'ObjectID1', // This must be defined when creating a layer from Graphics
            renderer: pointsRendererL, // set the visualization on the layer
            // feature reduction is set to selection because our scene contains too many points and they overlap
            outFields: ['*'],
            labelsVisible: true,
            id: 'featureLayerId1',
            popupTemplate: popup,
            title: this.translate.instant('PAGE_MAP.LEGEND.LEGEND'),
            legendEnabled: true,
            geometryType: 'point'
          });
          const defaultSym = new SimpleMarkerSymbol({
            size: 10,
            color: '#FF0000',
            outline: null
          });
          const singleRenderer = new UniqueValueRenderer({
            field: 'customstatustypebrand',
            defaultSymbol: defaultSym,
            uniqueValueInfos: [
              {
                value: 'WORKINGTRACTORSCSAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/working.png',
                  '#25b03d'
                )
              },
              {
                value: 'KEYONTRACTORSCSAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/KeyON.png',
                  '#e7a603'
                )
              },
              {
                value: 'IDLETRACTORSCSAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/Idle.png',
                  '#f47825'
                )
              },
              {
                value: 'MOVINGTRACTORSCSAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/Moving.png',
                  '#F97C5A'
                )
              },
              {
                value: 'TRAVELINGTRACTORSCSAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/Traveling.png',
                  '#035db1'
                )
              },
              {
                value: 'OFFTRACTORSCSAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/Off.png',
                  '#F97C5A'
                )
              },
              {
                value: 'WORKINGTRACTORSNHAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/working.png',
                  '#25b03d'
                )
              },
              {
                value: 'KEYONTRACTORSNHAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/KeyON.png',
                  '#e7a603'
                )
              },
              {
                value: 'IDLETRACTORSNHAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/Idle.png',
                  '#f47825'
                )
              },
              {
                value: 'MOVINGTRACTORSNHAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/Moving.png',
                  '#F97C5A'
                )
              },
              {
                value: 'TRAVELINGTRACTORSNHAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/Traveling.png',
                  '#035db1'
                )
              },
              {
                value: 'OFFTRACTORSNHAG',
                symbol: this.getUniqueValueSymbol(
                  '/assets/Icon-Vehicle-Cih/CaseTractors/Off.png',
                  '#F97C5A'
                )
              }
            ]
          });

          const renderer = new ClassBreaksRenderer({
            // defaultSymbol: this.getUniqueValueSymbol(
            //   '/assets/Icon-Vehicle-Cih/CaseTractors/working.png',
            //   '#25b03d')
            // defaultSymbol: defaultSym
          });
          renderer.field = 'clusterCount';

          // var smSymbol = new SimpleMarkerSymbol({ size: 20, outline: new SimpleLineSymbol({ color: [221, 159, 34, 0.8] }), color: [255, 204, 102, 0.8] });
          const smSymbol = new SimpleMarkerSymbol('circle', 20,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([110, 204, 57, .6]), 15),
            new Color([110, 204, 57, .6]));
          const mdSymbol = new SimpleMarkerSymbol('circle', 20, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([241, 211, 87, .6]), 15), new Color([241, 211, 87, .75]));
          // var mdSymbol = new SimpleMarkerSymbol("circle", 50,
          // new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([178,70,37,0.5]), 15),
          // new Color([178,70,37,0.75]));
          // var lgSymbol = new SimpleMarkerSymbol({ size: 50, outline: new SimpleLineSymbol({ color: [41, 163, 41, 0.8] }), color: [51, 204, 51, 0.8] });
          const lgSymbol = new SimpleMarkerSymbol({
            'color': [41, 163, 41, 0.8],
            'size': 15,

            'type': 'esriSMS',
            'style': 'esriSMSCircle',
            'outline': {
              'color': [128, 179, 255, 255],
              'width': 1,
              'type': 'esriSLS',
              'style': 'esriSLSSolid'
            }
          });
          const xlSymbol = new SimpleMarkerSymbol({ size: 60, outline: new SimpleLineSymbol({ color: [200, 52, 59, 0.8] }), color: [250, 65, 74, 0.8] });

          renderer.addClassBreakInfo(0, 3, smSymbol);
          renderer.addClassBreakInfo(3, 10, mdSymbol);
          renderer.addClassBreakInfo(10, 100, lgSymbol);
          renderer.addClassBreakInfo(100, Infinity, xlSymbol);

          let areaRenderer;

          // if area display mode is set. Create a renderer to display cluster areas. Use SimpleFillSymbols as the areas are polygons
          const defaultAreaSym = new SimpleFillSymbol({
            style: 'solid',
            color: [0, 0, 0, 0.2],
            outline: new SimpleLineSymbol({ color: [0, 0, 0, 0.3] })
          });

          areaRenderer = new ClassBreaksRenderer({
            defaultSymbol: defaultAreaSym
          });
          areaRenderer.field = 'clusterCount';

          const smAreaSymbol = new SimpleFillSymbol({ color: [255, 204, 102, 0.4], outline: new SimpleLineSymbol({ color: [221, 159, 34, 0.8], style: 'dash' }) });
          const mdAreaSymbol = new SimpleFillSymbol({ color: [102, 204, 255, 0.4], outline: new SimpleLineSymbol({ color: [82, 163, 204, 0.8], style: 'dash' }) });
          const lgAreaSymbol = new SimpleFillSymbol({ color: [51, 204, 51, 0.4], outline: new SimpleLineSymbol({ color: [41, 163, 41, 0.8], style: 'dash' }) });
          const xlAreaSymbol = new SimpleFillSymbol({ color: [250, 65, 74, 0.4], outline: new SimpleLineSymbol({ color: [200, 52, 59, 0.8], style: 'dash' }) });

          areaRenderer.addClassBreakInfo(0, 5, smAreaSymbol);
          areaRenderer.addClassBreakInfo(6, 15, mdAreaSymbol);
          areaRenderer.addClassBreakInfo(16, 100, lgAreaSymbol);
          areaRenderer.addClassBreakInfo(101, Infinity, xlAreaSymbol);

          // Set up another class breaks renderer to style the flares individually
          const flareRenderer = new ClassBreaksRenderer({
            defaultSymbol: renderer.defaultSymbol
          });
          flareRenderer.field = 'clusterCount';

          const smFlareSymbol = new SimpleMarkerSymbol({ size: 140, color: [255, 204, 102, 0.8], outline: new SimpleLineSymbol({ color: [221, 159, 34, 0.8] }) });
          const mdFlareSymbol = new SimpleMarkerSymbol({ size: 140, color: [102, 204, 255, 0.8], outline: new SimpleLineSymbol({ color: [82, 163, 204, 0.8] }) });
          const lgFlareSymbol = new SimpleMarkerSymbol({ size: 140, color: [51, 204, 51, 0.8], outline: new SimpleLineSymbol({ color: [41, 163, 41, 0.8] }) });
          const xlFlareSymbol = new SimpleMarkerSymbol({ size: 140, color: [250, 65, 74, 0.8], outline: new SimpleLineSymbol({ color: [200, 52, 59, 0.8] }) });

          flareRenderer.addClassBreakInfo(0, 5, smFlareSymbol);
          flareRenderer.addClassBreakInfo(6, 15, mdFlareSymbol);
          flareRenderer.addClassBreakInfo(16, 100, lgFlareSymbol);
          flareRenderer.addClassBreakInfo(101, Infinity, xlFlareSymbol);

          // set up a popup template
          const popupTemplate = new PopupTemplate({
            title: '{name}',
            content: [{
              type: 'fields',
              fieldInfos: [
                { fieldName: 'type', label: 'Facility Type', visible: true },
                { fieldName: 'name', label: 'Post Code', visible: true }
              ]
            }]
          });


          const options = {
            id: 'flare-cluster-layer',
            clusterRenderer: renderer,
            areaRenderer: areaRenderer,
            flareRenderer: flareRenderer,
            singleRenderer: singleRenderer,
            singlePopupTemplate: popup,
            spatialReference: new SpatialReference({ 'wkid': 4326 }),
            subTypeFlareProperty: 'name',
            singleFlareTooltipProperty: 'name',
            displaySubTypeFlares: true,
            maxSingleFlareCount: maxSingleFlareCount,
            clusterRatio: 70,
            clusterAreaDisplay: 'always',
            data: data1,
            zoomOnClick: true,



          };

          //console.log(options);

          clusterLayer = new fcl.FlareClusterLayer(options);



           
           this.map.add(pointsLayerL);
          this.map.add(clusterLayer);
          console.log(pointsLayerL);
          // this.map.add(pointsLayer);

          // clusterLayer.draw(this.map);

          //
          clusterLayer.on("draw-complete", function () {
            //console.log('draw complete event callback');
        });
        clusterLayer.on("click", function () {
          alert("test");
      });
          const doc = document.getElementsByClassName('.esri-search__submit-button');
          const color = this.getBrandColor();
          if (doc.length !== 0) {
            doc[0]['style'].backgroundColor = color;
          }


        }
         
        console.log(mapView.graphics);
        const screenPoint = {
          x: vehicle.location[1],
          y: vehicle.location[0]
        };


        // Search for graphics at the clicked location
        mapView.hitTest(screenPoint).then(function (response) {
         alert("test");
          var result = response.results[0];
          console.log(response.results);
          console.log(result);
          
          if (!result.graphic.popupTemplate) {
            
              var lon = result.mapPoint.longitude;
            var lat = result.mapPoint.latitude;
            //console.log(zoom);
           
            mapView.goTo({
              // center: [result.graphic.geometry.longitude,result.graphic.geometry.latitude],
              center: [result.graphic.geometry['longitude'], result.graphic.geometry['latitude']],
              zoom: zoomvar
            });

          }

        });

      });
    
    let zoomvar=12;
      let i = 0;
    mapView.on("click", function (event) {
     // mapView.popup.autoCloseEnabled = true;
      ////console.log(clusterLayer.graphics._items);
      // mapView.graphics.forEach(element => {
      //   //console.log(element);

      // });
      // this.map.add(pointsLayer);
      const screenPoint = {
        x: event.x,
        y: event.y
      };


      // Search for graphics at the clicked location
      mapView.hitTest(screenPoint).then(function (response) {
       
        var result = response.results[0];
        
        if (!result.graphic.popupTemplate) {
          
            var lon = result.mapPoint.longitude;
          var lat = result.mapPoint.latitude;
          //console.log(zoom);
         
          mapView.goTo({
            // center: [result.graphic.geometry.longitude,result.graphic.geometry.latitude],
            center: [result.graphic.geometry['longitude'], result.graphic.geometry['latitude']],
            zoom: zoomvar
          });

        }

      });


    });


    //console.log(mapView);

    const legend = new EsriLegend({
      view: mapView,
      layerInfos: [{
        layer: clusterLayer,
        title: 'NY Educational Attainment'
      }]

    });

    mapView.ui.empty('top-left');
    const bgExpand1 = new Expand({
      view: mapView,
      content: '<div> <cnh-map-legend style = "position: absolute;left: 27px;bottom: 24px;z-index: 5000;">' +
        '<div style = "display: block; width: 164px; min-height: 40px; background-color:rgba(0,0,0,.8);box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);color: #fff;border-radius: 2px;">' +
        '<cnh-map-legend-header style = "border-bottom: 1px solid #707070;text-align:center;top: 0; right: 0;bottom: 0; z-index: 100;height: 40px; width: 100%;font-size: 12px;display: block;">' +
        '<div style ="margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline; font-size: inherit;">' +
        '<div style ="margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;font-size: inherit;line-height:40px;height:100%"> LEGEND </div>' +
        '</div> </cnh-map-legend-header>' +
        '<cnh-map-legend-list-simple style = "margin: 0; border: 0; font-size: 100%;font: inherit;vertical-align: baseline;font-size: inherit;">' +
        ' <div style = "padding: 14px;font-size: 12px; font-weight: 400; color: #f3f6f9; text-transform: uppercase;">' +
        '<div style ="vertical-align: baseline;">Vehicle status</div>' +
        '<cnh-map-legend-item-simple style ="box-sizing: border-box;">' +
        '<div style ="width:100%;  height: 30px;display: flex;justify-content: flex-start; align-items: center;">' +
        '<div style="flex-basis: 20%;"> <span style="width: 18px; height: 18px;border-radius: 100%;display: block;background-color: #25b03d;"></span>' +
        '</div>' +
        '<div style="flex-basis: 80%;font-size: 11px;color: #fff;padding-left: 5px;"> In work </div>' +
        '</div>' +
        '</cnh-map-legend-item-simple>' +
        '<cnh-map-legend-item-simple>' +
        '<div style="width: 100%; height: 30px;justify-content: flex-start;align-items: center; display: flex;">' +
        '<div style = "flex-basis: 20%">' +
        '<span style = "width: 18px; height: 18px; border-radius: 100%;display: block; background-color: #e7a603;"></span>' +
        '</div>' +
        '<div style ="flex-basis:80%;font-size: 11px; color: #fff;padding-left: 5px;">Key On</div>' +
        '</div>' +
        '</cnh-map-legend-item-simple>' +
        '<cnh-map-legend-item-simple style = "">' +
        '<div style="width: 100%;height: 30px; display: flex;align-items: center;">' +
        '<div style = "flex-basis: 20%"><span style = "    width: 18px;height: 18px;border-radius: 100%;display: block;background-color: #f47825;"></span>' +
        '</div>' +
        '<div style ="flex-basis: 80%;font-size: 11px; color: #fff;padding-left: 5px;">IDLE</div>' +
        '</div>' +
        '</cnh-map-legend-item-simple>' +
        '<cnh-map-legend-item-simple style = "">' +
        '<div style="width: 100%;height: 30px; display: flex;justify-content: flex-start;align-items: center;">' +
        '<div style = "flex-basis: 20%">' +
        '<span style = "width: 18px;height: 18px;border-radius: 100%;display: block;background-color: #01a8b4;"></span>' +
        '</div>' +
        '<div style ="flex-basis: 80%;font-size: 11px;color: #fff;padding-left: 5px;">Moving</div>' +
        '</div>' +
        '</cnh-map-legend-item-simple>' +
        '<cnh-map-legend-item-simple style = "">' +
        '<div style="width: 100%;height: 30px;display: flex;justify-content: flex-start;align-items: center;">' +
        '<div style = "flex-basis: 20%">' +
        '<span style = "    width: 18px;height: 18px;border-radius: 100%;display: block;background-color: #035db1;"></span>' +
        '</div>' +
        '<div style ="flex-basis: 80%;font-size: 11px;color: #fff;padding-left: 5px;">TRAVELING</div>' +
        '</div>' +
        '</cnh-map-legend-item-simple>' +
        '<cnh-map-legend-item-simple style = "">' +
        '<div style="width: 100%;height: 30px;display: flex;justify-content: flex-start;align-items: center;">' +
        '<div style = "flex-basis: 20%">' +
        '<span style = "width: 18px;height: 18px;border-radius: 100%;display: block;background-color: #adadad;"></span>' +
        '</div>' +
        '<div style ="flex-basis: 80%;font-size: 11px;color: #fff;padding-left: 5px;"> OFF</div>' +
        '</div>' +
        '</cnh-map-legend-item-simple>' +
        '</div>' +
        '</cnh-map-legend-list-simple>' +
        '</div>' +
        '</cnh-map-legend>' +
        '</div>'
    });
   // mapView.ui.add(bgExpand1, 'bottom-left');
    const searchWidget = new EsriSearch({
      view: mapView
    });
    // searchWidget.startup();
    mapView.ui.add(searchWidget, 'top-left');

    const basemapGallery = new BasemapGallery({
      view: mapView,
      container: document.createElement('div')
    });

    // Create an Expand instance and set the content
    // property to the DOM node of the basemap gallery widget
    // Use an Esri icon font to represent the content inside
    // of the Expand widget
    const bgExpand = new Expand({
      view: mapView,
      content: basemapGallery
    });
    const zoom = new Zoom({
      view: mapView
    });

    mapView.ui.add(zoom, 'top-right');

    // close the expand whenever a basemap is selected
    basemapGallery.watch('activeBasemap', function () {
      // const mobileSize =
      //   mapView.heightBreakpoint === 'xsmall' ||
      //   mapView.widthBreakpoint === 'xsmall';

      // if (mobileSize) {
      //   bgExpand.collapse();
      // }
    });
    const locateBtn = new Locate({
      view: mapView
    });
    // Add the expand instance to the ui
    mapView.ui.add(bgExpand, 'top-right');
    mapView.ui.add(locateBtn, 'top-right');

    // Add a legend instance to the panel of a
  // ListItem in a LayerList instance
  const layerList = new LayerList({
    view: mapView,
    listItemCreatedFunction: function (event) {
      const item = event.item;
      //console.log(item);
      if (item.layer.type !== 'group') {
        // don't show legend twice
        if (item.layer.type === 'graphics') {
          //console.log("test");
          item.layer.listMode = 'hide';
          // event.preventDefault();
        } else {
          if (item.layer.renderer.field === 'status1') {
            item.panel = {
              content: 'legend',
              open: false
            };
          } else {
            item.layer.listMode = 'hide';
          }
        }
      }
    }
  });
  //  //console.log(layerList);
  mapView.ui.add(layerList, 'bottom-left');


    mapView.popup.watch('visible', function (evt) {
      setTimeout(() => {
        const elm = document.getElementById('vbut');
        if (elm !== null) {
          elm.onclick = function () {
            const event = new CustomEvent('CallAngularService');

            window.dispatchEvent(event);
          };
        }

        const alertelm = document.getElementById('alertbut');
        if (alertelm !== null) {
          alertelm.onclick = function () {
            const event = new CustomEvent('CallAlertService');

            window.dispatchEvent(event);
          };
        }

        if (evt === true) {
          const event = new CustomEvent('CallTotalAlertService');
          window.dispatchEvent(event);
        }

        // const closeicon = document.getElementById('closeicon');
        // if (closeicon !== null) {
        //   closeicon.onclick = function () {
        //     const event = new CustomEvent('CallCloseService');

        // window.dispatchEvent(event);
        //  };
        // };
      }, 10);
    });

  });



  setTimeout(() => {
    // //console.log('called');
    const doc = document.getElementsByClassName('esri-search__submit-button');
    const color = this.getBrandColor();
    if (doc.length !== 0) {
      doc[0]['style'].backgroundColor = color;
    }
  }, 1000);

  this.mapDataLoaded = true;

}
catch (error) {
  alert('We have an error: ' + error);
}

}

@HostListener('window:CallAngularService')
onCallAngularService() {
// Run your service call here
const id = document.getElementById('vId')['value'];
this.apiService.getVehicleDataById(id).subscribe(response => {
const data = { vehicleData: response };
this.fleetdata.storage = [];
this.fleetdata.storage = data;
this._router
.navigateByUrl('/', { skipLocationChange: true })
.then(() => this._router.navigate(['/fleet/vehicalInfo']));
});
}
@HostListener('window:CallAlertService')
onCallAlertService() {
// Run your service call here
const id = document.getElementById('vId')['value'];
this._router.navigate(['/fleet/faults/detail/' + id]);
}
@HostListener('window:CallTotalAlertService')
onCallTotalAlertService() {
// Run your service call here
let id = document.getElementById('vId');
if (id !== null) {
id = id['value'];
}
this.getTotalAlerts(id);
}

getVehicleDetail(name: any, arr: any): any {
let response: any = this.translate.instant('GLOBAL.NO_DATA');

if (name === 'engHours') {
  if (arr.parameters === undefined) {
    return '0';
  } else {
    arr.parameters.forEach(element => {
      if (element.label === 'Engine hours') {
        response =
          Math.round(element.value * 100) / 100 + '' + element.unit;
      }
    });
  }
} else if (name === 'fuelLevel') {
  if (arr.parameters === undefined) {
    return '0';
  } else {
    arr.parameters.forEach(element => {
      if (element.label === 'Fuel tank level') {
        response = (Math.round(element.value * 100) / 100) + '' + element.unit;
      }
    });
  }
}
return response;

  verticalOffset: verticalOffset

  // callout: {
  //  type: "line", // autocasts as new LineCallout3D()
  //  color: "white",
  //  size: 2,
  //  border: {
  //    color: color
  //  }
  // }
};

getBrandColor() {
switch (this.userService.getBrand()) {
case BrandNames.CIH:
return BrandColors.CIH;

  case BrandNames.NH:
    return BrandColors.NH;

  default:
    break;
}

}

getTotalAlerts(id) {
let count: any = 0;
let res: any = null;
this.apiService.getUnitFaults(id).subscribe(response => {
res = response;
if (res['content'] !== undefined) {
res['content'].forEach(element => {
if (element.severity === 'HIGH') {
count += element.occurrences;
}
});
if (count > 0) {
this.result =
'' +
count +
' ' +
'' +
this.translate.instant('PAGE_MAIN.ALERTS.HIGH_FAULTS') +
'';
document.getElementById('totalAlerts').innerHTML = this.result;
} else {
document.getElementById(
'totalAlerts'
).innerHTML = this.translate.instant(
'PAGE_MAIN.ALERTS.NO_ACTIVE_ALERTS'
);
}
} else {
const doc = document.getElementById('totalAlerts');
if (doc !== null) {
doc.innerHTML = this.translate.instant(
'PAGE_MAIN.ALERTS.NO_ACTIVE_ALERTS'
);
}
}
});
}
ngOnInit() {
this.mapDataLoaded = true;
// alert('test2');
this.totalMapheight = this.calulateHeight();

////console.log(mapView);
// //console.log(this.map);
//console.log(this._zoom);
if (this._zoom === 3) {
  // alert("test");
  // this.initializeMap();
} else {
  // this.initializeMap();
  ////console.log(mapView);
}
const dojoConfig = {
  has: {
    'esri-featurelayer-webgl': 1
  }
};


this.fleetType = this.fleetService.getFleetType();
this.filterValue = this.fleetService.getFilterValue();
this.fleetService.fleetType$.subscribe(data => {
  if (data !== null) {
    if (this._router.url === '/fleet/overview/map') {
      this.vType = data;

      let arr = [];
      const vObj = {};
      // tslint:disable-next-line:forin
      for (const key in this.vType) {
        if (this.vType.hasOwnProperty(key)) {
          const val = this.vType[key];
          val.forEach(element => {
            if (element['location'] !== undefined) {
              arr.push(element);
            }
          });
        }
        vObj[key] = arr;
        arr = [];
      }
      this.fleetType = vObj;
    } else {
      this.fleetType = data;
    }
    this.vehicleDataLoaded = this._fleetfilterStore.vehicleDataLoaded;
  }
});

this.fleetService.fleetTypeCollapse$.subscribe(data => {
  this.fleetTypeCollapse = data;
});

this.fleetService.clickedId$.subscribe(id => {
  this.clickedId = id;
});

this.collapse = this.fleetService.getCollapseValue();

this.fleetTypeCollapse = this.fleetService.getFleetTypeCollapse();

this.vehicleTypeCollapse = this.fleetService.getVehicleTypeCollapse();
this.filterOptions = this.fleetService.getFilterOptions();

this.titleValue = this.fleetService.getTitleValue();

}

exportID(vehicle) {
this.vehicleId.emit(vehicle.id);
}

changeRoute(vehicle) {

this.ngOnInit();
this.ngAfterViewInit();
this.fleetdata.vehicleId = vehicle;
//this.mapDataLoaded = false;
this.initializeMap(vehicle);

// mapView.goTo({
//   center: [vehicle.location[1], vehicle.location[0]],
//   zoom: 18
// });
// alert('test1');
const divScrollElement = this.panel.nativeElement.querySelector('.ps__rail-y').attributes.style;
const scrollCurrentTopPosition = divScrollElement.value
  .split(';')[0]
  .substring(4, divScrollElement.value.split(';')[0].length - 2);
localStorage.setItem('scrollTop', scrollCurrentTopPosition);

vehicle['imageUrl'] = this.utilService.getImageUrl(vehicle);
const id = vehicle.id;
const name = vehicle.name;

this.fleetService.vId = id;
this.fleetService.vName = name;

this.selectedVehicleService.updateSelectedVehicle(vehicle);

const currentRoute = this._location
  .path()
  .substring(1)
  .split('/')[1];

this.fleetdata.vehicleDetail = vehicle;
this.fleetdata.showMapVehicleInfo = true;

}

resetRoute() {
this.clickedId = '';

this.fleetService._clickedId.next(0);
this.fleetService._elementCount.next(0);

const currentRoute = this._location
  .path()
  .substring(1)
  .split('/')[1];

this.fleetService.vName = this.updatedCount + ' Fleets';
this.fleetService.vId = this.updatedVCount + ' Vehicles';

const doc = document.getElementsByClassName('list-active');

this.fleetdata.vehicleDetail = null;
this.fleetdata.vehicleId = null;

if (doc.length !== 0) {
  doc[0].classList.remove('list-active');
}
if (this._router.url === '/fleet/overview/map') {
  this.fleetdata.showMapVehicleInfo = false;
} else {
  // this._router.navigate(['/fleet/service']);
}

}

updateCollapseValue(collapse) {
this.fleetService.setCollapseValue(collapse);
}

updateFilterValue(filterValue) {
this.fleetService.setFilterValue(filterValue);
}

}

valuechange($event, item) {
this.fleetService.setFilterValue($event.id);
this.filterValue = $event.id;
}
navOverview() {
this._router.navigate(['/fleet/overview']);
}
}

webpack / typings / Arcgis 3.18 / Angular2

Hi - My teammate is having trouble getting ClusterLayer.js (from esri examples) working in an Angular 2 app that uses Arcgis 3.18 and webpack. It looks like your 3.18 test app is written in pure JS and does not have a typings file for it. Can you please suggest ways we can get FlareClusterLayer working in our TypeScript environment using 3.18. We would upgrade to 4.1 but apparantly there are features not yet implemented in that version that we rely on. Thanks!

ArcGIS Javascript API 4.10 - 4.11

Hi~
When I use ArcGIS Javascript API 4.10
I received an error message about "engine/graphics/GFXObject"

Load new data on button click

Hi Nick,

I would really like to use your FlareClusterLayer_V3 in an application that I'm working on but I'm not very familiar with Dojo modules and how exactly they work. I've been trying to figure out a way to load new data into the map and re-cluster it on a button click event but I could only get it to work for the first click. On subsequent clicks, I get an error in the console saying "this.map is undefined".

This is basically what I've tried doing without success:

on(dom.byId('theButton'), 'click', function(){
   esriRequest({
        url: "data.json",
        handleAs: "json"
    })
    .then(function(resp) {
        formatData(resp);
    })
    .then(function() {
        initLayer();
    }); 
});

Ideally I would like to have a function I could call on a button click and pass it a URL where to get the data from and then re-cluster and re-load the new data on the map, ie (vanilla js):

document.getElementById("btn").addEventListener("click", function(){
    Fn('data.json');
});

I would appreciate your help.

Thanks,
DOOMitru

nickcam / flareclusterlayer Goto Github PK

flareclusterlayer's People

Contributors

Stargazers

Watchers

Forkers

flareclusterlayer's Issues

FlareClusterLayer version

Arcgis for js version

Vue version

problem

Recommend Projects

Recommend Topics

Recommend Org