nickcam / flareclusterlayer Goto Github PK
View Code? Open in Web Editor NEWArcGIS javascript custom graphics layer. Create clusters...with flares.
Home Page: https://flareclusterlayer.azurewebsites.net/index_v4.html
License: MIT License
ArcGIS javascript custom graphics layer. Create clusters...with flares.
Home Page: https://flareclusterlayer.azurewebsites.net/index_v4.html
License: MIT License
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!
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??
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
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
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?
What clustering algorithm do you use?
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.
Does the 'always' mode for the 'Display cluster area mode' work in your 4.0 example?
What is the reason for this?
Looking forward to use vueJS to finish aggregation analysis
Can you add support for v4.1 of the Esri JS API?
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.
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!
Is it possible to activate/add tooltip similar to cluster flare tooltip, for individual points which are not in cluster ?
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.
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.
Got another question for you Nick. Is there a way to add multiple FCLs (V3) to a map with different default simple marker symbols?
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.
Thanks!
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.
Any help would be appreciated!
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.
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;
/**
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']);
}
}
FlareClusterLayer.js 用javascript引用时 js里面的define 报错define is not defined
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 🔢
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
4.X
4.5
2.5.2
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
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?
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
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.
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.
Since last update of Chrome the flare is cut inside a small rectangle
Have no clue
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
});
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);)
/*
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;
/**
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,
] = 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);
}
@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.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);
}
// 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']);
}
}
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?
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?
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.
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.
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.
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!
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)
Hi~
When I use ArcGIS Javascript API 4.10
I received an error message about "engine/graphics/GFXObject"
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!
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.
Not sure if you were aware of this or not.
Cheers,
Dumitru
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
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
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
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!
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.