*** Version 2.3.0 ***

README.md

@@ -64,6 +64,10 @@ Automatic clustering (engined by Leaflet) can be used to manage up to 100 000 ma
 
 <img src="doc/paths.png">
 
+<ins>Areas</ins> to display areas, defined by a list of **points**, bordered by a **color**ed line, and filled with **fillColor** and **fillOpacity** percent.
+
+<img src="doc/areas.png">
+
 ## Quick start
 
 Several quick start options are available:

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"

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",

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:
+
+

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
       }

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
   }
 

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

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)
+      }
     }
   }
 

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)
   }