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
This commit is contained in:
DudnikMaksym 2019-08-09 14:34:27 +03:00 committed by Igor Kulikov
parent 03631c83b0
commit 6a54e2ff1e
4 changed files with 82 additions and 51 deletions

View File

@ -19,7 +19,7 @@ var gmGlobals = {
} }
export default class TbGoogleMap { 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; var tbMap = this;
this.utils = utils; this.utils = utils;
@ -28,6 +28,7 @@ export default class TbGoogleMap {
this.minZoomLevel = minZoomLevel; this.minZoomLevel = minZoomLevel;
this.tooltips = []; this.tooltips = [];
this.defaultMapType = gmDefaultMapType; this.defaultMapType = gmDefaultMapType;
this.defaultCenterPosition = defaultCenterPosition;
function clearGlobalId() { function clearGlobalId() {
if (gmGlobals.loadingGmId && gmGlobals.loadingGmId === tbMap.mapId) { if (gmGlobals.loadingGmId && gmGlobals.loadingGmId === tbMap.mapId) {
@ -42,13 +43,12 @@ export default class TbGoogleMap {
} }
function initGoogleMap() { function initGoogleMap() {
tbMap.map = new google.maps.Map($containerElement[0], { // eslint-disable-line no-undef tbMap.map = new google.maps.Map($containerElement[0], { // eslint-disable-line no-undef
scrollwheel: !disableScrollZooming, scrollwheel: !disableScrollZooming,
mapTypeId: getGoogleMapTypeId(tbMap.defaultMapType), 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) { if (initCallback) {
initCallback(); initCallback();
} }

View File

@ -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; this.dontFitMapBounds = settings.fitMapBounds === false;
if (!useDynamicLocations) { if (!useDynamicLocations) {
@ -80,7 +86,7 @@ export default class TbMapWidgetV2 {
let openStreetMapProvider = {}; let openStreetMapProvider = {};
if (mapProvider === 'google-map') { 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') { } else if (mapProvider === 'openstreet-map') {
if (settings.useCustomProvider && settings.customProviderTileUrl) { if (settings.useCustomProvider && settings.customProviderTileUrl) {
openStreetMapProvider.name = settings.customProviderTileUrl; openStreetMapProvider.name = settings.customProviderTileUrl;
@ -88,19 +94,20 @@ export default class TbMapWidgetV2 {
} else { } else {
openStreetMapProvider.name = settings.mapProvider; 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') { } else if (mapProvider === 'here') {
openStreetMapProvider.name = settings.mapProvider; 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') { } else if (mapProvider === 'image-map') {
this.map = new TbImageMap(this.ctx, $element, this.utils, initCallback, this.map = new TbImageMap(this.ctx, $element, this.utils, initCallback,
settings.mapImageUrl, settings.mapImageUrl,
settings.disableScrollZooming, settings.disableScrollZooming,
settings.posFunction, settings.posFunction,
settings.imageEntityAlias, settings.imageEntityAlias,
settings.imageUrlAttribute); settings.imageUrlAttribute,
settings.useDefaultCenterPosition ? settings.defaultCenterPosition: null);
} else if (mapProvider === 'tencent-map') { } 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,6 +163,7 @@ export default class TbMapWidgetV2 {
this.locationSettings.showLabel = this.ctx.settings.showLabel !== false; this.locationSettings.showLabel = this.ctx.settings.showLabel !== false;
this.locationSettings.displayTooltip = this.ctx.settings.showTooltip !== false; this.locationSettings.displayTooltip = this.ctx.settings.showTooltip !== false;
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.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.autocloseTooltip = this.ctx.settings.autocloseTooltip !== false;
this.locationSettings.showPolygon = this.ctx.settings.showPolygon === true; this.locationSettings.showPolygon = this.ctx.settings.showPolygon === true;
@ -476,7 +484,7 @@ export default class TbMapWidgetV2 {
} }
function loadLocations(data, datasources) { 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 = []; tbMap.locations = [];
var dataMap = toLabelValueMap(data, datasources); var dataMap = toLabelValueMap(data, datasources);
var currentDatasource = null; var currentDatasource = null;
@ -521,11 +529,12 @@ export default class TbMapWidgetV2 {
} }
tbMap.locations.push(location); tbMap.locations.push(location);
updateLocation(location, data, dataMap); updateLocation(location, data, dataMap);
if (!tbMap.locationSettings.useDefaultCenterPosition) {
if (location.polyline) { if (location.polyline) {
tbMap.map.extendBounds(bounds, location.polyline); tbMap.map.extendBounds(bounds, location.polyline);
} else if (location.marker) { } else if (location.marker) {
tbMap.map.extendBoundsWithMarker(bounds, location.marker); tbMap.map.extendBoundsWithMarker(bounds, location.marker);
}
} }
latIndex = -1; latIndex = -1;
lngIndex = -1; lngIndex = -1;
@ -548,7 +557,9 @@ export default class TbMapWidgetV2 {
}); });
tbMap.locations.push(location); tbMap.locations.push(location);
createUpdatePolygon(location, dataMap); createUpdatePolygon(location, dataMap);
if (!tbMap.locationSettings.useDefaultCenterPosition) {
tbMap.map.extendBounds(bounds, location.polygon); tbMap.map.extendBounds(bounds, location.polygon);
}
} }
}); });
@ -576,18 +587,20 @@ export default class TbMapWidgetV2 {
function updateLocations(data, datasources) { function updateLocations(data, datasources) {
var locationsChanged = false; 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); var dataMap = toLabelValueMap(data, datasources);
for (var p = 0; p < tbMap.locations.length; p++) { for (var p = 0; p < tbMap.locations.length; p++) {
var location = tbMap.locations[p]; var location = tbMap.locations[p];
locationsChanged |= updateLocation(location, data, dataMap); locationsChanged |= updateLocation(location, data, dataMap);
createUpdatePolygon(location, dataMap); createUpdatePolygon(location, dataMap);
if (!tbMap.locationSettings.useDefaultCenterPosition) {
if (location.polyline) { if (location.polyline) {
tbMap.map.extendBounds(bounds, location.polyline); tbMap.map.extendBounds(bounds, location.polyline);
} else if (location.marker) { } else if (location.marker) {
tbMap.map.extendBoundsWithMarker(bounds, location.marker); tbMap.map.extendBoundsWithMarker(bounds, location.marker);
} else if (location.polygon) { } else if (location.polygon) {
tbMap.map.extendBounds(bounds, location.polygon); tbMap.map.extendBounds(bounds, location.polygon);
}
} }
} }
if (locationsChanged && tbMap.initBounds) { if (locationsChanged && tbMap.initBounds) {
@ -626,6 +639,7 @@ export default class TbMapWidgetV2 {
if (this.subscription.data) { if (this.subscription.data) {
if (!this.locations) { if (!this.locations) {
loadLocations(this.subscription.data, this.subscription.datasources); loadLocations(this.subscription.data, this.subscription.datasources);
} else { } else {
updateLocations(this.subscription.data, this.subscription.datasources); updateLocations(this.subscription.data, this.subscription.datasources);
} }
@ -644,13 +658,14 @@ export default class TbMapWidgetV2 {
let map = this.map; let map = this.map;
if (this.locations && this.locations.length > 0) { if (this.locations && this.locations.length > 0) {
map.invalidateSize(); map.invalidateSize();
var bounds = map.createBounds(); var bounds = this.locationSettings.useDefaultCenterPosition ? map.createBounds().extend(map.map.getCenter()) : map.createBounds();
if (this.markers && this.markers.length>0) { if (!this.locationSettings.useDefaultCenterPosition) {
if (this.markers && this.markers.length > 0) {
this.markers.forEach(function (marker) { this.markers.forEach(function (marker) {
map.extendBoundsWithMarker(bounds, marker); map.extendBoundsWithMarker(bounds, marker);
}); });
} }
if (this.polylines && this.polylines.length>0) { if (this.polylines && this.polylines.length > 0) {
this.polylines.forEach(function (polyline) { this.polylines.forEach(function (polyline) {
map.extendBounds(bounds, polyline); map.extendBounds(bounds, polyline);
}) })
@ -659,6 +674,7 @@ export default class TbMapWidgetV2 {
this.polygons.forEach(function (polygon) { this.polygons.forEach(function (polygon) {
map.extendBounds(bounds, polygon); map.extendBounds(bounds, polygon);
}) })
}
} }
map.fitBounds(bounds); map.fitBounds(bounds);
} }
@ -962,6 +978,16 @@ const commonMapSettingsSchema =
"title": "Default map zoom level (1 - 20)", "title": "Default map zoom level (1 - 20)",
"type": "number" "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": { "fitMapBounds": {
"title": "Fit map bounds to cover all markers", "title": "Fit map bounds to cover all markers",
"type": "boolean", "type": "boolean",
@ -1116,6 +1142,8 @@ const commonMapSettingsSchema =
}, },
"form": [ "form": [
"defaultZoomLevel", "defaultZoomLevel",
"useDefaultCenterPosition",
"defaultCenterPosition",
"fitMapBounds", "fitMapBounds",
"disableScrollZooming", "disableScrollZooming",
"latKeyName", "latKeyName",

View File

@ -19,7 +19,7 @@ import 'leaflet-providers';
export default class TbOpenStreetMap { 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.utils = utils;
this.defaultZoomLevel = defaultZoomLevel; this.defaultZoomLevel = defaultZoomLevel;
@ -38,7 +38,8 @@ export default class TbOpenStreetMap {
credentials.app_code = credentials.app_code || "p6NPiITB3Vv0GMUFnkLOOg"; 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) { if (disableScrollZooming) {
this.map.scrollWheelZoom.disable(); this.map.scrollWheelZoom.disable();

View File

@ -19,7 +19,7 @@ var tmGlobals = {
} }
export default class TbTencentMap { 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; var tbMap = this;
this.utils = utils; this.utils = utils;
this.defaultZoomLevel = defaultZoomLevel; this.defaultZoomLevel = defaultZoomLevel;
@ -27,6 +27,7 @@ export default class TbTencentMap {
this.minZoomLevel = minZoomLevel; this.minZoomLevel = minZoomLevel;
this.tooltips = []; this.tooltips = [];
this.defaultMapType = tmDefaultMapType; this.defaultMapType = tmDefaultMapType;
this.defaultCenterPosition =defaultCenterPosition;
function clearGlobalId() { function clearGlobalId() {
if (tmGlobals.loadingTmId && tmGlobals.loadingTmId === tbMap.mapId) { 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 tbMap.map = new qq.maps.Map($containerElement[0], { // eslint-disable-line no-undef
scrollwheel: !disableScrollZooming, scrollwheel: !disableScrollZooming,
mapTypeId: getTencentMapTypeId(tbMap.defaultMapType), 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) { if (initCallback) {