From f3615348b782a4f6744222103dc45fae92b5195d Mon Sep 17 00:00:00 2001 From: Artem Halushko Date: Mon, 2 Mar 2020 19:18:29 +0200 Subject: [PATCH] here maps support && WIP on markers --- .../components/widget/lib/maps/leaflet-map.ts | 30 ++++- .../components/widget/lib/maps/map-models.ts | 6 + .../components/widget/lib/maps/map-widget2.ts | 115 +++--------------- .../components/widget/lib/maps/maps-utils.ts | 4 +- .../components/widget/lib/maps/markers.ts | 19 +-- .../widget/lib/maps/providers/here-map.ts | 20 +++ .../widget/lib/maps/providers/index.ts | 1 + 7 files changed, 87 insertions(+), 108 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts index 6e21d3df87..a1acc7d618 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts @@ -5,13 +5,16 @@ import 'leaflet.markercluster/dist/MarkerCluster.css' import 'leaflet.markercluster/dist/MarkerCluster.Default.css' import 'leaflet.markercluster/dist/leaflet.markercluster' -import { MapOptions } from './map-models'; +import { MapOptions, MarkerSettings } from './map-models'; +import { Marker } from './markers'; +import { Observable, of } from 'rxjs'; export default class LeafletMap { markers = []; tooltips = []; map: L.Map; + map$: Observable; options: MapOptions; isMarketCluster; @@ -44,6 +47,7 @@ export default class LeafletMap { public setMap(map: L.Map) { this.map = map; + this.map$ = of(this.map); } getContainer() { @@ -84,7 +88,7 @@ export default class LeafletMap { this.map.invalidateSize(true); } - createTooltip(marker, dsIndex, settings, markerArgs) { + createTool0tip(marker, dsIndex, settings, markerArgs) { var popup = L.popup(); popup.setContent(''); marker.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false }); @@ -105,8 +109,8 @@ export default class LeafletMap { } } - onResize(){ - + onResize() { + } getTooltips() { @@ -117,5 +121,23 @@ export default class LeafletMap { return this.map.getCenter(); } + ////Markers + + + createMarker() { + let setings: MarkerSettings = { + + } + this.markers.push(new Marker(this.map$, { lat: 0, lng: 0 }, setings)) + } + + updateMarker() { + + } + + deleteMarker() { + + } + } \ No newline at end of file diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts index 05e3728d18..997ee79524 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts @@ -17,4 +17,10 @@ export enum MapProviders { here = 'here', image = 'image-map', tencent = 'tencent-map' +} + +export interface MarkerSettings{ + showLabel?: boolean, + draggable?: boolean, + displayTooltip?: boolean } \ No newline at end of file diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts index be30961bc3..fd09c6a79b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts @@ -1,10 +1,19 @@ import { MapProviders, MapOptions } from "./map-models"; import LeafletMap from './leaflet-map'; -import { deepClone } from '@core/utils'; -import { openstreetMapSettingsSchema, googleMapSettingsSchema, imageMapSettingsSchema, tencentMapSettingsSchema, hereMapSettingsSchema, commonMapSettingsSchema, routeMapSettingsSchema, markerClusteringSettingsSchema, markerClusteringSettingsSchemaGoogle, markerClusteringSettingsSchemaLeaflet } from './schemes'; +import { + openstreetMapSettingsSchema, + googleMapSettingsSchema, + imageMapSettingsSchema, + tencentMapSettingsSchema, + commonMapSettingsSchema, + routeMapSettingsSchema, + markerClusteringSettingsSchema, + markerClusteringSettingsSchemaLeaflet, + hereMapSettingsSchema +} from './schemes'; import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface'; -import { OpenStreetMap, TencentMap, ImageMap, GoogleMap } from './providers'; -import { string } from 'prop-types'; +import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers'; + const providerSets = { 'openstreet-map': { @@ -22,6 +31,11 @@ const providerSets = { schema: googleMapSettingsSchema, name: "Openstreet" }, + 'here': { + MapClass: HEREMap, + schema: hereMapSettingsSchema, + name: "HERE" + }, 'image-map': { MapClass: ImageMap, schema: imageMapSettingsSchema @@ -34,7 +48,7 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { provider: MapProviders; schema; - constructor(mapProvider: MapProviders, drawRoutes, ctx, useDynamicLocations, $element, isEdit) { + constructor(mapProvider: MapProviders, drawRoutes, ctx, $element) { console.log(ctx.settings); if (!$element) { @@ -58,7 +72,7 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { return; } this.map = new MapClass($element, { ...baseOptions, ...ctx.settings }) - + this.map.createMarker(); this.schema = providerSets[mapProvider]?.schema; } @@ -156,93 +170,4 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { onDestroy() { } -} - -let defaultSettings = { - xPosKeyName: 'xPos', - yPosKeyName: 'yPos', - markerOffsetX: 0.5, - markerOffsetY: 1, - latKeyName: 'latitude', - lngKeyName: 'longitude', - polygonKeyName: 'coordinates', - - - //this.locationSettings.tooltipPattern = this.ctx.settings.tooltipPattern || "${entityName}

Latitude: ${" + this.locationSettings.latKeyName + ":7}
Longitude: ${" + this.locationSettings.lngKeyName + ":7}", - showLabel: false, - showTooltip: false, - useDefaultCenterPosition: true, - showTooltipAction: "click", - autocloseTooltip: false, - showPolygon: true, - labelColor: '#000000', - /* this.locationSettings.label = this.ctx.settings.label || "${entityName}", - this.locationSettings.color = this.ctx.settings.color ? tinycolor(this.ctx.settings.color).toHexString() : "#FE7569", - this.locationSettings.polygonColor = this.ctx.settings.polygonColor ? tinycolor(this.ctx.settings.polygonColor).toHexString() : "#0000ff", - this.locationSettings.polygonStrokeColor = this.ctx.settings.polygonStrokeColor ? tinycolor(this.ctx.settings.polygonStrokeColor).toHexString() : "#fe0001", - this.locationSettings.polygonOpacity = angular.isDefined(this.ctx.settings.polygonOpacity) ? this.ctx.settings.polygonOpacity : 0.5, - this.locationSettings.polygonStrokeOpacity = angular.isDefined(this.ctx.settings.polygonStrokeOpacity) ? this.ctx.settings.polygonStrokeOpacity : 1, - this.locationSettings.polygonStrokeWeight = angular.isDefined(this.ctx.settings.polygonStrokeWeight) ? this.ctx.settings.polygonStrokeWeight : 1, - - this.locationSettings.useLabelFunction = this.ctx.settings.useLabelFunction === true, - if(angular.isDefined(this.ctx.settings.labelFunction) && this.ctx.settings.labelFunction.length > 0) { - try { - this.locationSettings.labelFunction = new Function('data, dsData, dsIndex', this.ctx.settings.labelFunction), - } catch (e) { - this.locationSettings.labelFunction = null, - } - } - - this.locationSettings.useTooltipFunction = this.ctx.settings.useTooltipFunction === true, - if (angular.isDefined(this.ctx.settings.tooltipFunction) && this.ctx.settings.tooltipFunction.length > 0) { - try { - this.locationSettings.tooltipFunction = new Function('data, dsData, dsIndex', this.ctx.settings.tooltipFunction), - } catch (e) { - this.locationSettings.tooltipFunction = null, - } - } - - this.locationSettings.useColorFunction = this.ctx.settings.useColorFunction === true, - if (angular.isDefined(this.ctx.settings.colorFunction) && this.ctx.settings.colorFunction.length > 0) { - try { - this.locationSettings.colorFunction = new Function('data, dsData, dsIndex', this.ctx.settings.colorFunction), - } catch (e) { - this.locationSettings.colorFunction = null, - } - } - this.locationSettings.usePolygonColorFunction = this.ctx.settings.usePolygonColorFunction === true, - if (angular.isDefined(this.ctx.settings.polygonColorFunction) && this.ctx.settings.polygonColorFunction.length > 0) { - try { - this.locationSettings.polygonColorFunction = new Function('data, dsData, dsIndex', this.ctx.settings.polygonColorFunction), - } catch (e) { - this.locationSettings.polygonColorFunction = null, - } - } - - this.locationSettings.useMarkerImageFunction = this.ctx.settings.useMarkerImageFunction === true, - if (angular.isDefined(this.ctx.settings.markerImageFunction) && this.ctx.settings.markerImageFunction.length > 0) { - try { - this.locationSettings.markerImageFunction = new Function('data, images, dsData, dsIndex', this.ctx.settings.markerImageFunction), - } catch (e) { - this.locationSettings.markerImageFunction = null, - } - } - - this.locationSettings.markerImages = this.ctx.settings.markerImages || [], - - if (!this.locationSettings.useMarkerImageFunction && - angular.isDefined(this.ctx.settings.markerImage) && - this.ctx.settings.markerImage.length > 0) { - this.locationSettings.useMarkerImage = true, - var url = this.ctx.settings.markerImage, - var size = this.ctx.settings.markerImageSize || 34, - this.locationSettings.currentImage = { - url: url, - size: size - }, - } - - if (this.drawRoutes) { - this.locationSettings.strokeWeight = this.ctx.settings.strokeWeight || 2, - this.locationSettings.strokeOpacity = this.ctx.settings.strokeOpacity || 1.0,*/ } \ No newline at end of file diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts index cfb9d46350..71552c4357 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts @@ -1,6 +1,6 @@ import L from 'leaflet'; -export function createTooltip(target, dsIndex, settings, targetArgs?) { +export function createTooltip(target, settings, targetArgs?) { var popup = L.popup(); popup.setContent(''); target.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false }); @@ -17,6 +17,6 @@ export function createTooltip(target, dsIndex, settings, targetArgs?) { markerArgs: targetArgs, popup: popup, locationSettings: settings, - dsIndex: dsIndex + dsIndex: settings.dsIndex }; } \ No newline at end of file diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts index aa2348f47f..ca2a80ec6d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts @@ -1,30 +1,34 @@ import L from 'leaflet'; import { createTooltip } from './maps-utils'; +import { MarkerSettings } from './map-models'; +import { Observable } from 'rxjs'; export class Marker { leafletMarker: L.Marker; - map: L.Map; + // map: L.Map; tooltipOffset; tooltip; - constructor(map: L.Map, location, dsIndex, settings, onClickListener, markerArgs, onDragendListener) { - this.map = map; + constructor(private map$: Observable, location: L.LatLngExpression, settings: MarkerSettings, onClickListener?, markerArgs?, onDragendListener?) { + //this.map = map; this.leafletMarker = L.marker(location, { - draggable: settings.drraggable + draggable: settings.draggable }); + this.createMarkerIcon(this.leafletMarker, settings, (iconInfo) => { this.leafletMarker.setIcon(iconInfo.icon); if (settings.showLabel) { this.tooltipOffset = [0, -iconInfo.size[1] + 10]; this.updateMarkerLabel(settings) } - this.leafletMarker.addTo(this.map); + map$.subscribe(map => + this.leafletMarker.addTo(map)) }); if (settings.displayTooltip) { - this.tooltip = createTooltip(this.leafletMarker, dsIndex, settings, markerArgs); + this.tooltip = createTooltip(this.leafletMarker, settings, markerArgs); } if (onClickListener) { @@ -120,7 +124,8 @@ export class Marker { removeMarker() { - this.map.removeLayer(this.leafletMarker); + this.map$.subscribe(map => + this.leafletMarker.addTo(map)) } extendBoundsWithMarker(bounds) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts new file mode 100644 index 0000000000..1055c3551e --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts @@ -0,0 +1,20 @@ +import L from 'leaflet'; +import LeafletMap from '../leaflet-map'; +import { MapOptions } from '../map-models'; + +export class HEREMap extends LeafletMap { + constructor($container, options: MapOptions) { + console.log("HEREMap -> constructor -> options", options) + const defaultCredentials = + { + app_id: "AhM6TzD9ThyK78CT3ptx", + app_code: "p6NPiITB3Vv0GMUFnkLOOg" + } + super($container, options); + const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel); + var tileLayer = (L.tileLayer as any).provider(options.mapProvider || "HERE.normalDay", options.credentials || defaultCredentials); + tileLayer.addTo(map); + super.setMap(map); + super.initSettings(options); + } +} \ No newline at end of file diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/index.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/index.ts index 5f0b6dac84..33a939250a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/index.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/index.ts @@ -1,4 +1,5 @@ export * from './tencent-map'; export * from './google-map'; +export * from './here-map'; export * from './image-map'; export * from './openstreet-map';