From 6a54e2ff1eb69c7333038bd2b66dda64505bc3e9 Mon Sep 17 00:00:00 2001 From: DudnikMaksym Date: Fri, 9 Aug 2019 14:34:27 +0300 Subject: [PATCH] New fixed center func for maps (#1910) * maps widget bundle changes (trip_animation configs) * UI Added fixed map center settings for (openstreet, google, tencent) maps * UI open street center minor fix * fix * UI fixed commit * UI fixed commit * Delete leaflet-geometryutil.js * Delete Leaflet.MultiOptionsPolyline.js --- ui/src/app/widget/lib/google-map.js | 8 +- ui/src/app/widget/lib/map-widget2.js | 114 +++++++++++++++--------- ui/src/app/widget/lib/openstreet-map.js | 5 +- ui/src/app/widget/lib/tencent-map.js | 6 +- 4 files changed, 82 insertions(+), 51 deletions(-) diff --git a/ui/src/app/widget/lib/google-map.js b/ui/src/app/widget/lib/google-map.js index 7edbe91059..649290ef1e 100644 --- a/ui/src/app/widget/lib/google-map.js +++ b/ui/src/app/widget/lib/google-map.js @@ -19,7 +19,7 @@ var gmGlobals = { } export default class TbGoogleMap { - constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, gmApiKey, gmDefaultMapType) { + constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, gmApiKey, gmDefaultMapType, defaultCenterPosition) { var tbMap = this; this.utils = utils; @@ -28,6 +28,7 @@ export default class TbGoogleMap { this.minZoomLevel = minZoomLevel; this.tooltips = []; this.defaultMapType = gmDefaultMapType; + this.defaultCenterPosition = defaultCenterPosition; function clearGlobalId() { if (gmGlobals.loadingGmId && gmGlobals.loadingGmId === tbMap.mapId) { @@ -42,13 +43,12 @@ export default class TbGoogleMap { } function initGoogleMap() { - tbMap.map = new google.maps.Map($containerElement[0], { // eslint-disable-line no-undef scrollwheel: !disableScrollZooming, mapTypeId: getGoogleMapTypeId(tbMap.defaultMapType), - zoom: tbMap.defaultZoomLevel || 8 + zoom: tbMap.defaultZoomLevel || 8, + center: new google.maps.LatLng(tbMap.defaultCenterPosition[0], tbMap.defaultCenterPosition[1]) // eslint-disable-line no-undef }); - if (initCallback) { initCallback(); } diff --git a/ui/src/app/widget/lib/map-widget2.js b/ui/src/app/widget/lib/map-widget2.js index 937a4231f2..1c34a57716 100644 --- a/ui/src/app/widget/lib/map-widget2.js +++ b/ui/src/app/widget/lib/map-widget2.js @@ -53,6 +53,12 @@ export default class TbMapWidgetV2 { } } + if (angular.isUndefined(settings.defaultCenterPosition)) { + settings.defaultCenterPosition = [0,0]; + } else if (angular.isString(settings.defaultCenterPosition)) { + settings.defaultCenterPosition = settings.defaultCenterPosition.split(',').map(x => +x); + } + this.dontFitMapBounds = settings.fitMapBounds === false; if (!useDynamicLocations) { @@ -78,9 +84,9 @@ export default class TbMapWidgetV2 { tbMap.tooltipActionsMap[descriptor.name] = descriptor; }); - let openStreetMapProvider = {}; + let openStreetMapProvider = {}; if (mapProvider === 'google-map') { - this.map = new TbGoogleMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType); + this.map = new TbGoogleMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType, settings.defaultCenterPosition); } else if (mapProvider === 'openstreet-map') { if (settings.useCustomProvider && settings.customProviderTileUrl) { openStreetMapProvider.name = settings.customProviderTileUrl; @@ -88,19 +94,20 @@ export default class TbMapWidgetV2 { } else { openStreetMapProvider.name = settings.mapProvider; } - this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, openStreetMapProvider); + this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, openStreetMapProvider, null,settings.defaultCenterPosition); } else if (mapProvider === 'here') { openStreetMapProvider.name = settings.mapProvider; - this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, openStreetMapProvider, settings.credentials); + this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, openStreetMapProvider, settings.credentials, settings.defaultCenterPosition); } else if (mapProvider === 'image-map') { this.map = new TbImageMap(this.ctx, $element, this.utils, initCallback, settings.mapImageUrl, settings.disableScrollZooming, settings.posFunction, settings.imageEntityAlias, - settings.imageUrlAttribute); + settings.imageUrlAttribute, + settings.useDefaultCenterPosition ? settings.defaultCenterPosition: null); } else if (mapProvider === 'tencent-map') { - this.map = new TbTencentMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, settings.tmApiKey, settings.tmDefaultMapType); + this.map = new TbTencentMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, settings.tmApiKey, settings.tmDefaultMapType, settings.defaultCenterPosition); } @@ -156,7 +163,8 @@ export default class TbMapWidgetV2 { this.locationSettings.showLabel = this.ctx.settings.showLabel !== false; this.locationSettings.displayTooltip = this.ctx.settings.showTooltip !== false; - this.locationSettings.displayTooltipAction = this.ctx.settings.showTooltipAction && this.ctx.settings.showTooltipAction.length ? this.ctx.settings.showTooltipAction : "click"; + this.locationSettings.useDefaultCenterPosition = this.ctx.settings.useDefaultCenterPosition === true; + this.locationSettings.displayTooltipAction = this.ctx.settings.showTooltipAction && this.ctx.settings.showTooltipAction.length ? this.ctx.settings.showTooltipAction : "click"; this.locationSettings.autocloseTooltip = this.ctx.settings.autocloseTooltip !== false; this.locationSettings.showPolygon = this.ctx.settings.showPolygon === true; this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000'; @@ -455,8 +463,8 @@ export default class TbMapWidgetV2 { } function createUpdatePolygon(location, dataMap) { - if (location.settings.showPolygon && dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName] !== null) { - let polygonLatLngsRaw = angular.fromJson(dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName]); + if (location.settings.showPolygon && dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName] !== null) { + let polygonLatLngsRaw = angular.fromJson(dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName]); let polygonLatLngs = !polygonLatLngsRaw || mapPolygonArray(polygonLatLngsRaw); if (!location.polygon && polygonLatLngs.length > 0) { location.polygon = tbMap.map.createPolygon(polygonLatLngs, location.settings, location, function (event) { @@ -476,7 +484,7 @@ export default class TbMapWidgetV2 { } function loadLocations(data, datasources) { - var bounds = tbMap.map.createBounds(); + var bounds = tbMap.locationSettings.useDefaultCenterPosition ? tbMap.map.createBounds().extend(tbMap.map.map.getCenter()) : tbMap.map.createBounds(); tbMap.locations = []; var dataMap = toLabelValueMap(data, datasources); var currentDatasource = null; @@ -521,12 +529,13 @@ export default class TbMapWidgetV2 { } tbMap.locations.push(location); updateLocation(location, data, dataMap); - - if (location.polyline) { - tbMap.map.extendBounds(bounds, location.polyline); - } else if (location.marker) { - tbMap.map.extendBoundsWithMarker(bounds, location.marker); - } + if (!tbMap.locationSettings.useDefaultCenterPosition) { + if (location.polyline) { + tbMap.map.extendBounds(bounds, location.polyline); + } else if (location.marker) { + tbMap.map.extendBoundsWithMarker(bounds, location.marker); + } + } latIndex = -1; lngIndex = -1; } @@ -548,7 +557,9 @@ export default class TbMapWidgetV2 { }); tbMap.locations.push(location); createUpdatePolygon(location, dataMap); - tbMap.map.extendBounds(bounds, location.polygon); + if (!tbMap.locationSettings.useDefaultCenterPosition) { + tbMap.map.extendBounds(bounds, location.polygon); + } } }); @@ -576,19 +587,21 @@ export default class TbMapWidgetV2 { function updateLocations(data, datasources) { var locationsChanged = false; - var bounds = tbMap.map.createBounds(); + var bounds = tbMap.locationSettings.useDefaultCenterPosition ? tbMap.map.createBounds().extend(tbMap.map.map.getCenter()) : tbMap.map.createBounds(); var dataMap = toLabelValueMap(data, datasources); for (var p = 0; p < tbMap.locations.length; p++) { var location = tbMap.locations[p]; locationsChanged |= updateLocation(location, data, dataMap); - createUpdatePolygon(location, dataMap); - if (location.polyline) { - tbMap.map.extendBounds(bounds, location.polyline); - } else if (location.marker) { - tbMap.map.extendBoundsWithMarker(bounds, location.marker); - } else if (location.polygon) { - tbMap.map.extendBounds(bounds, location.polygon); - } + createUpdatePolygon(location, dataMap); + if (!tbMap.locationSettings.useDefaultCenterPosition) { + if (location.polyline) { + tbMap.map.extendBounds(bounds, location.polyline); + } else if (location.marker) { + tbMap.map.extendBoundsWithMarker(bounds, location.marker); + } else if (location.polygon) { + tbMap.map.extendBounds(bounds, location.polygon); + } + } } if (locationsChanged && tbMap.initBounds) { let dataReceived = datasources.every( @@ -626,7 +639,8 @@ export default class TbMapWidgetV2 { if (this.subscription.data) { if (!this.locations) { loadLocations(this.subscription.data, this.subscription.datasources); - } else { + + } else { updateLocations(this.subscription.data, this.subscription.datasources); } var tooltips = this.map.getTooltips(); @@ -644,22 +658,24 @@ export default class TbMapWidgetV2 { let map = this.map; if (this.locations && this.locations.length > 0) { map.invalidateSize(); - var bounds = map.createBounds(); - if (this.markers && this.markers.length>0) { - this.markers.forEach(function (marker) { - map.extendBoundsWithMarker(bounds, marker); - }); - } - if (this.polylines && this.polylines.length>0) { - this.polylines.forEach(function (polyline) { - map.extendBounds(bounds, polyline); - }) - } - if (this.polygons && this.polygons.length > 0) { - this.polygons.forEach(function (polygon) { - map.extendBounds(bounds, polygon); - }) - } + var bounds = this.locationSettings.useDefaultCenterPosition ? map.createBounds().extend(map.map.getCenter()) : map.createBounds(); + if (!this.locationSettings.useDefaultCenterPosition) { + if (this.markers && this.markers.length > 0) { + this.markers.forEach(function (marker) { + map.extendBoundsWithMarker(bounds, marker); + }); + } + if (this.polylines && this.polylines.length > 0) { + this.polylines.forEach(function (polyline) { + map.extendBounds(bounds, polyline); + }) + } + if (this.polygons && this.polygons.length > 0) { + this.polygons.forEach(function (polygon) { + map.extendBounds(bounds, polygon); + }) + } + } map.fitBounds(bounds); } } @@ -962,6 +978,16 @@ const commonMapSettingsSchema = "title": "Default map zoom level (1 - 20)", "type": "number" }, + "useDefaultCenterPosition": { + "title": "Use default map center position", + "type": "boolean", + "default": false + }, + "defaultCenterPosition": { + "title": "Default map center position (0,0)", + "type": "string", + "default" : "0,0" + }, "fitMapBounds": { "title": "Fit map bounds to cover all markers", "type": "boolean", @@ -1116,6 +1142,8 @@ const commonMapSettingsSchema = }, "form": [ "defaultZoomLevel", + "useDefaultCenterPosition", + "defaultCenterPosition", "fitMapBounds", "disableScrollZooming", "latKeyName", diff --git a/ui/src/app/widget/lib/openstreet-map.js b/ui/src/app/widget/lib/openstreet-map.js index 15b69fd87f..21977392bf 100644 --- a/ui/src/app/widget/lib/openstreet-map.js +++ b/ui/src/app/widget/lib/openstreet-map.js @@ -19,7 +19,7 @@ import 'leaflet-providers'; export default class TbOpenStreetMap { - constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, mapProvider, credentials) { + constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, mapProvider, credentials, defaultCenterPosition) { this.utils = utils; this.defaultZoomLevel = defaultZoomLevel; @@ -38,7 +38,8 @@ export default class TbOpenStreetMap { credentials.app_code = credentials.app_code || "p6NPiITB3Vv0GMUFnkLOOg"; } - this.map = L.map($containerElement[0]).setView([0, 0], this.defaultZoomLevel || 8); + defaultCenterPosition = defaultCenterPosition || [0,0]; + this.map = L.map($containerElement[0]).setView(defaultCenterPosition, this.defaultZoomLevel || 8); if (disableScrollZooming) { this.map.scrollWheelZoom.disable(); diff --git a/ui/src/app/widget/lib/tencent-map.js b/ui/src/app/widget/lib/tencent-map.js index b2de679439..ce24ad606b 100644 --- a/ui/src/app/widget/lib/tencent-map.js +++ b/ui/src/app/widget/lib/tencent-map.js @@ -19,7 +19,7 @@ var tmGlobals = { } export default class TbTencentMap { - constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, tmApiKey, tmDefaultMapType) { + constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, tmApiKey, tmDefaultMapType, defaultCenterPosition) { var tbMap = this; this.utils = utils; this.defaultZoomLevel = defaultZoomLevel; @@ -27,6 +27,7 @@ export default class TbTencentMap { this.minZoomLevel = minZoomLevel; this.tooltips = []; this.defaultMapType = tmDefaultMapType; + this.defaultCenterPosition =defaultCenterPosition; function clearGlobalId() { if (tmGlobals.loadingTmId && tmGlobals.loadingTmId === tbMap.mapId) { @@ -44,7 +45,8 @@ export default class TbTencentMap { tbMap.map = new qq.maps.Map($containerElement[0], { // eslint-disable-line no-undef scrollwheel: !disableScrollZooming, mapTypeId: getTencentMapTypeId(tbMap.defaultMapType), - zoom: tbMap.defaultZoomLevel || 8 + zoom: tbMap.defaultZoomLevel || 8, + center: new qq.maps.LatLng(tbMap.defaultCenterPosition[0],tbMap.defaultCenterPosition[1]) // eslint-disable-line no-undef }); if (initCallback) {