IotMapManager V2.0.0

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

use

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

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

and instanciate 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/iotMapManager.css'; 

marker definition

A marker is defined as follow:

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

manual clusters definition

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

Aggregation :

user marker definition

{
    location: Location
    direction?: number
    accuracy?: number
}

path definition

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

additional path :

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
 accuracy?: number
}

Inner

interface Inner {
  color?: string

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

Configuration

Default values are set for configuration. You must instanciate 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 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 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 (optionnal): you can sort your markers in different layers. A tool allow you to display specific layers (see configuration)
    • popup (optionnal) is a string displayed in a popup when marker is clicked. (see Popup)
    • tab (optionnal) is a little white rectangle displayed above the marker. It contains few characters or icon (see Tab)
    • shape (optionnal): all information relative to marker shape (see shape)
    • inner(optionnal) : all information relative to marker inner (see Inner)

• markerTemplate: agregates all display parameters (colors, shape, icon...)

  • for each template (defined by a name as string):
    • layer (optionnal): you can sort your markers in different layers. A tool allow you to display specific layers (see configuration)
    • popup (optionnal) is a string displayed in a popup when marker is clicked. (see Popup)
    • tab (optionnal) is a little white rectangle displayed above the marker. It contains few characters or icon (see Tab)
    • shape (optionnal): all information relative to marker shape (see shape)
    • inner(optionnal) : all information relative to marker inner (see Inner)

Marker data are applied first,

• then default values if needed,
• then template if one,
• then status if one

Managers

IotMapManager

This class manager the map and every relying to the map:

• layers and there 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