nickcam
commented
5 years ago Hey man, sorry I can't really help with that code block.
You should also be wrapping your code in comments using markdown, put the code blocks inside three backticks. Check out the markdown guide. You can also specify the language of the code, which will make it even easier to read. https://guides.github.com/features/mastering-markdown/
From a quick glance it seems you've set the right property, singleFlareTooltipProperty, but I can't go through that wall of code completely.
If you can create a cut down demo of the problem using an online editor I could take a look at that. Stackblitz - https://stackblitz.com/ - has good support for angular apps to demo features or problems.
pyalam
HI Nicak, Im mouse overing on the clustergroup but the flare tool tips are not showing up.Could you please look into my code .Am i missing any property?.Please look into my code below.
/ Copyright 2018 Esri Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. /
import { Component, OnInit, ViewChild, ElementRef, Input, Output, EventEmitter, HostListener } from '@angular/core'; import { loadModules } from 'esri-loader'; import esri = __esri; import { Urls } from '@enums/urls.enum'; import { BrandNames, BrandColors } from '@enums/brand.enum'; import { AppSettingsService } from '@services/app-settings/app-settings.service'; import { UserService } from '@services/user/user.service'; import { trigger, state, style, transition, animate } from '@angular/animations'; import { Router } from '@angular/router'; import { FleetDataService } from '@fleet/services/fleet-data.service'; import { DatePipe } from '@angular/common'; import { ApiService } from '@services/api/api.service'; import { ToolbarToggleFilterbarService } from '@fleet/services/events/toolbar-toggle-filterbar.service'; import { TranslateService } from '@ngx-translate/core'; import { FleetFilterDataStoreService } from '@fleet/services/fleet-filter-data-store/fleet-filter-data-store.service'; import { Location } from '@angular/common'; import { markParentViewsForCheck } from '@angular/core/src/view/util'; import { Popup } from 'auth0-js'; import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar'; import { FleetService } from '../../services/fleet.service'; import { SelectedVehicleService } from '@fleet/services/events/selected-vehicle.service'; import { UtilService } from '@services/util/util.service'; import { NavmapService } from '@fleet/services/navmap.service'; import { FaultsFilterDataService } from '@fleet/services/fleet-faults-filter/faults-filter-data.service';
@Component({ selector: 'app-fleet-map', templateUrl: './fleet-map.component.html', styleUrls: ['./fleet-map.component.css'], animations: [ trigger('collapseVehicles', [ state( 'collapsed', style({ height: '0', minHeight: '0', display: 'none', overflow: 'hidden' }) ), state('expanded', style({ height: '*' })), transition('expanded <=> collapsed', animate('350ms cubic-bezier(0.4, 0.0, 0.2, 1)')) ]) ] }) export class FleetMapComponent implements OnInit { imageUrl: any; map: esri.Map; // private mapView: esri.MapView; mapViewProperties: esri.MapViewProperties;
filtersBarOpen: boolean; _refData: any; @ViewChild('mapViewNode') public mapViewEl: ElementRef;
/**
@private _basemap sets type of map */ private _zoom = 10; private _center: Array = [0.1278, 51.5074];
private _basemap = 'gray';
vehicleData: any; totalMapheight: string; result: any = this.translate.instant('PAGE_MAIN.ALERTS.NO_ACTIVE_ALERTS'); // ------------------------------------------New
@ViewChild(PerfectScrollbarComponent) public directiveScroll: PerfectScrollbarComponent; @ViewChild('listPS', { read: ElementRef }) public panel: ElementRef;
public brands = BrandNames;
@Input() vehicleId;
@Input() selectedValue; collapse;
fleetType = {};
vehicleType = {}; titleValue; filterValue = 'fleet'; filterOptions = []; fleetTypeCollapse = {}; vehicleTypeCollapse = {}; vehicleTypeSize = {}; fleetTypeSize = {}; filtersBarOpen1: boolean;
showReset = false; clickedId; showLoader = true; sctollTopPosition = 0; mapDataLoaded: boolean = true;
// ------------------------------
constructor( private userService: UserService, public _router: Router, public fleetdata: FleetDataService, public datepipe: DatePipe, public apiService: ApiService, toggleFilterBarService: ToolbarToggleFilterbarService, public readonly translate: TranslateService, public fleetFilterDataStore: FleetFilterDataStoreService, public location: Location,
public _location: Location,
public fleetService: FleetService, public selectedVehicleService: SelectedVehicleService, public _fleetfilterStore: FleetFilterDataStoreService, public utilService: UtilService, public elem: ElementRef, public navMapService: NavmapService, public faultFiltersDataService: FaultsFilterDataService, public elRef: ElementRef, public router: Router, public translateService: TranslateService ) { toggleFilterBarService.openFiltersBar$.subscribe(value => { this.filtersBarOpen = value; this.totalMapheight = this.calulateHeight(); });
this.translateService .get('GLOBAL.FLEET.SINGULAR') .subscribe(data => this.fleetService.updateFilterOptionValue(0, data));
this.translateService .get('GLOBAL.VEHICLE_TYPE') .subscribe(data => this.fleetService.updateFilterOptionValue(1, data));
toggleFilterBarService.openFiltersBar$.subscribe(value => { this.filtersBarOpen1 = value; }); this.initializeMap("");
//this.mapDataLoaded = true; }
async initializeMap(vehicle: any) { //alert("test");
try { const [ EsriMap, EsriSceneView, MapView, EsriPoint, EsriLegend, EsriRequest, EsriConfig, EsriFeatureLayer, EsriSearch, UniqueValueRenderer, PopupTemplate, LabelClass, jsonUtils, Expand, LayerList, BasemapGallery, Zoom, Locate, fcl, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, TextSymbol, TextSymbol3DLayer, Font, ClassBreaksRenderer, watchUtils, webMercatorUtils, SpatialReference, Color, Graphic
] = await loadModules([ 'esri/Map', 'esri/views/SceneView', 'esri/views/MapView', 'esri/geometry/Point', 'esri/widgets/Legend', 'esri/request', 'esri/config', 'esri/layers/FeatureLayer', 'esri/widgets/Search', 'esri/renderers/UniqueValueRenderer', 'esri/PopupTemplate', 'esri/layers/support/LabelClass', 'esri/symbols/support/jsonUtils', 'esri/widgets/Expand', 'esri/widgets/LayerList', 'esri/widgets/BasemapGallery', 'esri/widgets/Zoom', 'esri/widgets/Locate', 'http://tl0235085.cnh1.cnhgroup.cnh.com:8080/fcl/flareclusterlayer_v4.js', //'https://euevoawain050.azurewebsites.net/fcl/flareclusterlayer_v4.js', 'esri/symbols/SimpleMarkerSymbol', 'esri/symbols/SimpleLineSymbol', 'esri/symbols/SimpleFillSymbol', 'esri/symbols/TextSymbol', 'esri/symbols/TextSymbol3DLayer', 'esri/symbols/Font', 'esri/renderers/ClassBreaksRenderer', 'esri/core/watchUtils', 'esri/geometry/support/webMercatorUtils', 'esri/geometry/SpatialReference', 'dojo/_base/Color', 'esri/Graphic'
]);
let map,
// 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.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({
});
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;
} });
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.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']); } }