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

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
DudnikMaksym · Igor Kulikov
1 parent 03631c83
Showing 4 changed files with 82 additions and 51 deletions
ui/src/app/widget/lib/google-map.js
ui/src/app/widget/lib/map-widget2.js
ui/src/app/widget/lib/openstreet-map.js
ui/src/app/widget/lib/tencent-map.js
--- a/ui/src/app/widget/lib/google-map.js
View file @6a54e2f
+++ b/ui/src/app/widget/lib/google-map.js
View file @6a54e2f
@@ -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();
             }
--- a/ui/src/app/widget/lib/map-widget2.js
View file @6a54e2f
+++ b/ui/src/app/widget/lib/map-widget2.js
View file @6a54e2f
@@ -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",
--- a/ui/src/app/widget/lib/openstreet-map.js
View file @6a54e2f
+++ b/ui/src/app/widget/lib/openstreet-map.js
View file @6a54e2f
@@ -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();
--- a/ui/src/app/widget/lib/tencent-map.js
View file @6a54e2f
+++ b/ui/src/app/widget/lib/tencent-map.js
View file @6a54e2f
@@ -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) {