Map/3.0 (#2544)

* add base map infrastructure

* add leaflet css

* add tencent map

* add google maps support

* added image map support

* refactor schemes

* here maps support && WIP on markers

* add simple marker suppor

* data update & polyline support

* map bouds support

* add some settings support

* add map provider select to settings

* labels support

* WIP on trip animation widget

* WIP on history control and route interpolation

* trip-animation map provider & custom markers

* comleted track marker & history controls

* add license headers

* label fix & tooltips support

* WIP on polygons

* marker dropping support

* add polygon support

* add label to trip animation

* WIP on tooltips

* lint anf typed leaflet AddMarker

* some typing and poly improvements

* add typing

* add marker creation

* update proxy

* save position fix

* add bounds padding

* update map widget bendle && bugfixes

* update marker placement widget

* add licenses

* reomove log

* fix sizes

* entity and map fixes

* Fix tile server support  form OSM and zoom level fix

Co-authored-by: Artem Halushko <ahalushko@thingboards.io>
Co-authored-by: Adsumus <artemtv42@gmail.com>

ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts

@@ -23,7 +23,7 @@ import 'leaflet.markercluster/dist/leaflet.markercluster'
 
 import { MapSettings, MarkerSettings, FormattedData, UnitedMapSettings, PolygonSettings, PolylineSettings } from './map-models';
 import { Marker } from './markers';
-import { Observable, of, BehaviorSubject, Subject } from 'rxjs';
+import { Observable, BehaviorSubject } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { Polyline } from './polyline';
 import { Polygon } from './polygon';
@@ -64,7 +64,7 @@ export default abstract class LeafletMap {
             let mousePositionOnMap: L.LatLng;
             let addMarker: L.Control;
             this.map.on('mouseup', (e: L.LeafletMouseEvent) => {
-                mousePositionOnMap = e.latlng
+                mousePositionOnMap = e.latlng;
             })
             const dragListener = (e: L.DragEndEvent) => {
                 if (e.type === 'dragend' && mousePositionOnMap) {
@@ -164,6 +164,23 @@ export default abstract class LeafletMap {
         return this.map.getCenter();
     }
 
+    fitBounds(bounds, useDefaultZoom = false) {
+        if (bounds.isValid()) {
+            if ((this.options.dontFitMapBounds || useDefaultZoom) && this.options.defaultZoomLevel) {
+                this.map.setZoom(this.options.defaultZoomLevel, { animate: false });
+                this.map.panTo(bounds.getCenter(), { animate: false });
+            } else {
+                this.map.once('zoomend', function () {
+                    if (!this.options.defaultZoomLevel && this.options.map.getZoom() > this.options.minZoomLevel) {
+                        this.map.setZoom(this.options.minZoomLevel, { animate: false });
+                    }
+                });
+                this.map.fitBounds(bounds, { padding: [50, 50], animate: false });
+            }
+            this.bounds = this.bounds.extend(bounds);
+        }
+    }
+
     convertPosition(expression: object): L.LatLng {
         if (!expression) return null;
         const lat = expression[this.options.latKeyName];
@@ -185,7 +202,7 @@ export default abstract class LeafletMap {
     updateMarkers(markersData) {
         markersData.forEach(data => {
             if (this.convertPosition(data)) {
-                if (data.rotationAngle) {
+                if (data.rotationAngle || data.rotationAngle === 0) {
                     this.options.icon = L.divIcon({
                         html: `<div class="arrow" style="transform: translate(-10px, -10px) rotate(${data.rotationAngle}deg);"><div>`
                     })
@@ -211,8 +228,7 @@ export default abstract class LeafletMap {
     private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings, setFocus = true) {
         this.ready$.subscribe(() => {
             const newMarker = new Marker(this.map, this.convertPosition(data), settings, data, dataSources, () => { }, this.dragMarker);
-            if (setFocus /*&& settings.fitMapBounds*/)
+            this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()), setFocus);
-                this.map.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()).pad(0.2));
             this.markers.set(key, newMarker);
         });
     }
@@ -260,11 +276,8 @@ export default abstract class LeafletMap {
             this.ready$.subscribe(() => {
                 const poly = new Polyline(this.map,
                     data.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
-                const bounds = this.bounds.extend(poly.leafletPoly.getBounds().pad(0.2));
+                const bounds = this.bounds.extend(poly.leafletPoly.getBounds());
-                if (bounds.isValid()) {
+                this.fitBounds(bounds)
-                    this.map.fitBounds(bounds);
-                    this.bounds = bounds;
-                }
                 this.polylines.set(data[0].entityName, poly)
             });
     }
@@ -296,7 +309,7 @@ export default abstract class LeafletMap {
     createPolygon(key: string, data: LatLngTuple[], dataSources: DatasourceData[], settings: PolygonSettings) {
         this.ready$.subscribe(() => {
             const polygon = new Polygon(this.map, data, dataSources, settings);
-            const bounds = this.bounds.extend(polygon.leafletPoly.getBounds().pad(0.2));
+            const bounds = this.bounds.extend(polygon.leafletPoly.getBounds());
             if (bounds.isValid()) {
                 this.map.fitBounds(bounds);
                 this.bounds = bounds;

ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import L from 'leaflet';
+import L, { LatLngLiteral } from 'leaflet';
 import LeafletMap from '../leaflet-map';
 import { MapSettings, UnitedMapSettings } from '../map-models';
 import { aspectCache } from '@app/core/utils';
@@ -93,7 +93,6 @@ export class ImageMap extends LeafletMap {
                     lastCenterPos.y /= prevHeight;
                     this.updateBounds(updateImage, lastCenterPos);
                     this.map.invalidateSize(true);
-                    // this.updateMarkers();
                 }
 
             }
@@ -113,7 +112,6 @@ export class ImageMap extends LeafletMap {
                 attributionControl: false
             });
             this.updateBounds(updateImage);
-            // this.updateMarkers();
         }
     }
 
@@ -127,7 +125,14 @@ export class ImageMap extends LeafletMap {
         return L.CRS.Simple.pointToLatLng({ x, y } as L.PointExpression, maxZoom - 1);
     }
 
-    latLngToPoint(latLng) {
+    latLngToPoint(latLng: LatLngLiteral) {
         return L.CRS.Simple.latLngToPoint(latLng, maxZoom - 1);
     }
+
+   /* convertToCustomFormat(position: L.LatLng): object {
+        return {
+            [this.options.xPosKeyName]: (position.lng + 180) / 360,
+            [this.options.yPosKeyName]: (position.lat + 180) / 360
+        }
+    }*/
 }

ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts

@@ -22,7 +22,7 @@ export class OpenStreetMap extends LeafletMap {
     constructor($container, options: UnitedMapSettings) {
         super($container, options);
         const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
-        const tileLayer = (L.tileLayer as any).provider('OpenStreetMap.Mapnik');
+        const tileLayer = (L.tileLayer as any).provider(options.mapProvider || 'OpenStreetMap.Mapnik');
         tileLayer.addTo(map);
         super.setMap(map);
         super.initSettings(options);