Merge pull request #235 from thingsboard/feature/TB-70

TB-70: Image map - marker offset settings.

dao/src/main/resources/sql/schema.sql

@@ -89,7 +89,7 @@ CREATE TABLE IF NOT EXISTS customer (
 
 CREATE TABLE IF NOT EXISTS dashboard (
     id varchar(31) NOT NULL CONSTRAINT dashboard_pkey PRIMARY KEY,
-    configuration varchar,
+    configuration varchar(10000000),
     customer_id varchar(31),
     search_text varchar(255),
     tenant_id varchar(31),

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

@@ -137,8 +137,8 @@ export default class TbImageMap {
     updateMarkerDimensions(marker) {
         var pinElement = marker.pinElement;
         pinElement.css({width: marker.size, height: marker.size});
-        var left = marker.x * this.width - marker.size/2;
-        var top = marker.y * this.height - marker.size;
+        var left = marker.x * this.width - marker.size * marker.offsetX;
+        var top = marker.y * this.height - marker.size * marker.offsetY;
         pinElement.css({left: left, top: top});
     }
 
@@ -150,6 +150,8 @@ export default class TbImageMap {
         var pos = this.posFunction(position.x, position.y);
         marker.x = pos.x;
         marker.y = pos.y;
+        marker.offsetX = settings.markerOffsetX;
+        marker.offsetY = settings.markerOffsetY;
         marker.pinElement = angular.element('<div class="image-map-pin"></div>');
 
         if (settings.showLabel) {

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

@@ -116,6 +116,8 @@ export default class TbMapWidgetV2 {
         if (this.mapProvider  == 'image-map') {
             this.locationSettings.latKeyName = this.ctx.settings.xPosKeyName || 'xPos';
             this.locationSettings.lngKeyName = this.ctx.settings.yPosKeyName || 'yPos';
+            this.locationSettings.markerOffsetX = angular.isDefined(this.ctx.settings.markerOffsetX) ? this.ctx.settings.markerOffsetX : 0.5;
+            this.locationSettings.markerOffsetY = angular.isDefined(this.ctx.settings.markerOffsetY) ? this.ctx.settings.markerOffsetY : 1;
         } else {
             this.locationSettings.latKeyName = this.ctx.settings.latKeyName || 'latitude';
             this.locationSettings.lngKeyName = this.ctx.settings.lngKeyName || 'longitude';
@@ -735,6 +737,16 @@ const imageMapSettingsSchema =
                 "type":"string",
                 "default": "return {x: origXPos, y: origYPos};"
             },
+            "markerOffsetX": {
+                "title": "Marker X offset relative to position",
+                "type": "number",
+                "default": 0.5
+            },
+            "markerOffsetY": {
+                "title": "Marker Y offset relative to position",
+                "type": "number",
+                "default": 1
+            },
             "useColorFunction":{
                 "title":"Use color function",
                 "type":"boolean",
@@ -794,6 +806,8 @@ const imageMapSettingsSchema =
             "key":"posFunction",
             "type":"javascript"
         },
+        "markerOffsetX",
+        "markerOffsetY",
         "useColorFunction",
         {
             "key":"colorFunction",

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

@@ -28,8 +28,8 @@ export default class TbOpenStreetMap {
 
         this.map = L.map($containerElement[0]).setView([0, 0], this.defaultZoomLevel || 8);
 
-        L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
-            attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         }).addTo(this.map);
 
         if (initCallback) {