|
|
@ -16,33 +16,40 @@ |
|
|
|
|
|
|
|
|
import L, { |
|
|
import L, { |
|
|
FeatureGroup, |
|
|
FeatureGroup, |
|
|
|
|
|
Icon, |
|
|
LatLngBounds, |
|
|
LatLngBounds, |
|
|
LatLngTuple, |
|
|
LatLngTuple, |
|
|
markerClusterGroup, |
|
|
markerClusterGroup, |
|
|
MarkerClusterGroup, |
|
|
MarkerClusterGroup, |
|
|
MarkerClusterGroupOptions |
|
|
MarkerClusterGroupOptions |
|
|
} from 'leaflet'; |
|
|
} from 'leaflet'; |
|
|
|
|
|
import tinycolor from 'tinycolor2'; |
|
|
import 'leaflet-providers'; |
|
|
import 'leaflet-providers'; |
|
|
import 'leaflet.markercluster/dist/leaflet.markercluster'; |
|
|
import 'leaflet.markercluster/dist/leaflet.markercluster'; |
|
|
|
|
|
|
|
|
import { |
|
|
import { |
|
|
|
|
|
defaultSettings, |
|
|
FormattedData, |
|
|
FormattedData, |
|
|
MapSettings, |
|
|
MapSettings, |
|
|
MarkerSettings, |
|
|
MarkerSettings, |
|
|
PolygonSettings, |
|
|
PolygonSettings, |
|
|
PolylineSettings, |
|
|
PolylineSettings, |
|
|
|
|
|
ReplaceInfo, |
|
|
UnitedMapSettings |
|
|
UnitedMapSettings |
|
|
} from './map-models'; |
|
|
} from './map-models'; |
|
|
import { Marker } from './markers'; |
|
|
import { Marker } from './markers'; |
|
|
import { BehaviorSubject, Observable, of } from 'rxjs'; |
|
|
import { Observable, of } from 'rxjs'; |
|
|
import { filter } from 'rxjs/operators'; |
|
|
|
|
|
import { Polyline } from './polyline'; |
|
|
import { Polyline } from './polyline'; |
|
|
import { Polygon } from './polygon'; |
|
|
import { Polygon } from './polygon'; |
|
|
import { createTooltip, parseArray, safeExecute } from '@home/components/widget/lib/maps/maps-utils'; |
|
|
import { |
|
|
|
|
|
createLoadingDiv, |
|
|
|
|
|
createTooltip, |
|
|
|
|
|
parseArray, |
|
|
|
|
|
parseData, |
|
|
|
|
|
safeExecute |
|
|
|
|
|
} from '@home/components/widget/lib/maps/maps-utils'; |
|
|
import { WidgetContext } from '@home/models/widget-component.models'; |
|
|
import { WidgetContext } from '@home/models/widget-component.models'; |
|
|
import { DatasourceData } from '@shared/models/widget.models'; |
|
|
import { deepClone, isDefinedAndNotEmptyStr } from '@core/utils'; |
|
|
import { deepClone, isDefinedAndNotNull } from '@core/utils'; |
|
|
|
|
|
import {newArray} from "@angular/compiler/src/util"; |
|
|
import {newArray} from "@angular/compiler/src/util"; |
|
|
import {isArray} from "rxjs/internal-compatibility"; |
|
|
import {isArray} from "rxjs/internal-compatibility"; |
|
|
|
|
|
|
|
|
@ -52,8 +59,6 @@ export default abstract class LeafletMap { |
|
|
polylines: Map<string, Polyline> = new Map(); |
|
|
polylines: Map<string, Polyline> = new Map(); |
|
|
polygons: Map<string, Polygon> = new Map(); |
|
|
polygons: Map<string, Polygon> = new Map(); |
|
|
map: L.Map; |
|
|
map: L.Map; |
|
|
map$: BehaviorSubject<L.Map> = new BehaviorSubject(null); |
|
|
|
|
|
ready$: Observable<L.Map> = this.map$.pipe(filter(map => !!map)); |
|
|
|
|
|
options: UnitedMapSettings; |
|
|
options: UnitedMapSettings; |
|
|
bounds: L.LatLngBounds; |
|
|
bounds: L.LatLngBounds; |
|
|
datasources: FormattedData[]; |
|
|
datasources: FormattedData[]; |
|
|
@ -61,6 +66,16 @@ export default abstract class LeafletMap { |
|
|
points: FeatureGroup; |
|
|
points: FeatureGroup; |
|
|
markersData: FormattedData[] = []; |
|
|
markersData: FormattedData[] = []; |
|
|
polygonsData: FormattedData[] = []; |
|
|
polygonsData: FormattedData[] = []; |
|
|
|
|
|
defaultMarkerIconInfo: { size: number[], icon: Icon }; |
|
|
|
|
|
loadingDiv: JQuery<HTMLElement>; |
|
|
|
|
|
loading = false; |
|
|
|
|
|
replaceInfoLabelMarker: Array<ReplaceInfo> = []; |
|
|
|
|
|
markerLabelText: string; |
|
|
|
|
|
replaceInfoTooltipMarker: Array<ReplaceInfo> = []; |
|
|
|
|
|
markerTooltipText: string; |
|
|
|
|
|
drawRoutes: boolean; |
|
|
|
|
|
showPolygon: boolean; |
|
|
|
|
|
updatePending = false; |
|
|
|
|
|
|
|
|
protected constructor(public ctx: WidgetContext, |
|
|
protected constructor(public ctx: WidgetContext, |
|
|
public $container: HTMLElement, |
|
|
public $container: HTMLElement, |
|
|
@ -69,8 +84,8 @@ export default abstract class LeafletMap { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public initSettings(options: MapSettings) { |
|
|
public initSettings(options: MapSettings) { |
|
|
const { initCallback, |
|
|
this.options.tinyColor = tinycolor(this.options.color || defaultSettings.color); |
|
|
disableScrollZooming, |
|
|
const { disableScrollZooming, |
|
|
useClusterMarkers, |
|
|
useClusterMarkers, |
|
|
zoomOnClick, |
|
|
zoomOnClick, |
|
|
showCoverageOnHover, |
|
|
showCoverageOnHover, |
|
|
@ -82,9 +97,6 @@ export default abstract class LeafletMap { |
|
|
if (disableScrollZooming) { |
|
|
if (disableScrollZooming) { |
|
|
this.map.scrollWheelZoom.disable(); |
|
|
this.map.scrollWheelZoom.disable(); |
|
|
} |
|
|
} |
|
|
if (initCallback) { |
|
|
|
|
|
setTimeout(options.initCallback, 0); |
|
|
|
|
|
} |
|
|
|
|
|
if (useClusterMarkers) { |
|
|
if (useClusterMarkers) { |
|
|
const clusteringSettings: MarkerClusterGroupOptions = { |
|
|
const clusteringSettings: MarkerClusterGroupOptions = { |
|
|
zoomToBoundsOnClick: zoomOnClick, |
|
|
zoomToBoundsOnClick: zoomOnClick, |
|
|
@ -100,7 +112,6 @@ export default abstract class LeafletMap { |
|
|
clusteringSettings.disableClusteringAtZoom = Math.floor(maxZoom); |
|
|
clusteringSettings.disableClusteringAtZoom = Math.floor(maxZoom); |
|
|
} |
|
|
} |
|
|
this.markersCluster = markerClusterGroup(clusteringSettings); |
|
|
this.markersCluster = markerClusterGroup(clusteringSettings); |
|
|
this.ready$.subscribe(map => map.addLayer(this.markersCluster)); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -239,6 +250,22 @@ export default abstract class LeafletMap { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
public setLoading(loading: boolean) { |
|
|
|
|
|
if (this.loading !== loading) { |
|
|
|
|
|
this.loading = loading; |
|
|
|
|
|
if (this.loading) { |
|
|
|
|
|
if (!this.loadingDiv) { |
|
|
|
|
|
this.loadingDiv = createLoadingDiv(this.ctx.translate.instant('common.loading')); |
|
|
|
|
|
} |
|
|
|
|
|
this.$container.append(this.loadingDiv[0]); |
|
|
|
|
|
} else { |
|
|
|
|
|
if (this.loadingDiv) { |
|
|
|
|
|
this.loadingDiv.remove(); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
public setMap(map: L.Map) { |
|
|
public setMap(map: L.Map) { |
|
|
this.map = map; |
|
|
this.map = map; |
|
|
if (this.options.useDefaultCenterPosition) { |
|
|
if (this.options.useDefaultCenterPosition) { |
|
|
@ -252,11 +279,13 @@ export default abstract class LeafletMap { |
|
|
if (this.options.editablePolygon) { |
|
|
if (this.options.editablePolygon) { |
|
|
this.addPolygonControl(); |
|
|
this.addPolygonControl(); |
|
|
} |
|
|
} |
|
|
this.map$.next(this.map); |
|
|
if (this.options.useClusterMarkers) { |
|
|
} |
|
|
this.map.addLayer(this.markersCluster); |
|
|
|
|
|
} |
|
|
public setDataSources(dataSources: FormattedData[]) { |
|
|
if (this.updatePending) { |
|
|
this.datasources = dataSources; |
|
|
this.updatePending = false; |
|
|
|
|
|
this.updateData(this.drawRoutes, this.showPolygon); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public saveMarkerLocation(_e: FormattedData, lat?: number, lng?: number): Observable<any> { |
|
|
public saveMarkerLocation(_e: FormattedData, lat?: number, lng?: number): Observable<any> { |
|
|
@ -308,7 +337,7 @@ export default abstract class LeafletMap { |
|
|
this.map.once('zoomend', () => { |
|
|
this.map.once('zoomend', () => { |
|
|
let minZoom = this.options.minZoomLevel; |
|
|
let minZoom = this.options.minZoomLevel; |
|
|
if (this.options.defaultZoomLevel) { |
|
|
if (this.options.defaultZoomLevel) { |
|
|
minZoom = Math.min(minZoom, this.options.defaultZoomLevel); |
|
|
minZoom = Math.max(minZoom, this.options.defaultZoomLevel); |
|
|
} |
|
|
} |
|
|
if (this.map.getZoom() > minZoom) { |
|
|
if (this.map.getZoom() > minZoom) { |
|
|
this.map.setZoom(minZoom, { animate: false }); |
|
|
this.map.setZoom(minZoom, { animate: false }); |
|
|
@ -327,7 +356,7 @@ export default abstract class LeafletMap { |
|
|
if (!expression) return null; |
|
|
if (!expression) return null; |
|
|
const lat = expression[this.options.latKeyName]; |
|
|
const lat = expression[this.options.latKeyName]; |
|
|
const lng = expression[this.options.lngKeyName]; |
|
|
const lng = expression[this.options.lngKeyName]; |
|
|
if (!isDefinedAndNotNull(lat) || isNaN(lat) || !isDefinedAndNotNull(lng) || isNaN(lng)) { |
|
|
if (!isDefinedAndNotEmptyStr(lat) || isNaN(lat) || !isDefinedAndNotEmptyStr(lng) || isNaN(lng)) { |
|
|
return null; |
|
|
return null; |
|
|
} |
|
|
} |
|
|
return L.latLng(lat, lng) as L.LatLng; |
|
|
return L.latLng(lat, lng) as L.LatLng; |
|
|
@ -352,28 +381,32 @@ export default abstract class LeafletMap { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
convertToPolygonFormat(points: Array<any>): Array<any> { |
|
|
convertToPolygonFormat(points: Array<any>): Array<any> { |
|
|
if (points.length) { |
|
|
if (points.length) { |
|
|
return points.map(point=> { |
|
|
return points.map(point=> { |
|
|
if (point.length) { |
|
|
if (point.length) { |
|
|
return this.convertToPolygonFormat(point); |
|
|
return this.convertToPolygonFormat(point); |
|
|
} else { |
|
|
|
|
|
return [point.lat, point.lng]; |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} else { |
|
|
} else { |
|
|
return [] |
|
|
return [point.lat, point.lng]; |
|
|
} |
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} else { |
|
|
|
|
|
return [] |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
convertPolygonToCustomFormat(expression: Array<Array<any>>): object { |
|
|
convertPolygonToCustomFormat(expression: Array<Array<any>>): object { |
|
|
return { |
|
|
return { |
|
|
[this.options.polygonKeyName] : this.convertToPolygonFormat(expression) |
|
|
[this.options.polygonKeyName] : this.convertToPolygonFormat(expression) |
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
updateData(data: DatasourceData[], formattedData: FormattedData[], drawRoutes: boolean, showPolygon: boolean) { |
|
|
updateData(drawRoutes: boolean, showPolygon: boolean) { |
|
|
this.ready$.subscribe(() => { |
|
|
this.drawRoutes = drawRoutes; |
|
|
|
|
|
this.showPolygon = showPolygon; |
|
|
|
|
|
if (this.map) { |
|
|
|
|
|
const data = this.ctx.data; |
|
|
|
|
|
const formattedData = parseData(this.ctx.data); |
|
|
if (drawRoutes) { |
|
|
if (drawRoutes) { |
|
|
this.updatePolylines(parseArray(data), false); |
|
|
this.updatePolylines(parseArray(data), false); |
|
|
} |
|
|
} |
|
|
@ -381,28 +414,37 @@ export default abstract class LeafletMap { |
|
|
this.updatePolygons(formattedData, false); |
|
|
this.updatePolygons(formattedData, false); |
|
|
} |
|
|
} |
|
|
this.updateMarkers(formattedData, false); |
|
|
this.updateMarkers(formattedData, false); |
|
|
this.updateBoundsInternal(drawRoutes, showPolygon); |
|
|
this.updateBoundsInternal(); |
|
|
}); |
|
|
if (this.options.draggableMarker || this.options.editablePolygon) { |
|
|
|
|
|
this.datasources = formattedData; |
|
|
|
|
|
} |
|
|
|
|
|
} else { |
|
|
|
|
|
this.updatePending = true; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private updateBoundsInternal(drawRoutes: boolean, showPolygon: boolean) { |
|
|
private updateBoundsInternal() { |
|
|
const bounds = new L.LatLngBounds(null, null); |
|
|
const bounds = new L.LatLngBounds(null, null); |
|
|
if (drawRoutes) { |
|
|
if (this.drawRoutes) { |
|
|
this.polylines.forEach((polyline) => { |
|
|
this.polylines.forEach((polyline) => { |
|
|
bounds.extend(polyline.leafletPoly.getBounds()); |
|
|
bounds.extend(polyline.leafletPoly.getBounds()); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
if (showPolygon) { |
|
|
if (this.showPolygon) { |
|
|
this.polygons.forEach((polygon) => { |
|
|
this.polygons.forEach((polygon) => { |
|
|
bounds.extend(polygon.leafletPoly.getBounds()); |
|
|
bounds.extend(polygon.leafletPoly.getBounds()); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
this.markers.forEach((marker) => { |
|
|
if ((this.options as MarkerSettings).useClusterMarkers && this.markersCluster.getBounds().isValid()) { |
|
|
bounds.extend(marker.leafletMarker.getLatLng()); |
|
|
bounds.extend(this.markersCluster.getBounds()); |
|
|
}); |
|
|
} else { |
|
|
|
|
|
this.markers.forEach((marker) => { |
|
|
|
|
|
bounds.extend(marker.leafletMarker.getLatLng()); |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const mapBounds = this.map.getBounds(); |
|
|
const mapBounds = this.map.getBounds(); |
|
|
if (bounds.isValid() && (!this.bounds || !mapBounds.contains(bounds))) { |
|
|
if (bounds.isValid() && (!this.bounds || !this.bounds.isValid() || !this.bounds.equals(bounds) && !mapBounds.contains(bounds))) { |
|
|
this.bounds = bounds; |
|
|
this.bounds = bounds; |
|
|
this.fitBounds(bounds); |
|
|
this.fitBounds(bounds); |
|
|
} |
|
|
} |
|
|
@ -411,41 +453,57 @@ export default abstract class LeafletMap { |
|
|
// Markers
|
|
|
// Markers
|
|
|
updateMarkers(markersData: FormattedData[], updateBounds = true, callback?) { |
|
|
updateMarkers(markersData: FormattedData[], updateBounds = true, callback?) { |
|
|
const rawMarkers = markersData.filter(mdata => !!this.convertPosition(mdata)); |
|
|
const rawMarkers = markersData.filter(mdata => !!this.convertPosition(mdata)); |
|
|
this.ready$.subscribe(() => { |
|
|
const toDelete = new Set(Array.from(this.markers.keys())); |
|
|
const keys: string[] = []; |
|
|
const createdMarkers: Marker[] = []; |
|
|
rawMarkers.forEach(data => { |
|
|
const updatedMarkers: Marker[] = []; |
|
|
if (data.rotationAngle || data.rotationAngle === 0) { |
|
|
const deletedMarkers: Marker[] = []; |
|
|
const currentImage = this.options.useMarkerImageFunction ? |
|
|
let m: Marker; |
|
|
safeExecute(this.options.markerImageFunction, |
|
|
rawMarkers.forEach(data => { |
|
|
[data, this.options.markerImages, markersData, data.dsIndex]) : this.options.currentImage; |
|
|
if (data.rotationAngle || data.rotationAngle === 0) { |
|
|
const style = currentImage ? 'background-image: url(' + currentImage.url + ');' : ''; |
|
|
const currentImage = this.options.useMarkerImageFunction ? |
|
|
this.options.icon = L.divIcon({ |
|
|
safeExecute(this.options.markerImageFunction, |
|
|
html: `<div class="arrow"
|
|
|
[data, this.options.markerImages, markersData, data.dsIndex]) : this.options.currentImage; |
|
|
style="transform: translate(-10px, -10px) |
|
|
const style = currentImage ? 'background-image: url(' + currentImage.url + ');' : ''; |
|
|
rotate(${data.rotationAngle}deg); |
|
|
this.options.icon = L.divIcon({ |
|
|
${style}"><div>` |
|
|
html: `<div class="arrow"
|
|
|
}); |
|
|
style="transform: translate(-10px, -10px) |
|
|
} else { |
|
|
rotate(${data.rotationAngle}deg); |
|
|
this.options.icon = null; |
|
|
${style}"><div>` |
|
|
} |
|
|
|
|
|
if (this.markers.get(data.entityName)) { |
|
|
|
|
|
this.updateMarker(data.entityName, data, markersData, this.options) |
|
|
|
|
|
} else { |
|
|
|
|
|
this.createMarker(data.entityName, data, markersData, this.options as MarkerSettings, updateBounds, callback); |
|
|
|
|
|
} |
|
|
|
|
|
keys.push(data.entityName); |
|
|
|
|
|
}); |
|
|
|
|
|
const toDelete: string[] = []; |
|
|
|
|
|
this.markers.forEach((v, mKey) => { |
|
|
|
|
|
if (!keys.includes(mKey)) { |
|
|
|
|
|
toDelete.push(mKey); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
toDelete.forEach((key) => { |
|
|
|
|
|
this.deleteMarker(key); |
|
|
|
|
|
}); |
|
|
}); |
|
|
this.markersData = markersData; |
|
|
} else { |
|
|
}); |
|
|
this.options.icon = null; |
|
|
|
|
|
} |
|
|
|
|
|
if (this.markers.get(data.entityName)) { |
|
|
|
|
|
m = this.updateMarker(data.entityName, data, markersData, this.options); |
|
|
|
|
|
if (m) { |
|
|
|
|
|
updatedMarkers.push(m); |
|
|
|
|
|
} |
|
|
|
|
|
} else { |
|
|
|
|
|
m = this.createMarker(data.entityName, data, markersData, this.options as MarkerSettings, updateBounds, callback); |
|
|
|
|
|
if (m) { |
|
|
|
|
|
createdMarkers.push(m); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
toDelete.delete(data.entityName); |
|
|
|
|
|
}); |
|
|
|
|
|
toDelete.forEach((key) => { |
|
|
|
|
|
m = this.deleteMarker(key); |
|
|
|
|
|
if (m) { |
|
|
|
|
|
deletedMarkers.push(m); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
this.markersData = markersData; |
|
|
|
|
|
if ((this.options as MarkerSettings).useClusterMarkers) { |
|
|
|
|
|
if (createdMarkers.length) { |
|
|
|
|
|
this.markersCluster.addLayers(createdMarkers.map(marker => marker.leafletMarker)); |
|
|
|
|
|
} |
|
|
|
|
|
if (updatedMarkers.length) { |
|
|
|
|
|
this.markersCluster.refreshClusters(updatedMarkers.map(marker => marker.leafletMarker)) |
|
|
|
|
|
} |
|
|
|
|
|
if (deletedMarkers.length) { |
|
|
|
|
|
this.markersCluster.removeLayers(deletedMarkers.map(marker => marker.leafletMarker)); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
dragMarker = (e, data = {} as FormattedData) => { |
|
|
dragMarker = (e, data = {} as FormattedData) => { |
|
|
@ -454,48 +512,45 @@ export default abstract class LeafletMap { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings, |
|
|
private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings, |
|
|
updateBounds = true, callback?) { |
|
|
updateBounds = true, callback?): Marker { |
|
|
const newMarker = new Marker(this.convertPosition(data), settings, data, dataSources, this.dragMarker); |
|
|
const newMarker = new Marker(this, this.convertPosition(data), settings, data, dataSources, this.dragMarker); |
|
|
if (callback) |
|
|
if (callback) { |
|
|
newMarker.leafletMarker.on('click', () => { callback(data, true) }); |
|
|
newMarker.leafletMarker.on('click', () => { |
|
|
if (this.bounds && updateBounds) |
|
|
callback(data, true) |
|
|
this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng())); |
|
|
}); |
|
|
this.markers.set(key, newMarker); |
|
|
} |
|
|
if (this.options.useClusterMarkers) { |
|
|
if (this.bounds && updateBounds && !(this.options as MarkerSettings).useClusterMarkers) { |
|
|
this.markersCluster.addLayer(newMarker.leafletMarker); |
|
|
this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng())); |
|
|
} |
|
|
} |
|
|
else { |
|
|
this.markers.set(key, newMarker); |
|
|
this.map.addLayer(newMarker.leafletMarker); |
|
|
if (!this.options.useClusterMarkers) { |
|
|
} |
|
|
this.map.addLayer(newMarker.leafletMarker); |
|
|
|
|
|
} |
|
|
|
|
|
return newMarker; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private updateMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings) { |
|
|
private updateMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings): Marker { |
|
|
const marker: Marker = this.markers.get(key); |
|
|
const marker: Marker = this.markers.get(key); |
|
|
const location = this.convertPosition(data) |
|
|
const location = this.convertPosition(data); |
|
|
if (!location.equals(marker.location)) { |
|
|
marker.updateMarkerPosition(location); |
|
|
marker.updateMarkerPosition(location); |
|
|
|
|
|
} |
|
|
|
|
|
if (settings.showTooltip) { |
|
|
if (settings.showTooltip) { |
|
|
marker.updateMarkerTooltip(data); |
|
|
marker.updateMarkerTooltip(data); |
|
|
} |
|
|
} |
|
|
if (settings.useClusterMarkers) { |
|
|
|
|
|
this.markersCluster.refreshClusters() |
|
|
|
|
|
} |
|
|
|
|
|
marker.setDataSources(data, dataSources); |
|
|
marker.setDataSources(data, dataSources); |
|
|
marker.updateMarkerIcon(settings); |
|
|
marker.updateMarkerIcon(settings); |
|
|
|
|
|
return marker; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
deleteMarker(key: string) { |
|
|
deleteMarker(key: string): Marker { |
|
|
let marker = this.markers.get(key)?.leafletMarker; |
|
|
const marker = this.markers.get(key); |
|
|
if (marker) { |
|
|
const leafletMarker = marker?.leafletMarker; |
|
|
if (this.options.useClusterMarkers) { |
|
|
if (leafletMarker) { |
|
|
this.markersCluster.removeLayer(marker); |
|
|
if (!this.options.useClusterMarkers) { |
|
|
} else { |
|
|
this.map.removeLayer(leafletMarker); |
|
|
this.map.removeLayer(marker); |
|
|
} |
|
|
} |
|
|
this.markers.delete(key); |
|
|
this.markers.delete(key); |
|
|
} |
|
|
marker = null; |
|
|
return marker; |
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
deletePolygon(key: string) { |
|
|
deletePolygon(key: string) { |
|
|
@ -505,29 +560,28 @@ export default abstract class LeafletMap { |
|
|
this.polygons.delete(key); |
|
|
this.polygons.delete(key); |
|
|
polygon = null; |
|
|
polygon = null; |
|
|
} |
|
|
} |
|
|
|
|
|
return polygon; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
updatePoints(pointsData: FormattedData[], getTooltip: (point: FormattedData, setTooltip?: boolean) => string) { |
|
|
updatePoints(pointsData: FormattedData[], getTooltip: (point: FormattedData, setTooltip?: boolean) => string) { |
|
|
this.map$.subscribe(map => { |
|
|
if (this.points) { |
|
|
if (this.points) { |
|
|
this.map.removeLayer(this.points); |
|
|
map.removeLayer(this.points); |
|
|
} |
|
|
} |
|
|
this.points = new FeatureGroup(); |
|
|
this.points = new FeatureGroup(); |
|
|
pointsData.filter(pdata => !!this.convertPosition(pdata)).forEach(data => { |
|
|
pointsData.filter(pdata => !!this.convertPosition(pdata)).forEach(data => { |
|
|
const point = L.circleMarker(this.convertPosition(data), { |
|
|
const point = L.circleMarker(this.convertPosition(data), { |
|
|
color: this.options.pointColor, |
|
|
color: this.options.pointColor, |
|
|
radius: this.options.pointSize |
|
|
radius: this.options.pointSize |
|
|
}); |
|
|
}); |
|
|
if (!this.options.pointTooltipOnRightPanel) { |
|
|
if (!this.options.pointTooltipOnRightPanel) { |
|
|
point.on('click', () => getTooltip(data)); |
|
|
point.on('click', () => getTooltip(data)); |
|
|
} |
|
|
} |
|
|
else { |
|
|
else { |
|
|
createTooltip(point, this.options, data.$datasource, getTooltip(data, false)); |
|
|
createTooltip(point, this.options, data.$datasource, getTooltip(data, false)); |
|
|
} |
|
|
} |
|
|
this.points.addLayer(point); |
|
|
this.points.addLayer(point); |
|
|
}); |
|
|
}); |
|
|
this.map.addLayer(this.points); |
|
|
map.addLayer(this.points); |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// Polyline
|
|
|
// Polyline
|
|
|
@ -557,27 +611,23 @@ export default abstract class LeafletMap { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
createPolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings, updateBounds = true) { |
|
|
createPolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings, updateBounds = true) { |
|
|
this.ready$.subscribe(() => { |
|
|
const poly = new Polyline(this.map, |
|
|
const poly = new Polyline(this.map, |
|
|
dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings); |
|
|
dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings); |
|
|
if (updateBounds) { |
|
|
if (updateBounds) { |
|
|
const bounds = poly.leafletPoly.getBounds(); |
|
|
const bounds = poly.leafletPoly.getBounds(); |
|
|
this.fitBounds(bounds); |
|
|
this.fitBounds(bounds); |
|
|
} |
|
|
} |
|
|
this.polylines.set(data.entityName, poly); |
|
|
this.polylines.set(data.entityName, poly); |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
updatePolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings, updateBounds = true) { |
|
|
updatePolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings, updateBounds = true) { |
|
|
this.ready$.subscribe(() => { |
|
|
const poly = this.polylines.get(data.entityName); |
|
|
const poly = this.polylines.get(data.entityName); |
|
|
const oldBounds = poly.leafletPoly.getBounds(); |
|
|
const oldBounds = poly.leafletPoly.getBounds(); |
|
|
poly.updatePolyline(dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings); |
|
|
poly.updatePolyline(dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings); |
|
|
const newBounds = poly.leafletPoly.getBounds(); |
|
|
const newBounds = poly.leafletPoly.getBounds(); |
|
|
if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) { |
|
|
if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) { |
|
|
this.fitBounds(newBounds); |
|
|
this.fitBounds(newBounds); |
|
|
} |
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
removePolyline(name: string) { |
|
|
removePolyline(name: string) { |
|
|
@ -597,7 +647,7 @@ export default abstract class LeafletMap { |
|
|
const keys: string[] = []; |
|
|
const keys: string[] = []; |
|
|
this.polygonsData = deepClone(polyData); |
|
|
this.polygonsData = deepClone(polyData); |
|
|
polyData.forEach((data: FormattedData) => { |
|
|
polyData.forEach((data: FormattedData) => { |
|
|
if (data && data.hasOwnProperty(this.options.polygonKeyName) && data[this.options.polygonKeyName] !== null) { |
|
|
if (data && isDefinedAndNotEmptyStr(data[this.options.polygonKeyName])) { |
|
|
if (typeof (data[this.options.polygonKeyName]) === 'string') { |
|
|
if (typeof (data[this.options.polygonKeyName]) === 'string') { |
|
|
data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]); |
|
|
data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]); |
|
|
} |
|
|
} |
|
|
@ -627,27 +677,23 @@ export default abstract class LeafletMap { |
|
|
this.savePolygonLocation({ ...data, ...this.convertPolygonToCustomFormat(e.layer._latlngs) }).subscribe(); |
|
|
this.savePolygonLocation({ ...data, ...this.convertPolygonToCustomFormat(e.layer._latlngs) }).subscribe(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
createPolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings, updateBounds = true) { |
|
|
createPolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings, updateBounds = true) { |
|
|
this.ready$.subscribe(() => { |
|
|
const polygon = new Polygon(this.map, polyData, dataSources, settings, this.dragPolygonVertex); |
|
|
const polygon = new Polygon(this.map, polyData, dataSources, settings, this.dragPolygonVertex); |
|
|
if (updateBounds) { |
|
|
if (updateBounds) { |
|
|
const bounds = polygon.leafletPoly.getBounds(); |
|
|
const bounds = polygon.leafletPoly.getBounds(); |
|
|
this.fitBounds(bounds); |
|
|
this.fitBounds(bounds); |
|
|
} |
|
|
} |
|
|
this.polygons.set(polyData.entityName, polygon); |
|
|
this.polygons.set(polyData.entityName, polygon); |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
updatePolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings, updateBounds = true) { |
|
|
updatePolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings, updateBounds = true) { |
|
|
this.ready$.subscribe(() => { |
|
|
const poly = this.polygons.get(polyData.entityName); |
|
|
const poly = this.polygons.get(polyData.entityName); |
|
|
const oldBounds = poly.leafletPoly.getBounds(); |
|
|
const oldBounds = poly.leafletPoly.getBounds(); |
|
|
poly.updatePolygon(polyData, dataSources, settings); |
|
|
poly.updatePolygon(polyData, dataSources, settings); |
|
|
const newBounds = poly.leafletPoly.getBounds(); |
|
|
const newBounds = poly.leafletPoly.getBounds(); |
|
|
if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) { |
|
|
if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) { |
|
|
this.fitBounds(newBounds); |
|
|
this.fitBounds(newBounds); |
|
|
} |
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
removePolygon(name: string) { |
|
|
removePolygon(name: string) { |
|
|
|
Mrkartoshka
6 years ago