diff --git a/package-lock.json b/package-lock.json index e706442f..58f891d9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3303,9 +3303,9 @@ "dev": true }, "@types/geojson": { - "version": "7946.0.7", - "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz", - "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==" + "version": "7946.0.8", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz", + "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==" }, "@types/glob": { "version": "7.1.3", @@ -3391,17 +3391,17 @@ "dev": true }, "@types/leaflet": { - "version": "1.5.19", - "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.5.19.tgz", - "integrity": "sha512-ZAKqfvdU/+KFoCpf8aUba09F8mfSc8R2esq++Cha3E2DgwS5K/I/4eJ+0JylrVHZivgY7PSAeXFv/izP+81/MQ==", + "version": "1.7.6", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.6.tgz", + "integrity": "sha512-Emkz3V08QnlelSbpT46OEAx+TBZYTOX2r1yM7W+hWg5+djHtQ1GbEXBDRLaqQDOYcDI51Ss0ayoqoKD4CtLUDA==", "requires": { "@types/geojson": "*" } }, "@types/leaflet.markercluster": { - "version": "1.4.3", - "resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.4.3.tgz", - "integrity": "sha512-X/b/Enz84PzmcA9z7pxsHEBEUNghmvznEBcRQeuxyYL/QU6jAR7LIb/ot03ATNPO56wSFzbCnsOf7yJ+7FzS1Q==", + "version": "1.4.6", + "resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.4.6.tgz", + "integrity": "sha512-MD+bUDzxHznY0zOlSBUAMNQUGB2+xpJPKrR2MNEoBAAKa3QTKJJySBtCqWyGLvYNNO+Cdyc2c64aF2IFwe4fcQ==", "requires": { "@types/leaflet": "*" } @@ -10830,9 +10830,9 @@ "integrity": "sha512-WcEjAROx9IhIVwSMoFy9p2QBCG9YeuGtJl4ZdunIgj4xbCdTrUkBj8JdonUeCyLPnD2/Vrem/raOPHm5LvebSw==" }, "leaflet.markercluster": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz", - "integrity": "sha512-ZSEpE/EFApR0bJ1w/dUGwTSUvWlpalKqIzkaYdYB7jaftQA/Y2Jav+eT4CMtEYFj+ZK4mswP13Q2acnPBnhGOw==" + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz", + "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==" }, "less": { "version": "3.12.2", diff --git a/package.json b/package.json index 171d1068..d748cf1f 100644 --- a/package.json +++ b/package.json @@ -56,12 +56,12 @@ "@angular/platform-browser-dynamic": "^11.0.5", "@angular/router": "^11.0.5", "@storybook/addon-knobs": "^6.1.0", - "@types/leaflet": "^1.5.19", - "@types/leaflet.markercluster": "^1.4.3", + "@types/leaflet": "^1.7.6", + "@types/leaflet.markercluster": "^1.4.6", "boosted": "^4.6.0", "iotmapmanager": "^2.6.6", - "leaflet": "^1.6.0", - "leaflet.markercluster": "^1.4.1", + "leaflet": "^1.7.1", + "leaflet.markercluster": "^1.5.3", "zone.js": "^0.11.3" } } diff --git a/src/assets/plan.png b/src/assets/plan.png new file mode 100644 index 00000000..96d44911 Binary files /dev/null and b/src/assets/plan.png differ diff --git a/src/iotMapManager/css/map.css b/src/iotMapManager/css/map.css index 1cfec312..0447ee0a 100644 --- a/src/iotMapManager/css/map.css +++ b/src/iotMapManager/css/map.css @@ -43,4 +43,3 @@ color: black; } - diff --git a/src/iotMapManager/src/iot-map-config.ts b/src/iotMapManager/src/iot-map-config.ts index ed2880c9..9ccbe257 100644 --- a/src/iotMapManager/src/iot-map-config.ts +++ b/src/iotMapManager/src/iot-map-config.ts @@ -27,6 +27,7 @@ export class IotMapConfig { externalClustering: false, layerControl: true, exclusiveLayers: false, + bearing: 0, // *** Private conf: not modified by SetConfig *** geoportailLayer: 'https://wxs.ign.fr/{apikey}/geoportail/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE={style}&TILEMATRIXSET=PM&FORMAT={format}&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}', @@ -391,6 +392,9 @@ export class IotMapConfig { if (newConfig.map.exclusiveLayers !== undefined) { this.map.exclusiveLayers = newConfig.map.exclusiveLayers } + if (newConfig.map.bearing !== undefined) { + this.map.bearing = newConfig.map.bearing + } } /* diff --git a/src/iotMapManager/src/iot-map-manager.ts b/src/iotMapManager/src/iot-map-manager.ts index 25658822..36d8789b 100644 --- a/src/iotMapManager/src/iot-map-manager.ts +++ b/src/iotMapManager/src/iot-map-manager.ts @@ -14,9 +14,11 @@ import * as L from 'leaflet' import 'leaflet.markercluster' + import { IotMapConfig } from './iot-map-config' import { IotMapDisplay } from './iot-map-types' import { getAutomaticClusterIcon } from './iot-map-icons' +import { TileLayer } from 'leaflet' export class IotMapManager { private map: L.Map @@ -33,6 +35,10 @@ export class IotMapManager { private accuracyDisplayed = true private currentDisplayedLayers: string[] = [] + private tile: TileLayer; + + private pic: L.ImageOverlay + /** * Constructor * @param config - config to use for map display @@ -46,6 +52,7 @@ export class IotMapManager { // ------------------------------------------------------------------------------------------------------------------ // handler for 'moveend' public onMove?: () => void + public onMoveStart?: (e) => void // handler for 'click' on markers public onEltClick?: (id: string) => void @@ -57,24 +64,69 @@ export class IotMapManager { */ public init (selector: string): void { // init map - this.map = L.map(selector).setView(L.latLng(this.config.map.defaultLat, this.config.map.defaultLng), + this.map = L.map(selector, { rotate: true, maxZoom: 22, maxNativeZoom: 19 }).setView(L.latLng(this.config.map.defaultLat, this.config.map.defaultLng), this.config.map.defaultZoomLevel) // init base layers - L.tileLayer(this.config.map.openStreetMapLayer, + this.tile = L.tileLayer(this.config.map.openStreetMapLayer, { attribution: '© OpenStreetMap contributors' }) - .addTo(this.map) + this.tile.addTo(this.map) + if (this.config.map.layerControl) { this.layerControl = L.control.layers(this.baseLayers, this.markersLayers).addTo(this.map) } this.map.on('moveend', this.onMove) + .on('movestart', this.onMoveStart) .on('baselayerchange', this.onBaseLayerChange.bind(this)) - .on('overlayadd', this.onOverlayAdd.bind(this)) - .on('overlayremove', this.onOverlayRemove.bind(this)) .on('click', this.onClick.bind(this)) this.selectedElement = undefined + + // set bearing + this.map.setBearing(this.config.map.bearing) + } + + public displayOverlayImage (image: string, bearing: number, bottomLeft: L.Point, topRight: L.Point): void { + const bl = this.map.project([bottomLeft.x, bottomLeft.y]) + const tr = this.map.project([topRight.x, topRight.y]) + const dLat = Math.abs(bl.x - tr.x) + const dLng = Math.abs(bl.y - tr.y) + const dCarte = Math.sqrt(Math.pow(dLat, 2) + Math.pow(dLng, 2)) + + // sur le plan + // getImagesize : l = 2808, L = 536 + const imgLength = 2808 + const imgWidth = 536 + const dPlan = Math.sqrt(Math.pow(imgLength, 2) + Math.pow(imgWidth, 2)) + + // rapport + const ratio = dCarte / dPlan + + // destination + const pxDest = new L.Point(tr.x + imgLength * ratio, tr.y - imgWidth * ratio) + const pxDestUnProject = this.map.unproject(pxDest) + + const img = new Image() + img.src = '../assets/plan.png' + img.onload = function () { + const imageUrl = '../assets/plan.png' + const imageBounds = new L.LatLngBounds( + L.latLng(topRight.x, topRight.y), + pxDestUnProject + ) + + this.pic = L.imageOverlay(imageUrl, imageBounds).addTo(this.map) + this.pic.getElement().classList.add('iotmap-imgOverlay') + this.pic.getElement().style.transform = this.pic.getElement().style.transform.replace(/ rotate\(.+\)/, '') + this.pic.getElement().style.transform += ' rotate(' + (-bearing) + 'deg)' + }.bind(this) + } + + public removeOverlayImage (): void { + if (this.pic) { + this.pic.removeFrom(this.map) + } } /** @@ -258,7 +310,9 @@ export class IotMapManager { } element.elementClicked() // inform cluster to open - element.shiftMap() + // element.shiftMap() + + this.map.fitBounds(this.map.getBounds()) } /** @@ -312,27 +366,6 @@ export class IotMapManager { } } - private onOverlayAdd (event) { - if (event.name === this.config.accuracyCircle.layerName) { - this.accuracyDisplayed = true - } else { - this.currentDisplayedLayers.push(event.name) - } - this.updateAccuracy() - } - - private onOverlayRemove (event) { - if (event.name === this.config.accuracyCircle.layerName) { - this.accuracyDisplayed = false - } else { - const index = this.currentDisplayedLayers.indexOf(event.name, 0) - if (index > -1) { - this.currentDisplayedLayers.splice(index, 1) - } - } - this.updateAccuracy() - } - private onClick () { this.changeSelectionStatus(this.selectedElement, false) } diff --git a/src/iotMapManager/src/iot-map-marker.ts b/src/iotMapManager/src/iot-map-marker.ts index b82428e0..4d244096 100644 --- a/src/iotMapManager/src/iot-map-marker.ts +++ b/src/iotMapManager/src/iot-map-marker.ts @@ -122,11 +122,15 @@ export class IotMapMarker extends IotMapDisplay { const northEastPos = this.map.getIotMap().latLngToLayerPoint(mapBounds.getNorthEast()) const southWestPos = this.map.getIotMap().latLngToLayerPoint(mapBounds.getSouthWest()) + let needToshift = false + // top if (eltPos.y - northEastPos.y < 200) { const shift = 200 - (eltPos.y - northEastPos.y) northEastPos.y -= shift southWestPos.y -= shift + + needToshift = true } // left @@ -134,6 +138,8 @@ export class IotMapMarker extends IotMapDisplay { const shift = 150 - (eltPos.x - southWestPos.x) northEastPos.x -= shift southWestPos.x -= shift + + needToshift = true } // bottom - no need to shift @@ -142,10 +148,14 @@ export class IotMapMarker extends IotMapDisplay { const shift = 150 - (northEastPos.x - eltPos.x) northEastPos.x += shift southWestPos.x += shift + + needToshift = true } - const newMapBounds = L.latLngBounds(this.map.getIotMap().layerPointToLatLng(southWestPos), this.map.getIotMap().layerPointToLatLng(northEastPos)) - this.map.getIotMap().flyToBounds(newMapBounds) + if (needToshift) { + const newMapBounds = L.latLngBounds(this.map.getIotMap().layerPointToLatLng(southWestPos), this.map.getIotMap().layerPointToLatLng(northEastPos)) + this.map.getIotMap().flyToBounds(newMapBounds) + } } } } diff --git a/src/map/map.component.css b/src/map/map.component.css index 5746036e..44dd9493 100644 --- a/src/map/map.component.css +++ b/src/map/map.component.css @@ -1,6 +1,6 @@ #iotMap { width: 1200px; - height: 700px; + height: 600px; } diff --git a/src/map/map.component.ts b/src/map/map.component.ts index da1d0b3d..2a319e91 100644 --- a/src/map/map.component.ts +++ b/src/map/map.component.ts @@ -1,5 +1,5 @@ import { AfterViewInit, Component } from '@angular/core' -import { LatLngBounds } from 'leaflet' +import * as L2 from 'leaflet' import { IotMapManager, IotCluster, @@ -15,7 +15,8 @@ import { IotMapUserMarkerManager, IotMapPathManager, IotMapAreaManager -} from 'iotmapmanager' +// } from 'iotmapmanager' +} from '../iotMapManager/index' @Component({ selector: 'map-component', @@ -33,6 +34,53 @@ export class MapComponent implements AfterViewInit { iotMapAreaManager: IotMapAreaManager = new IotMapAreaManager(this.commonIotMap, this.conf) title = 'IotMap'; + gailleton: IotMarker[] = [ + { + id: 'g1', + location: { + lat: 45.755134, + lng: 4.834652 + }, + shape: { + type: ShapeType.circle, + color: 'blue' + } + }, + { + id: 'g2', + location: { + lat: 45.755659, + lng: 4.835008 + }, + shape: { + type: ShapeType.circle, + color: 'red' + } + }, + { + id: 'g3', + location: { + lat: 45.755696, + lng: 4.835217 + }, + shape: { + type: ShapeType.circle, + color: 'orange' + } + }, + { + id: 'g4', + location: { + lat: 45.755085, + lng: 4.834809 + }, + shape: { + type: ShapeType.circle, + color: 'green' + } + } + ] + markersList: IotMarker[] = [ // square { @@ -98,7 +146,7 @@ export class MapComponent implements AfterViewInit { shape: { type: ShapeType.square, anchored: true, - plain: false, + plain: false//, // accuracy: 200 }, inner: { @@ -213,44 +261,26 @@ export class MapComponent implements AfterViewInit { }, status: 'inactive' }, - { - id: 'p6', - location: { - lat: 44.890, - lng: 4.895 - }, - shape: { - type: ShapeType.square, - plain: true, - anchored: false - }, - layer: 'etablissements', - inner: { - icon: 'iotmap-icons-map_pin', - color: 'white' - } - }, - // circle { id: 'c1', layer: 'circles', location: { lat: 44.885, lng: 4.870 - }, + }//, - shape: { - type: ShapeType.circle, - percent: 75, - anchored: false, - direction: 0 - }, - status: 'positive', - inner: { - icon: 'iotmap-icons-vehicle', - color: 'black' - } + // shape: { + // type: ShapeType.circle, + // percent: 75, + // anchored: false//, + // direction: 0 + // }, + // status: 'positive', + // inner: { + // icon: 'iotmap-icons-vehicle', + // color: 'black' + // } }, { id: 'c2', @@ -327,7 +357,18 @@ export class MapComponent implements AfterViewInit { label: 'H', color: 'black' } - }]; + }, + + + { + id: 'c1', + layer: 'circles', + location: { + lat: 44.885, + lng: 4.870 + }//, + } + ]; clustersList: IotCluster[] = [ { @@ -336,7 +377,7 @@ export class MapComponent implements AfterViewInit { lat: 44.882, lng: 4.895 }, - markersArea: new LatLngBounds([44.880, 4.89], [44.885, 4.9]), + markersArea: new L2.LatLngBounds([44.880, 4.89], [44.885, 4.9]), contentLabel: 'interfaces', colNumber: 2, childCount: 4860, @@ -490,7 +531,7 @@ export class MapComponent implements AfterViewInit { urlTarget: '_blank' }] } - ]; + ] userMarker: IotUserMarker = { location: { @@ -504,102 +545,102 @@ export class MapComponent implements AfterViewInit { chemin: IotPath = { id: 'chemin', points: [ - { lat: 44.9, lng: 4.8818 }, - { lat: 44.899, lng: 4.8816 }, - { lat: 44.898, lng: 4.8814 }, - { lat: 44.897, lng: 4.8813 }, - { lat: 44.896, lng: 4.8811 }, - { lat: 44.895, lng: 4.8809 }, - { lat: 44.894, lng: 4.8807 }, - { lat: 44.893, lng: 4.8807 }, - { lat: 44.893, lng: 4.8810 }, - { lat: 44.8929, lng: 4.882 }, - { lat: 44.8929, lng: 4.883 }, - { lat: 44.8929, lng: 4.884 }, - { lat: 44.8925, lng: 4.884 }, - { lat: 44.892, lng: 4.884 }], + {lat: 44.9, lng: 4.8818}, + {lat: 44.899, lng: 4.8816}, + {lat: 44.898, lng: 4.8814}, + {lat: 44.897, lng: 4.8813}, + {lat: 44.896, lng: 4.8811}, + {lat: 44.895, lng: 4.8809}, + {lat: 44.894, lng: 4.8807}, + {lat: 44.893, lng: 4.8807}, + {lat: 44.893, lng: 4.8810}, + {lat: 44.8929, lng: 4.882}, + {lat: 44.8929, lng: 4.883}, + {lat: 44.8929, lng: 4.884}, + {lat: 44.8925, lng: 4.884}, + {lat: 44.892, lng: 4.884}], positions: [ - { lat: 44.896, lng: 4.8811 }, - { lat: 44.8929, lng: 4.884 }], + {lat: 44.896, lng: 4.8811}, + {lat: 44.8929, lng: 4.884}], additional: [ { line: 1, color: '#CD3C14', points: [ - { lat: 44.9, lng: 4.8818 }, - { lat: 44.899, lng: 4.8816 }, - { lat: 44.898, lng: 4.8814 }, - { lat: 44.897, lng: 4.8813 }, - { lat: 44.896, lng: 4.8811 }, - { lat: 44.895, lng: 4.8809 }] + {lat: 44.9, lng: 4.8818}, + {lat: 44.899, lng: 4.8816}, + {lat: 44.898, lng: 4.8814}, + {lat: 44.897, lng: 4.8813}, + {lat: 44.896, lng: 4.8811}, + {lat: 44.895, lng: 4.8809}] }, { line: 1, color: '#CD3C14', points: [ - { lat: 44.8929, lng: 4.883 }, - { lat: 44.8929, lng: 4.884 }, - { lat: 44.8925, lng: 4.884 }, - { lat: 44.892, lng: 4.884 }] + {lat: 44.8929, lng: 4.883}, + {lat: 44.8929, lng: 4.884}, + {lat: 44.8925, lng: 4.884}, + {lat: 44.892, lng: 4.884}] }, { line: 2, color: '#FFCC00', points: [ - { lat: 44.897, lng: 4.8813 }, - { lat: 44.896, lng: 4.8811 }, - { lat: 44.895, lng: 4.8809 }, - { lat: 44.894, lng: 4.8807 }, - { lat: 44.893, lng: 4.8807 }, - { lat: 44.893, lng: 4.8810 }, - { lat: 44.8929, lng: 4.882 }] + {lat: 44.897, lng: 4.8813}, + {lat: 44.896, lng: 4.8811}, + {lat: 44.895, lng: 4.8809}, + {lat: 44.894, lng: 4.8807}, + {lat: 44.893, lng: 4.8807}, + {lat: 44.893, lng: 4.8810}, + {lat: 44.8929, lng: 4.882}] }, { line: 2, color: '#FFCC00', points: [ - { lat: 44.8925, lng: 4.884 }, - { lat: 44.892, lng: 4.884 }] + {lat: 44.8925, lng: 4.884}, + {lat: 44.892, lng: 4.884}] }, { line: 3, color: '#32C832', points: [ - { lat: 44.9, lng: 4.8818 }, - { lat: 44.899, lng: 4.8816 }, - { lat: 44.898, lng: 4.8814 }, - { lat: 44.897, lng: 4.8813 }, - { lat: 44.896, lng: 4.8811 }] + {lat: 44.9, lng: 4.8818}, + {lat: 44.899, lng: 4.8816}, + {lat: 44.898, lng: 4.8814}, + {lat: 44.897, lng: 4.8813}, + {lat: 44.896, lng: 4.8811}] }, { line: 3, color: '#32C832', points: [ - { lat: 44.895, lng: 4.8809 }, - { lat: 44.894, lng: 4.8807 }, - { lat: 44.893, lng: 4.8807 }, - { lat: 44.893, lng: 4.8810 }, - { lat: 44.8929, lng: 4.882 }, - { lat: 44.8929, lng: 4.883 }, - { lat: 44.8929, lng: 4.884 }, - { lat: 44.8925, lng: 4.884 }, - { lat: 44.892, lng: 4.884 }] + {lat: 44.895, lng: 4.8809}, + {lat: 44.894, lng: 4.8807}, + {lat: 44.893, lng: 4.8807}, + {lat: 44.893, lng: 4.8810}, + {lat: 44.8929, lng: 4.882}, + {lat: 44.8929, lng: 4.883}, + {lat: 44.8929, lng: 4.884}, + {lat: 44.8925, lng: 4.884}, + {lat: 44.892, lng: 4.884}] }, { line: 4, color: '#CCCCCC', points: [ - { lat: 44.897, lng: 4.8813 }, - { lat: 44.896, lng: 4.8811 }, - { lat: 44.895, lng: 4.8809 }, - { lat: 44.894, lng: 4.8807 }, - { lat: 44.893, lng: 4.8807 }, - { lat: 44.893, lng: 4.8810 }, - { lat: 44.8929, lng: 4.882 }, - { lat: 44.8929, lng: 4.883 }, - { lat: 44.8929, lng: 4.884 }, - { lat: 44.8925, lng: 4.884 }, - { lat: 44.892, lng: 4.884 }] + {lat: 44.897, lng: 4.8813}, + {lat: 44.896, lng: 4.8811}, + {lat: 44.895, lng: 4.8809}, + {lat: 44.894, lng: 4.8807}, + {lat: 44.893, lng: 4.8807}, + {lat: 44.893, lng: 4.8810}, + {lat: 44.8929, lng: 4.882}, + {lat: 44.8929, lng: 4.883}, + {lat: 44.8929, lng: 4.884}, + {lat: 44.8925, lng: 4.884}, + {lat: 44.892, lng: 4.884}] } ] } @@ -607,12 +648,14 @@ export class MapComponent implements AfterViewInit { zone: IotArea = { id: 'zone1', points: [ - { lat: 44.887, lng: 4.885 }, - { lat: 44.888, lng: 4.9 }, - { lat: 44.89, lng: 4.883 } + {lat: 44.887, lng: 4.885}, + {lat: 44.888, lng: 4.9}, + {lat: 44.89, lng: 4.883} ] } + currentBearing = 0 + ngAfterViewInit (): void { this.conf.setConfig({ markerTemplates: { @@ -629,9 +672,13 @@ export class MapComponent implements AfterViewInit { } }, map: { + defaultLat: 45.755020, + defaultLng: 4.832584, + defaultZoomLevel: 16, externalClustering: true, layerControl: true, - exclusiveLayers: false + exclusiveLayers: false, + bearing: 0 }, layerTemplates: { 'etablissements': { @@ -659,25 +706,76 @@ export class MapComponent implements AfterViewInit { } }) + this.commonIotMap.onMoveStart = (e) => { + this.commonIotMap.removeOverlayImage() + } + this.commonIotMap.onMove = () => { const coord = this.commonIotMap.getIotMap().getBounds() console.log('map bounds changed: [' + coord.getNorthEast().lat + ', ' + coord.getNorthEast().lng + '] / [' + coord.getSouthWest().lat + ', ' + coord.getSouthWest().lng + ']') - } - this.commonIotMap.onEltClick = (id) => { - console.log('click on ' + id + ' !') + const currentZoom = this.commonIotMap.getIotMap().getZoom() + if (currentZoom >= 18) { + // rotate map + const bearing = 65 + this.commonIotMap.displayOverlayImage( + '../assets/plan.png', + bearing, + new L2.Point(this.gailleton[2].location.lat, this.gailleton[2].location.lng), + new L2.Point(this.gailleton[3].location.lat, this.gailleton[3].location.lng) + ) + + if (bearing !== this.currentBearing) { + let nbSteps = 0 + for (let i = 0; i * 10 < bearing; i++) { + if (i * 10 > this.currentBearing) { + setTimeout(() => { + this.commonIotMap.getIotMap().setBearing(i * 10) + }, 100 * i) + } + nbSteps = i + } + + setTimeout(() => { + this.commonIotMap.getIotMap().setBearing(bearing) + this.currentBearing = bearing + }, 100 * (nbSteps + 1)) + } + } + - setTimeout(() => { - this.iotMapMarkerManager.updateMarker(id, { popup: { title: 'Update', body: 'Popup mise à jour' } }) - }, 3000) + if (currentZoom < 18) { + // rotate map + const bearing = 0 + let nbSteps = 1 + + if (bearing !== this.currentBearing) { + this.commonIotMap.removeOverlayImage() + for (let i = 0; this.currentBearing - (i * 10) > 0; i++) { + setTimeout(() => { + this.commonIotMap.getIotMap().setBearing(this.currentBearing - (i * 10)) + }, 100 * i) + nbSteps = i + } + + setTimeout(() => { + this.commonIotMap.getIotMap().setBearing(bearing) + this.currentBearing = bearing + }, 100 * nbSteps) + } + } } + this.commonIotMap.init('iotMap') + + // this.iotMapMarkerManager.addMarker(this.demoImg) + this.iotMapMarkerManager.addMarkers(this.gailleton) + this.iotMapMarkerManager.addMarkers(this.markersList) this.iotMapClusterManager.addClusters(this.clustersList) this.iotMapUserMarkerManager.addUserMarker(this.userMarker) this.iotMapPathManager.addPath(this.chemin) - + // this.iotMapAreaManager.addArea(this.zone) } } - diff --git a/src/styles.css b/src/styles.css index 23712b10..fe2920f3 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,3 +1,12 @@ /* You can add global styles to this file, and also import other style files */ @import '~iotmapmanager/iot-map-manager.css'; @import "~boosted/dist/css/boosted.min.css"; + +@import 'assets/fonts/iotmap-icons.css'; + + + +.iotmap-imgOverlay { + transform-origin: left bottom !important; +} +