From 9eb686700a1574facdefa324f600b52525c8f328 Mon Sep 17 00:00:00 2001 From: Artem Halushko Date: Fri, 6 Mar 2020 11:23:22 +0200 Subject: [PATCH] add map provider select to settings --- .../components/widget/lib/maps/map-models.ts | 4 +- .../widget/lib/maps/map-widget.interface.ts | 1 - .../components/widget/lib/maps/map-widget2.ts | 125 ++++++++++++------ .../components/widget/lib/maps/schemes.ts | 47 ++++++- ui/src/app/widget/lib/map-widget2.js | 8 +- 5 files changed, 133 insertions(+), 52 deletions(-) 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 08e00ac032..8c13220d79 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 @@ -1,4 +1,4 @@ -import { LatLngExpression } from 'leaflet'; +import { LatLngExpression, LatLngTuple } from 'leaflet'; export interface MapOptions { initCallback?: Function, @@ -13,7 +13,7 @@ export interface MapOptions { mapProvider: MapProviders, mapUrl?: string; credentials?: any, // declare credentials format - defaultCenterPosition?: LatLngExpression, + defaultCenterPosition?: LatLngTuple, markerClusteringSetting?, useDefaultCenterPosition?: boolean } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts index 48464e3b73..51b137e2dc 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts @@ -4,7 +4,6 @@ export interface MapWidgetInterface { onInit(), onDataUpdated(); onResize(); - getSettingsSchema(): Object; onDestroy(); } 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 1bce0b00be..58c9e6f3e1 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 @@ -9,7 +9,8 @@ import { routeMapSettingsSchema, markerClusteringSettingsSchema, markerClusteringSettingsSchemaLeaflet, - hereMapSettingsSchema + hereMapSettingsSchema, + mapProviderSchema } from './schemes'; import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface'; import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers'; @@ -17,24 +18,29 @@ import { parseData, parseArray, parseFunction } from './maps-utils'; export let TbMapWidgetV2: MapWidgetStaticInterface; TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { + map: LeafletMap; provider: MapProviders; schema; data; - constructor(mapProvider: MapProviders, private drawRoutes, ctx, $element) { + constructor(public mapProvider: MapProviders, private drawRoutes, ctx, $element) { + if (this.map) { + this.map.map.remove(); + delete this.map; + } + this.data = ctx.data; if (!$element) { $element = ctx.$container[0]; } - this.provider = mapProvider; - let MapClass = providerSets[mapProvider]?.MapClass; - let settings = this.initSettings(ctx?.settings); + let settings = this.initSettings(ctx.settings); + + let MapClass = providerSets[this.provider]?.MapClass; if (!MapClass) { return; } this.map = new MapClass($element, settings); - this.schema = providerSets[mapProvider]?.schema; } onInit() { @@ -42,6 +48,7 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { initSettings(settings: any) { const functionParams = ['data', 'dsData', 'dsIndex']; + this.provider = settings.provider ? settings.provider : this.mapProvider; const customOptions = { mapProvider: this.provider, mapUrl: settings?.mapImageUrl, @@ -53,6 +60,7 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { tooltipPattern: settings.tooltipPattern || "${entityName}

Latitude: ${" + settings.latKeyName + ":7}
Longitude: ${" + settings.lngKeyName + ":7}", label: settings.label || "${entityName}", + defaultCenterPosition: settings?.defaultCenterPosition?.split(',') || [0,0], currentImage: (settings.useMarkerImage && settings.markerImage?.length) ? { url: settings.markerImage, size: settings.markerImageSize || 34 @@ -74,9 +82,6 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { this.map.onResize();//not work } - getSettingsSchema(): Object { - return this.schema; - } resize() { this.map?.invalidateSize(); @@ -88,9 +93,20 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { } public static settingsSchema(mapProvider, drawRoutes): Object { - const providerInfo = providerSets[mapProvider]; - let schema = providerInfo.schema; - schema.groupInfoes = []; + //const providerInfo = providerSets[mapProvider]; + let schema = initSchema(); + + function initSchema() { + return { + schema: { + type: "object", + properties: {}, + required: [] + }, + form: [], + groupInfoes: [] + }; + } function addGroupInfo(title: string) { schema.groupInfoes.push({ @@ -99,42 +115,69 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { }); } - function mergeSchema(newSchema) { + function addToSchema(newSchema) { Object.assign(schema.schema.properties, newSchema.schema.properties); schema.schema.required = schema.schema.required.concat(newSchema.schema.required); schema.form.push(newSchema.form);//schema.form.concat(commonMapSettingsSchema.form); } - if (providerInfo.name) - addGroupInfo(providerInfo.name + ' Map Settings'); - schema.form = [schema.form]; + function mergeSchemes(schemes: any[]) { + return schemes.reduce((finalSchema, schema) => { + return { + schema: { + properties: { + ...finalSchema.schema.properties, + ...schema.schema.properties + }, + required: [ + ...finalSchema.schema.required, + ...schema.schema.required + ] + }, + form: [ + ...finalSchema.form, + ...schema.form + ] + } + }, initSchema()); + } - mergeSchema(commonMapSettingsSchema); + function addCondition(schema, condition: String) { + schema.form = schema.form.map(element => { + if (typeof element === 'string') { + return { + key: element, + condition: condition + } + } + if (typeof element == 'object') { + if (element.condition) { + element.condition += ' && ' + condition + } + else element.condition = condition; + } + return element; + }); + return schema; + } + + addToSchema(mergeSchemes([mapProviderSchema, + ...Object.values(providerSets)?.map( + setting => addCondition(setting?.schema, `model.provider === '${setting.name}'`))])); + + addGroupInfo("Map Provider Settings"); + addToSchema(commonMapSettingsSchema); addGroupInfo("Common Map Settings"); if (drawRoutes) { - mergeSchema(routeMapSettingsSchema); + addToSchema(routeMapSettingsSchema); addGroupInfo("Route Map Settings"); } else if (mapProvider !== 'image-map') { - let clusteringSchema: any = { - schema: { - properties: { - ...markerClusteringSettingsSchemaLeaflet.schema.properties, - ...markerClusteringSettingsSchema.schema.properties - }, - required: { - ...markerClusteringSettingsSchemaLeaflet.schema.required, - ...markerClusteringSettingsSchema.schema.required - } - }, - form: [ - ...markerClusteringSettingsSchemaLeaflet.form, - ...markerClusteringSettingsSchema.form - ] - }; - mergeSchema(clusteringSchema); + let clusteringSchema = mergeSchemes([markerClusteringSettingsSchemaLeaflet, markerClusteringSettingsSchema]) + addToSchema(clusteringSchema); addGroupInfo("Markers Clustering Settings"); } + console.log(11, schema); return schema; } @@ -164,26 +207,27 @@ const providerSets = { 'openstreet-map': { MapClass: OpenStreetMap, schema: openstreetMapSettingsSchema, - name: "Openstreet" + name: "openstreet-map", }, 'tencent-map': { MapClass: TencentMap, schema: tencentMapSettingsSchema, - name: "Tencent" + name: "tencent-map" }, 'google-map': { MapClass: GoogleMap, schema: googleMapSettingsSchema, - name: "Openstreet" + name: "google-map" }, 'here': { MapClass: HEREMap, schema: hereMapSettingsSchema, - name: "HERE" + name: "here" }, 'image-map': { MapClass: ImageMap, - schema: imageMapSettingsSchema + schema: imageMapSettingsSchema, + name: "image-map" } } @@ -218,6 +262,5 @@ const defaultSettings = { disableScrollZooming: false, minZoomLevel: 16, credentials: '', - defaultCenterPosition: [0, 0], markerClusteringSetting: null, } \ No newline at end of file diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts index 191af0726c..bd2ef9b7ab 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts @@ -15,7 +15,6 @@ export const googleMapSettingsSchema = } }, "required": [ - "gmApiKey" ] }, "form": [ @@ -63,7 +62,6 @@ export const tencentMapSettingsSchema = } }, "required": [ - "tmApiKey" ] }, "form": [ @@ -813,4 +811,49 @@ export const imageMapSettingsSchema = ] } ] +}; + +export const mapProviderSchema = +{ + "schema": { + "title": "Map Provider Configuration", + "type": "object", + "properties": { + "provider": { + "title": "Map Provider", + "type": "string", + "default": "openstreet-map" + } + }, + "required": [] + }, + "form": [ + { + "key": "provider", + "type": "rc-select", + "multiple": false, + "items": [ + { + "value": "google-map", + "label": "Google maps" + }, + { + "value": "openstreet-map", + "label": "Openstreet maps" + }, + { + "value": "here", + "label": "HERE maps" + }, + { + "value": "image-map", + "label": "Image map" + }, + { + "value": "tencent-map", + "label": "Tencent maps" + } + ] + } + ] }; \ No newline at end of file diff --git a/ui/src/app/widget/lib/map-widget2.js b/ui/src/app/widget/lib/map-widget2.js index 41e5706d31..3fc4084835 100644 --- a/ui/src/app/widget/lib/map-widget2.js +++ b/ui/src/app/widget/lib/map-widget2.js @@ -450,9 +450,7 @@ export default class TbMapWidgetV2 { if (location.settings.usePolygonColorFunction && location.settings.polygonColorFunction) { var color; try { - color = location.settings.polygonColorFunction(dataMap.dataMap, dataMap.dsDataMap, location.dsIndex); - // eslint-disable-next-line no-debugger - debugger + color = location.settings.polygonColorFunction(dataMap.dataMap, dataMap.dsDataMap, location.dsIndex); } catch (e) {/**/ } if (!color) { @@ -486,9 +484,7 @@ export default class TbMapWidgetV2 { function calculateLocationMarkerImage(location, dataMap) { if (location.settings.useMarkerImageFunction && location.settings.markerImageFunction) { var image = null; - try { - // eslint-disable-next-line no-debugger - debugger; + try { image = location.settings.markerImageFunction(dataMap.dataMap, location.settings.markerImages, dataMap.dsDataMap, location.dsIndex); } catch (e) { image = null;