diff --git a/README.md b/README.md index f2870eec..2aef43dc 100644 --- a/README.md +++ b/README.md @@ -64,6 +64,10 @@ Automatic clustering (engined by Leaflet) can be used to manage up to 100 000 ma +Areas to display areas, defined by a list of **points**, bordered by a **color**ed line, and filled with **fillColor** and **fillOpacity** percent. + + + ## Quick start Several quick start options are available: diff --git a/doc/areas.png b/doc/areas.png new file mode 100644 index 00000000..bee286b2 Binary files /dev/null and b/doc/areas.png differ diff --git a/package-lock.json b/package-lock.json index 401eccde..756ea7a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10095,9 +10095,9 @@ } }, "iotmapmanager": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/iotmapmanager/-/iotmapmanager-2.2.1.tgz", - "integrity": "sha512-oWL5PBksUFn06JMRsI6YGH8nmxWY+Uo2SdZSL21SORSRzGLfL0gX62gZlcG0YWqzXnW65y/MoLUvhe4ejt/suQ==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/iotmapmanager/-/iotmapmanager-2.3.0.tgz", + "integrity": "sha512-HPIVQGE348dkYx16KiB6vhVaduJTKLEjQCLekxAqWViZhdsmK+YmzDUBq/5h6wH+5Dd0riw2vjPJzXRynWOv8g==", "requires": { "@types/leaflet": "^1.5.19", "@types/leaflet.markercluster": "^1.4.3", diff --git a/package.json b/package.json index f0a16a2d..5dc90157 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "@types/leaflet": "^1.5.19", "@types/leaflet.markercluster": "^1.4.3", "boosted": "^4.6.0", - "iotmapmanager": "^2.2.1", + "iotmapmanager": "^2.3.0", "leaflet": "^1.6.0", "leaflet.markercluster": "^1.4.1", "zone.js": "^0.11.3" diff --git a/src/iotMapManager/package.json b/src/iotMapManager/package.json index 311bf732..cfa3954e 100644 --- a/src/iotMapManager/package.json +++ b/src/iotMapManager/package.json @@ -1,6 +1,6 @@ { "name": "iotmapmanager", - "version": "2.2.1", + "version": "2.3.0", "description": "Manage markers, clusters, user marker or paths on IotMaps", "main": "dist/index.js", "types": "lib/index.d.ts", diff --git a/src/iotMapManager/readme.md b/src/iotMapManager/readme.md index 06df1203..d223090d 100644 --- a/src/iotMapManager/readme.md +++ b/src/iotMapManager/readme.md @@ -6,18 +6,20 @@ In your project file (except IotMapManager and IotMapConf, all are optionnal): ``` import { - IotMapManager, - IotCluster, - IotMarker, - IotUserMarker, - IotPath, - ShapeType, - IotMapConfig, - TabType, - IotMapMarkerManager, - IotMapClusterManager, - IotMapUserMarkerManager, - IotMapPathManager + IotMapManager, + IotCluster, + IotMarker, + IotUserMarker, + IotPath, + IotArea, + ShapeType, + IotMapConfig, + TabType, + IotMapMarkerManager, + IotMapClusterManager, + IotMapUserMarkerManager, + IotMapPathManager, + IotMapAreaManager } from 'iotmapmanager' ``` @@ -39,6 +41,8 @@ In your css file: @import 'iotmapmanager/iotMapManager.css'; ``` +If your use TypeScript, all types are defined in lib/index.d.ts + ## marker definition A marker is defined as follow: @@ -158,7 +162,28 @@ Param | type | optionnal | Comment ----- | ---- | --------- | ------- points | [Location](#location) array | no | array of geographical points defining the path color | string | yes | color of the path -line | number (1..4) | no | define the place of the sub path (1 is completely to the left, 4 is completely to the right) +line | number (1..4) | no | define the place of the sub path (1 is full left, 4 is full right) + + +## area definition +``` +{ + id: string + points: Location[] + color?: string + fillColor?: string + fillOpacity?: number +} +``` + +Param | type | optionnal | Comment +----- | ---- | --------- | ------- +id | string | no | used for update and remove +points | [Location](#location) array | no | array of geographical points defining the area. Last and first are link, no need to duplicate +color | string | yes | border color of the area +fillColor | string | yes | interior color of the area +fillOpacity | string | yes | interior color opacity of the area + ## enums @@ -268,7 +293,6 @@ Editable values : * bullet (optionnal) is the bullet displayed before the name status in cluster popups (html code) * url (optionnal): if defined, in the cluster popup the name becomes an hyperlink with 'url' as href * urlTarget specifies where to open the linked document or page ('_blank', '_self', '_parent', '_top', framename) - * markerTemplate: agregates all display parameters (colors, shape, icon...) * for each template (defined by a name as string): @@ -277,14 +301,38 @@ Editable values : * tab (optionnal) is a little white rectangle displayed above the marker. It contains few characters or icon (see [Tab](#Tab)) * shape (optionnal): all information relative to marker shape (see [shape](#Shape)) * inner (optionnal) : all information relative to marker inner (see [Inner](#Inner)) - + +* accuracyCircle: default parameters for accuracy area + * layerName: name displayed in layers control list + * color: default border color for accuracy circles + * fillColor: default fill color for accuracy circles + * fillOpacity: interior color opacity for accuracy circles + * layerTemplate: parameters that can be applied to a layer * for each template (defined by a name as string): * content (optionnal): the html code to display in cluster tab (can be img, text...) * type (optionnal): the type used for cluster tab (see ) * popupColNumber (optionnal): number of columns to display in cluster popup + +* clusters + * defaultColor: color used if marker has no status, then no status color - +* userMarker + * layerName: name displayed in layers control list + +* path + * layerName: name displayed in layers control list + * color: default path color + * width: path width in px + +* area + * layerName: name displayed in layers control list + * color: default border color for areas + * fillColor: default fill color for areas + * fillOpacity: interior color opacity for areas + + + Marker data are applied first, - then default values if needed, - then template if one, @@ -327,7 +375,7 @@ This class manages manual clusters: IotMapClusterManager requires a configuration object and an IotMapManager -## IotMapUserMarkerManager +### IotMapUserMarkerManager This class manages user marker: (!! only one user marker at a time) - addUserMarker: adds the userMarker to the map - removeUserMarker: removes the userMarker from the map @@ -336,9 +384,15 @@ This class manages user marker: (!! only one user marker at a time) IotMapUserMarkerManager requires a configuration object and an IotMapManager -## IotMapPathManager +### IotMapPathManager This class manages paths: - addPath/ addPaths: adds a (list of) path(s) to the map - removePath / removePaths: removes a (list of) path(s) from the map IotMapPathManager requires a configuration object and an IotMapManager + + +### IotMapAreaManager +This class manages areas: + + diff --git a/src/iotMapManager/src/iot-map-config.ts b/src/iotMapManager/src/iot-map-config.ts index 9efa52ed..795946e7 100644 --- a/src/iotMapManager/src/iot-map-config.ts +++ b/src/iotMapManager/src/iot-map-config.ts @@ -477,6 +477,9 @@ export class IotMapConfig { *** ACCURACY CIRCLE */ if (newConfig.accuracyCircle !== undefined) { + if (newConfig.accuracyCircle.layerName !== undefined) { + this.accuracyCircle.layerName = newConfig.accuracyCircle.layerName + } if (newConfig.accuracyCircle.color !== undefined) { this.accuracyCircle.color = newConfig.accuracyCircle.color } diff --git a/src/iotMapManager/src/iot-map-manager.ts b/src/iotMapManager/src/iot-map-manager.ts index c9f77893..3574947a 100644 --- a/src/iotMapManager/src/iot-map-manager.ts +++ b/src/iotMapManager/src/iot-map-manager.ts @@ -30,7 +30,7 @@ export class IotMapManager { private layerControl: L.Control private firstLayerAdded = true - private accuracyDisplayed = false + private accuracyDisplayed = true private currentDisplayedLayers: string[] = [] /** @@ -108,10 +108,7 @@ export class IotMapManager { // add layer to map if (layerName === this.config.accuracyCircle.layerName) { this.markersLayers[layerName] = layer // always not exclusive - if (!this.config.map.exclusiveLayers) { - this.map.addLayer(layer) - this.currentDisplayedLayers.push(layerName) - } + this.map.addLayer(layer) } else if (this.config.map.layerControl && this.config.map.exclusiveLayers) { this.baseLayers[layerName] = layer if (this.firstLayerAdded) { @@ -130,6 +127,7 @@ export class IotMapManager { this.layerControl = L.control.layers(this.baseLayers, this.markersLayers).addTo(this.map) } + this.updateAccuracy() return layer } diff --git a/src/iotMapManager/src/iot-map-marker.ts b/src/iotMapManager/src/iot-map-marker.ts index d62fcc88..66eb82a8 100644 --- a/src/iotMapManager/src/iot-map-marker.ts +++ b/src/iotMapManager/src/iot-map-marker.ts @@ -26,7 +26,7 @@ export class IotMapMarker extends IotMapDisplay { private config: IotMapConfig private map: IotMapManager private selected = false - private layerDisplayed = true + private layerDisplayed = false private accuracityDisplayed = true private accuracyCircle: L.Circle diff --git a/src/iotMapManager/src/iot-map-user-marker.ts b/src/iotMapManager/src/iot-map-user-marker.ts index 6a3182af..b2e90d17 100644 --- a/src/iotMapManager/src/iot-map-user-marker.ts +++ b/src/iotMapManager/src/iot-map-user-marker.ts @@ -24,6 +24,9 @@ export class IotMapUserMarker extends IotMapDisplay { private map: IotMapManager private accuracyCircle: L.Circle + private layerDisplayed = false + private accuracityDisplayed = true + constructor (userMarker: IotUserMarker, map: IotMapManager, config: IotMapConfig) { super(userMarker.location, { icon: getUserMarkerIcon(userMarker, config), interactive: false }) // not clickable @@ -66,8 +69,10 @@ export class IotMapUserMarker extends IotMapDisplay { } public updateAccuracyDisplay (selectedLayers: string[], display: boolean): void { - if (selectedLayers.includes(this.config.userMarker.layerName)) { - if (display === true) { + this.layerDisplayed = selectedLayers.includes(this.config.userMarker.layerName) + this.accuracityDisplayed = display + if (this.layerDisplayed) { + if (this.accuracityDisplayed) { this.displayAccuracy() } else { this.removeAccuracy() @@ -79,15 +84,17 @@ export class IotMapUserMarker extends IotMapDisplay { private displayAccuracy (): void { this.removeAccuracy() - if (this.data.accuracy !== undefined) { - this.accuracyCircle = L.circle(this.data.location, { - color: this.config.accuracyCircle.color, - fillColor: this.config.accuracyCircle.fillColor, - fillOpacity: this.config.accuracyCircle.fillOpacity, - radius: this.data.accuracy, - interactive: false // not clickable - }) - this.map.getLayer(this.config.accuracyCircle.layerName).addLayer(this.accuracyCircle) + if (this.layerDisplayed && this.accuracityDisplayed) { + if (this.data.accuracy !== undefined) { + this.accuracyCircle = L.circle(this.data.location, { + color: this.config.accuracyCircle.color, + fillColor: this.config.accuracyCircle.fillColor, + fillOpacity: this.config.accuracyCircle.fillOpacity, + radius: this.data.accuracy, + interactive: false // not clickable + }) + this.map.getLayer(this.config.accuracyCircle.layerName).addLayer(this.accuracyCircle) + } } } diff --git a/src/map/map.component.ts b/src/map/map.component.ts index fbb80df4..a831ebe4 100644 --- a/src/map/map.component.ts +++ b/src/map/map.component.ts @@ -6,15 +6,18 @@ import { IotMarker, IotUserMarker, IotPath, + IotArea, ShapeType, IotMapConfig, TabType, IotMapMarkerManager, IotMapClusterManager, IotMapUserMarkerManager, - IotMapPathManager + IotMapPathManager, + IotMapAreaManager } from 'iotmapmanager' + @Component({ selector: 'map-component', templateUrl: './map.component.html', @@ -28,6 +31,7 @@ export class MapComponent implements AfterViewInit { iotMapClusterManager: IotMapClusterManager = new IotMapClusterManager(this.commonIotMap, this.conf) iotMapUserMarkerManager: IotMapUserMarkerManager = new IotMapUserMarkerManager(this.commonIotMap, this.conf) iotMapPathManager: IotMapPathManager = new IotMapPathManager(this.commonIotMap, this.conf) + iotMapAreaManager: IotMapAreaManager = new IotMapAreaManager(this.commonIotMap, this.conf) title = 'IotMap'; markersList: IotMarker[] = [ @@ -525,6 +529,15 @@ 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 } + ] + } + ngAfterViewInit (): void { this.conf.setConfig({ markerTemplates: { @@ -542,8 +555,8 @@ export class MapComponent implements AfterViewInit { }, map: { externalClustering: true, - layerControl: true, - exclusiveLayers: false + layerControl: false, + exclusiveLayers: true }, layerTemplates: { 'etablissements': { @@ -580,10 +593,13 @@ export class MapComponent implements AfterViewInit { this.iotMapClusterManager.addClusters(this.clustersList) this.iotMapUserMarkerManager.addUserMarker(this.userMarker) this.iotMapPathManager.addPath(this.chemin) + + this.iotMapAreaManager.addArea(this.zone) + setTimeout(() => { this.iotMapClusterManager.updateCluster('entertainments', { layer: 'meters' }) }, 3000) setTimeout(() => { this.iotMapClusterManager.updateCluster('services', { layer: 'autos' }) }, 3000) - setTimeout(() => { this.iotMapMarkerManager.updateMarker('s1', { shape: { accuracy: 600 } }) }, 3000) + setTimeout(() => { this.iotMapMarkerManager.updateMarker('s1', { shape: { accuracy: 600 } }) }, 5000) // setTimeout(() => { this.iotMapMarkerManager.removeMarker('s1')}, 5000) setTimeout(() => { this.iotMapMarkerManager.updateMarker('s5', { shape: { accuracy: undefined } }) }, 5000) }