Merge pull request #1633 from Terny22/improvement/maps-scroll-zooming-setting

Added 'Disable scroll zooming' setting for all map types

ui/src/app/widget/lib/google-map.js

@@ -19,7 +19,7 @@ var gmGlobals = {
 }
 
 export default class TbGoogleMap {
-    constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, gmApiKey, gmDefaultMapType) {
+    constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, gmApiKey, gmDefaultMapType) {
 
         var tbMap = this;
         this.utils = utils;
@@ -44,7 +44,7 @@ export default class TbGoogleMap {
         function initGoogleMap() {
 
             tbMap.map = new google.maps.Map($containerElement[0], { // eslint-disable-line no-undef
-                scrollwheel: true,
+                scrollwheel: !disableScrollZooming,
                 mapTypeId: getGoogleMapTypeId(tbMap.defaultMapType),
                 zoom: tbMap.defaultZoomLevel || 8
             });

ui/src/app/widget/lib/image-map.js

@@ -20,7 +20,7 @@ const maxZoom = 4;
 
 export default class TbImageMap {
 
-    constructor(ctx, $containerElement, utils, initCallback, imageUrl, posFunction, imageEntityAlias, imageUrlAttribute) {
+    constructor(ctx, $containerElement, utils, initCallback, imageUrl, disableScrollZooming, posFunction, imageEntityAlias, imageUrlAttribute) {
 
         this.ctx = ctx;
         this.utils = utils;
@@ -34,6 +34,7 @@ export default class TbImageMap {
         this.height = 0;
         this.markers = [];
         this.initCallback = initCallback;
+        this.disableScrollZooming = disableScrollZooming;
 
         if (angular.isDefined(posFunction) && posFunction.length > 0) {
             try {
@@ -165,6 +166,7 @@ export default class TbImageMap {
             this.map = L.map(this.$containerElement[0], {
                 minZoom: 1,
                 maxZoom: maxZoom,
+                scrollWheelZoom: !this.disableScrollZooming,
                 center: center,
                 zoom: 1,
                 crs: L.CRS.Simple,

ui/src/app/widget/lib/map-widget2.js

@@ -78,28 +78,29 @@ export default class TbMapWidgetV2 {
 			tbMap.tooltipActionsMap[descriptor.name] = descriptor;
 		});
 
+		let openStreetMapProvider = {};
 		if (mapProvider === 'google-map') {
-			this.map = new TbGoogleMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType);
+			this.map = new TbGoogleMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType);
 		} else if (mapProvider === 'openstreet-map') {
-			let openStreetMapProvider = {};
 			if (settings.useCustomProvider && settings.customProviderTileUrl) {
                 openStreetMapProvider.name = settings.customProviderTileUrl;
                 openStreetMapProvider.isCustom = true;
 			} 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, minZoomLevel, openStreetMapProvider);
 		} else if (mapProvider === 'here') {
-			this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.mapProvider, settings.credentials);
+			openStreetMapProvider.name = settings.mapProvider;
+			this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, openStreetMapProvider, settings.credentials);
 		} 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);
 		} else if (mapProvider === 'tencent-map') {
-			this.map = new TbTencentMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.tmApiKey, settings.tmDefaultMapType);
+			this.map = new TbTencentMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, settings.tmApiKey, settings.tmDefaultMapType);
 		}
 
 
@@ -938,6 +939,11 @@ const commonMapSettingsSchema =
 					"type": "boolean",
 					"default": true
 				},
+				"disableScrollZooming": {
+					"title": "Disable scroll zooming",
+					"type": "boolean",
+					"default": false
+				},
 				"latKeyName": {
 					"title": "Latitude key name",
 					"type": "string",
@@ -1078,6 +1084,7 @@ const commonMapSettingsSchema =
 		"form": [
 			"defaultZoomLevel",
 			"fitMapBounds",
+			"disableScrollZooming",
 			"latKeyName",
 			"lngKeyName",
 			"showLabel",
@@ -1189,6 +1196,11 @@ const imageMapSettingsSchema =
 					"type": "string",
 					"default": ""
 				},
+				"disableScrollZooming": {
+					"title": "Disable scroll zooming",
+					"type": "boolean",
+					"default": false
+				},
 				"xPosKeyName": {
 					"title": "X position key name",
 					"type": "string",
@@ -1306,6 +1318,7 @@ const imageMapSettingsSchema =
 			},
 			"imageEntityAlias",
 			"imageUrlAttribute",
+			"disableScrollZooming",
 			"xPosKeyName",
 			"yPosKeyName",
 			"showLabel",

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, minZoomLevel, mapProvider, credentials) {
+	constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, mapProvider, credentials) {
 
 		this.utils = utils;
 		this.defaultZoomLevel = defaultZoomLevel;
@@ -33,13 +33,17 @@ export default class TbOpenStreetMap {
 			};
 		}
 
-		if (mapProvider.startsWith("HERE.")) {
+		if (mapProvider.name.startsWith("HERE.")) {
 			credentials.app_id = credentials.app_id || "AhM6TzD9ThyK78CT3ptx";
 			credentials.app_code = credentials.app_code || "p6NPiITB3Vv0GMUFnkLOOg";
 		}
 
 		this.map = L.map($containerElement[0]).setView([0, 0], this.defaultZoomLevel || 8);
 
+		if (disableScrollZooming) {
+			this.map.scrollWheelZoom.disable();
+		}
+
 		var tileLayer = mapProvider.isCustom ? L.tileLayer(mapProvider.name) : L.tileLayer.provider(mapProvider.name, credentials);
 		tileLayer.addTo(this.map);
 

ui/src/app/widget/lib/tencent-map.js

@@ -19,7 +19,7 @@ var tmGlobals = {
 }
 
 export default class TbTencentMap {
-	constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, tmApiKey, tmDefaultMapType) {
+	constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, tmApiKey, tmDefaultMapType) {
 		var tbMap = this;
 		this.utils = utils;
 		this.defaultZoomLevel = defaultZoomLevel;
@@ -42,7 +42,7 @@ export default class TbTencentMap {
 
 		function initTencentMap() {
 			tbMap.map = new qq.maps.Map($containerElement[0], { // eslint-disable-line no-undef
-				scrollwheel: true,
+				scrollwheel: !disableScrollZooming,
 				mapTypeId: getTencentMapTypeId(tbMap.defaultMapType),
 				zoom: tbMap.defaultZoomLevel || 8
 			});

ui/src/app/widget/lib/tripAnimation/trip-animation-widget.js

@@ -264,7 +264,7 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
             }
         }
         vm.dontFitMapBounds = vm.ctx.settings.fitMapBounds === false;
-        vm.map = new TbOpenStreetMap(vm.ctx.$element, vm.utils, initCallback, vm.defaultZoomLevel, vm.dontFitMapBounds, null, vm.staticSettings.mapProvider);
+        vm.map = new TbOpenStreetMap(vm.ctx.$element, vm.utils, initCallback, vm.defaultZoomLevel, vm.dontFitMapBounds, vm.staticSettings.disableScrollZooming, null, vm.staticSettings.mapProvider);
         vm.map.bounds = vm.map.createBounds();
         vm.map.invalidateSize(true);
         vm.map.bounds = vm.map.createBounds();
@@ -284,7 +284,8 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
         staticSettings.disabledButtonColor = tinycolor(vm.widgetConfig.color).setAlpha(0.3).toRgbString();
         staticSettings.polygonColor = tinycolor(vm.ctx.settings.polygonColor).toHexString();
         staticSettings.polygonStrokeColor = tinycolor(vm.ctx.settings.polygonStrokeColor).toHexString();
-        staticSettings.mapProvider = vm.ctx.settings.mapProvider || "OpenStreetMap.Mapnik";
+        staticSettings.mapProvider = vm.ctx.settings.mapProvider ? {name: vm.ctx.settings.mapProvider} : {name: "OpenStreetMap.Mapnik"};
+        staticSettings.disableScrollZooming = vm.ctx.settings.disableScrollZooming || false;
         staticSettings.latKeyName = vm.ctx.settings.latKeyName || "latitude";
         staticSettings.lngKeyName = vm.ctx.settings.lngKeyName || "longitude";
         staticSettings.polKeyName = vm.ctx.settings.polKeyName || "coordinates";
@@ -328,6 +329,12 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
             iconSize: [30, 30],
             iconAnchor: [15, 15]
         });
+
+        if (vm.ctx.settings.useCustomProvider && vm.ctx.settings.customProviderTileUrl) {
+            staticSettings.mapProvider.name = vm.ctx.settings.customProviderTileUrl;
+            staticSettings.mapProvider.isCustom = true;
+        }
+
         if (angular.isDefined(vm.ctx.settings.markerImage)) {
             staticSettings.icon = L.icon({
                 iconUrl: vm.ctx.settings.markerImage,