IotMapManager

This library provides management of markers dedicated to projects using mapping.

use

In your project file (except IotMapManager and IotMapConf, all are optional):

import {
  IotMapManager,
  IotCluster,
  IotMarker,
  IotUserMarker,
  IotPath,
  IotArea,
  ShapeType,
  IotMapConfig,
  TabType,
  IotMapMarkerManager,
  IotMapClusterManager,
  IotMapUserMarkerManager,
  IotMapPathManager,
  IotMapAreaManager
} from 'iotmapmanager'

and instantiate classes you need:

conf: IotMapConfig = new IotMapConfig();    // mandatory
commonIotMap: IotMapManager = new IotMapManager(this.conf) // mandatory

iotMapMarkerManager: IotMapMarkerManager = new IotMapMarkerManager(this.commonIotMap, this.conf)
iotMapClusterManager: IotMapClusterManager = new IotMapClusterManager(this.commonIotMap, this.conf)
otMapUserMarkerManager: IotMapUserMarkerManager = new IotMapUserMarkerManager(this.commonIotMap, this.conf)
iotMapPathManager: IotMapPathManager = new IotMapPathManager(this.commonIotMap, this.conf)

In your CSS file:

@import 'iotmapmanager/iot-map-manager.css';

If you use TypeScript, all types are defined in lib/index.d.ts

marker definition

A marker is defined as follows:

{
    id: string
    location: Location
    layer?: string
    popup?: Popup
    tab?: Tab
    shape?: Shape
    inner?: Inner
    template?: string
    status?: string
}

Param	Type	Optional	Comment
id	string	no	Used by update and remove functions
location	Location	non	(lat, lng) of the marker
layer	string	yes	markers can be sorted in different layers. A tool allowss you to display specific layers (see configuration)
popup	Popup	yes	a string displayed in a popup when a marker is clicked.
tab	Tab	yes	a little white rectangle displayed above the marker. It contains few characters or icon
shape	Shape	yes	all information relative to marker shape
inner	Inner	yes	all information relative to marker inner
status	string	yes	name of the status to apply (see configuration)
template	string	yes	name of the template to apply (see configuration)

manual clusters definition

{
  id: string
  location: Location
  layer?: string
  contentLabel: string
  childCount: number
  colNumber?: number
  aggregation: {
    singularState: string
    pluralState: string
    count: number
    color: string
    bullet?: string
    url?: string
    urlTarget?: string
  }[]
}

Param	Type	Optional	Comment
id	string	no	used for updateMarker/removeMarker purposes
location	Location	no	(lat, long) of the cluster
layer	string	yes	You can sort your manual clusters in different layers. A tool allowss you to display specific layers (see configuration)
contentLabel	string	no	what is clustered ? (devices, cars, buildings...)
childCount	number	no	number of clustered elements
colNumber	number	yes	number of columns displayed in a cluster popup
aggregation	array	no	containing the following info for each type of element

Aggregation :

Param	Type	Optional	Comment
singularState	string	no	used for only one element
pluralState	string	no	used for several elements
count	number	no	number of elements
color	string	no	color to display is gauge and popup
bullet	string	yes	bullet used to illustrate current state (plain circle if not specified)
url	string	yes	state name is then displayed as a hyperlink with 'url' as a href
urlTarget	string	yes	specifies where to open the linked document or page ('_blank', '_self', '_parent', '_top', framename)

user marker definition

{
    location: Location
    direction?: number (0-360)
    accuracy?: number (in meters)
}

Param	Type	Optional	Comment
location	Location	no	position of the user marker on the map
direction	number	yes	angle in degrees, clockwise
accuracy	number	yes	radius in meters of accuracy area around the user marker

path definition

{
  id: string
  color?: string
  points: Location[]
  positions?: Location[]
  additional?: {
    points: Location[]
    color: string
    line: number
  }[]
}

Param	Type	Optional	Comment
id	string	no	used for update and remove
color	string	yes	color of the path
points	Location array	no	array of geographical points defining the path
positions	Location array	yes	allow to display intermediate markers along the path
additional	array of additional path	yes	allow to display additional sub-paths along the main path

additional path :

Param	Type	Optional	Comment
points	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 full left, 4 is full right)

area definition

{
  id: string
  points: Location[]
  color?: string
  fillColor?: string
  fillOpacity?: number
}

Param	Type	Optional	Comment
id	string	no	used for update and remove
points	Location array	no	array of geographical points defining the area. Last and first are links, 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

enum ShapeType { circle, square }

enum TabType { normal, large }

enum PathIconType { start, mid, end }

Common interfaces definitions

Location

interface Location {
  lat: number
  lng: number
}

GeolocMarker

interface GeolocMarker {
  location: Location
}

Popup

interface Popup {
  title?: string
  body?: string
}

Tab

interface Tab {
  content: string
  type?: TabType
}

Shape

interface Shape {
 type?: ShapeType
 anchored?: boolean
 plain?: boolean
 color?: string
 percent?: number (0-100)
 accuracy?: number (in meters)
 direction?: number (0-360)
}

Inner

interface Inner {
  color?: string

  img?: string
  // *** OR ***
  icon?: string
  // *** OR ***
  label?: string
}

Note: the image has priority over the icon, which has priority over the label. To update a marker having an image or an icon by a label, set img or icon to null and define a label.

Configuration

Default values are set for configuration. You must instantiate a configuration for each map:

config = new IotMapConfig();

You can modify several values by calling :

IotMapConfig.setConfig(...)

Editable values :

• map:

  • defaultLat: map center latitude
  • defaultLng: map center longitude
  • defaultZoomLevel: zoom level
  • defaultLayerName: layer name if no layer is specified in marker info
  • clusterRadius: radius used to cluster markers
  • externalClustering: if true, auto clustering is deactivated. You need to calculate your own clusters
  • layerControl: if true, display a tool in the top right corner to manage layers display,
  • exclusiveLayers: if true, you can display only one layer at a time, if false, all layers can be displayed simultaneously

• markers:

  • default:
    • shape: shape used if no shape is specified in marker info
    • inner: color of the marker inner

• markerStatus:

  • for each status (defined by a name as string):
    • name:
      • singular: name used in cluster popup if there is only one element with this status
      • plural: name used in cluster popup if there are several elements with this status
    • layer (optional): you can sort your markers in different layers. A tool allows you to display specific layers (see configuration)
    • popup (optional) is a string displayed in a popup when the marker is clicked. (see Popup)
    • tab (optional) is a little white rectangle displayed above the marker. It contains few characters or icon (see Tab)
    • shape (optional): all information relative to marker shape (see shape)
    • inner (optional) : all information relative to marker inner (see Inner)
    • bullet (optional) is the bullet displayed before the name status in cluster popups (HTML code)
    • url (optional): 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):
    • layer (optional): you can sort your markers in different layers. A tool allows you to display specific layers (see configuration)
    • popup (optional) is a string displayed in a popup when the marker is clicked. (see Popup)
    • tab (optional) is a little white rectangle displayed above the marker. It contains few characters or icon (see Tab)
    • shape (optional): all information relative to marker shape (see shape)
    • inner (optional) : all information relative to marker inner (see Inner)

• accuracyCircle: default parameters for accuracy area

  • layerName: name displayed in the 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 (optional): the HTML code to display in cluster tab (can be img, text...)
    • type (optional): the type used for cluster tab (see )
    • popupColNumber (optional): 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 the layers control list

• path

  • layerName: name displayed in the layers control list
  • color: default path color
  • width: path width in px

• area

  • layerName: name displayed in the 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,
• then status if one

Managers

IotMapManager

This class manages the map and everything relying to the map:

• layers and their display tool,
• automatic or manual clustering,
• events

IotMapMarkerManager

This class manages markers:

• addMarker / addMarkers: adds a (list of) marker(s) to the map
• removeMarker / removeMarkers: removes a (list of) marker(s) from the map
• updateMarker: updates specified marker by applying partial IotMarker data
• updateAllMarkers:
  • adds non-existing markers
  • removes existing markers not present in the new list
  • updates existing markers present in the new list
• getMarker: returns the L.Marker corresponding to the specified id
• getAllMarkers: returns all L.Marker present in the map
• redrawAll: forces all markers to redraw

IotMapMarkerManager requires a configuration object and an IotMapManager

IotMapClusterManager

This class manages manual clusters:

• addCluster / addClusters: adds a (list of) cluster(s) to the map
• removeCluster / removeClusters: removes a (list of) Cluster(s) from the map
• updateCluster: updates specified Cluster by applying partial IotCluster data
• updateAllCluster:
  • adds non-existing Cluster
  • removes existing Cluster not present in the new list
  • updates existing Cluster present in the new list
• redrawAll: forces all Cluster to redraw

IotMapClusterManager requires a configuration object and an IotMapManager

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
• updateUserMarker: updates the userMarker
• getUserMarker: returns the L.Marker corresponding to the userMarker

IotMapUserMarkerManager requires a configuration object and an IotMapManager

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: