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:
parent
03631c83b0
commit
6a54e2ff1e
@ -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();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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) {
|
||||||
@ -78,9 +84,9 @@ export default class TbMapWidgetV2 {
|
|||||||
tbMap.tooltipActionsMap[descriptor.name] = descriptor;
|
tbMap.tooltipActionsMap[descriptor.name] = descriptor;
|
||||||
});
|
});
|
||||||
|
|
||||||
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,7 +163,8 @@ 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.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.autocloseTooltip = this.ctx.settings.autocloseTooltip !== false;
|
||||||
this.locationSettings.showPolygon = this.ctx.settings.showPolygon === true;
|
this.locationSettings.showPolygon = this.ctx.settings.showPolygon === true;
|
||||||
this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000';
|
this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000';
|
||||||
@ -455,8 +463,8 @@ export default class TbMapWidgetV2 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function createUpdatePolygon(location, dataMap) {
|
function createUpdatePolygon(location, dataMap) {
|
||||||
if (location.settings.showPolygon && dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName] !== null) {
|
if (location.settings.showPolygon && dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName] !== null) {
|
||||||
let polygonLatLngsRaw = angular.fromJson(dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName]);
|
let polygonLatLngsRaw = angular.fromJson(dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName]);
|
||||||
let polygonLatLngs = !polygonLatLngsRaw || mapPolygonArray(polygonLatLngsRaw);
|
let polygonLatLngs = !polygonLatLngsRaw || mapPolygonArray(polygonLatLngsRaw);
|
||||||
if (!location.polygon && polygonLatLngs.length > 0) {
|
if (!location.polygon && polygonLatLngs.length > 0) {
|
||||||
location.polygon = tbMap.map.createPolygon(polygonLatLngs, location.settings, location, function (event) {
|
location.polygon = tbMap.map.createPolygon(polygonLatLngs, location.settings, location, function (event) {
|
||||||
@ -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,12 +529,13 @@ 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);
|
||||||
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) {
|
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 (location.polyline) {
|
if (!tbMap.locationSettings.useDefaultCenterPosition) {
|
||||||
tbMap.map.extendBounds(bounds, location.polyline);
|
if (location.polyline) {
|
||||||
} else if (location.marker) {
|
tbMap.map.extendBounds(bounds, location.polyline);
|
||||||
tbMap.map.extendBoundsWithMarker(bounds, location.marker);
|
} else if (location.marker) {
|
||||||
} else if (location.polygon) {
|
tbMap.map.extendBoundsWithMarker(bounds, location.marker);
|
||||||
tbMap.map.extendBounds(bounds, location.polygon);
|
} else if (location.polygon) {
|
||||||
}
|
tbMap.map.extendBounds(bounds, location.polygon);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (locationsChanged && tbMap.initBounds) {
|
if (locationsChanged && tbMap.initBounds) {
|
||||||
let dataReceived = datasources.every(
|
let dataReceived = datasources.every(
|
||||||
@ -626,7 +639,8 @@ 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);
|
||||||
}
|
}
|
||||||
var tooltips = this.map.getTooltips();
|
var tooltips = this.map.getTooltips();
|
||||||
@ -644,22 +658,24 @@ 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) {
|
||||||
this.markers.forEach(function (marker) {
|
if (this.markers && this.markers.length > 0) {
|
||||||
map.extendBoundsWithMarker(bounds, marker);
|
this.markers.forEach(function (marker) {
|
||||||
});
|
map.extendBoundsWithMarker(bounds, marker);
|
||||||
}
|
});
|
||||||
if (this.polylines && this.polylines.length>0) {
|
}
|
||||||
this.polylines.forEach(function (polyline) {
|
if (this.polylines && this.polylines.length > 0) {
|
||||||
map.extendBounds(bounds, polyline);
|
this.polylines.forEach(function (polyline) {
|
||||||
})
|
map.extendBounds(bounds, polyline);
|
||||||
}
|
})
|
||||||
if (this.polygons && this.polygons.length > 0) {
|
}
|
||||||
this.polygons.forEach(function (polygon) {
|
if (this.polygons && this.polygons.length > 0) {
|
||||||
map.extendBounds(bounds, polygon);
|
this.polygons.forEach(function (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",
|
||||||
|
|||||||
@ -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();
|
||||||
|
|||||||
@ -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) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user