Skip to content

Geo & Time

This category includes widgets related to location, date and time.

Leaflet maps

Leaflet maps widget has rich and versatile features for displaying various information on maps. It also has selection and interaction features. It is based on Leaflet library and its various plugins.

When a new Leaflet maps widget is added to the dashboard, only one actuator named geoJSON1 is available in the "Data connection" tab. But this widget allows up to 5 types of display layers, according to the value of the associated parameter numberOfLayers. This parameter can be set in the "Graphical properties" tab as shown in the following picture:

leaflet-maps-graphical-properties

Depending on the parametrization, new actuators may appear in "Data connection" tab and offer :

  • 0 to 8 possible layers of GeoJSON objects. Writing GeoJSON objects is described here.
  • 0 to 8 possible layers of heatMap objects
  • 0 to 8 possible layers of lineHeatMap objects
  • 0 to 8 possible layer of imageOverlay objects
  • 0 to 8 possible layer of svgOverlay objects

In addition to these pure display layers, selection controls can be activated by enabling the drawingFeatures option. Regions of the map can thus be selected using the mouse. When this option is enabled, the selectedGeoJson actuator receives user selection as geoJson, and needs to be connected to a variable-type dataNode.

Enabling the drawingFeatures option enables the drawingFeaturesOptions parameters set which manages selection options (point, line, polygone, rectangle).

Other parameters :

  • offlineSupport : displays controls on the maps that allow to store tiles for the current displayed geographic area. Useful when using the map offline (i.e. with no Internet connection)
  • tileServer : currently there is support for MapboxStreets and HereHybridDay

geoJson layers

geoJson1 to geoJson8 inputs expect a geoJson object. Basic examples are shown below.

Point

Single point on a single layer of the map

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          2.295,
          48.8738
        ]
      },
      "properties": {
        "html": "See <a href=\"https://en.wikipedia.org/wiki/Place_Charles_de_Gaulle\" target=\"_blank\">Place Charles de Gaulle</a>",
        "awesomeMarker": {
          "icon": "glyphicon-asterisk",
          "prefix": "glyphicon",
          "markerColor": "red"
        }
      }
    }
  ],
  "properties": {
    "description": "Arc de triomphe"
  }
}

which will be displayed as :

osm-geojson-point

Properties field of each feature allows to configure it. It comprises the following items :

  • html : allows to write html call to be rendered inside the popup.
  • awesomeMarker : JSON configuration object for the Leaflet.awesome-markers library, allowing colorful iconic & retina-proof markers for Leaflet, based on the Glyphicons / Font-Awesome icons.
Property Description Default Value Possible values
icon Name of the icon 'home' See glyphicons or font-awesome
prefix Select the icon library 'glyphicon' 'fa' for font-awesome or 'glyphicon' for bootstrap 3
markerColor Color of the marker 'blue' 'red', 'darkred', 'orange', 'green', 'darkgreen', 'blue', 'purple', 'darkpurple', 'cadetblue'
iconColor Color of the icon 'white' 'white', 'black' or css code (hex, rgba etc)
spin Make the icon spin false true or false. Font-awesome required
extraClasses Additional classes in the created tag '' 'fa-rotate90 myclass' eller other custom configuration

Examples :

Line

Single line on a single layer of the map

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            2.295,
            48.8738
          ],
          [
            2.321125,
            48.865487
          ]
        ]
      },
      "properties": {
        "style": {
          "color": "#FF0000",
          "weight": 4,
          "opacity": 1
        }
      }
    }
  ],
  "properties": {
    "description": "<span style=\"color: #FF0000\">Champs-Élysées</span>"
  }
}

which will be displayed as :

osm-geojson-line

Examples :

Polygon

A polygon on a single layer of the map

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              2.300815,
              48.871943
            ],
            [
              2.30158,
              48.864638
            ],
            [
              2.310094,
              48.868996
            ]
          ]
        ]
      },
      "properties": {
        "style": {
          "color": "#01DF01",
          "weight": 4,
          "opacity": 0.9,
          "fillColor": "#01DF01",
          "fillOpacity": 0.4
        }
      }
    }
  ],
  "properties": {
    "description": "<span style=\"color: #01DF01\">Triangle d'or</span>"
  }
}

which will be displayed as :

osm-geojson-polygon

Example :

See also : Using GeoJSON with Leaflet

heatMap layers

heatMap1 to heatMap8 inputs expect a JSON object like the following one :

{
  "data" : [
    {
    "lat": 44.78857833333333,
    "lng": 0.20539333333333332,
    "H2O": 58.0183
    },
    {
    "lat": 44.78858,
    "lng": 0.20539333333333332,
    "H2O": 58.0187
    }
  ],
  "config": {
    "opacity": 0.5,
    "radius": 1,
    "disableAutoscale": false,
    "min": 0,
    "max": 100
  }
}

When min and/or max config parameters are not specified, they are automatically computed from the data set.

Example of display (for a larger data set) :

osm-heatmap

Example :

Several parameters control the display of the heatmap, in particular :

  • sampledDisplay : allows to feed the map in real-time with instantaneous measures (single heatmap point). The config of the first point will be used. See corresponding example : osm-heatmap-play.xprjson

lineHeatMap layers

lineHeatMap1 to lineHeatMap8 inputs expect a JSON object like the following one :

{
  "data": [
    {
      "coordinates": [
        [
          4.84112,
          45.74968
        ],
        [
          4.84091,
          45.74981
        ]
      ],
      "CO2": 6
    },
    {
      "coordinates": [
        [
          4.84138,
          45.74953
        ],
        [
          4.84112,
          45.74968
        ]
      ],
      "CO2": 10
    }
  ],
  "config": {
    "opacity": 0.9,
    "weight": 4,
    "disableAutoscale": false,
    "min": 0,
    "max": 10
  }
}

When min and/or max config parameters are not specified, they are automatically computed from the data set.

Example of display (for a larger data set) :

osm-lineheatmap

Example :

imageOverlay layers

imageOverlay1 to imageOverlay8 inputs expect a geoJson object like the following one :

{
    "imageUrl" = "http://www.fondation-tuck.fr/upload/docs/image/jpeg/2015-01/logo-ifpen.jpg";
    "imageBounds" = [
        [48.874875, 2.171738],
        [48.877923, 2.179484]
    ];
    "title" = "IFPEN location";
    "addAs" = "overlay"; // overlay or baseLayer
}

As shown in the code snippet above, the addAs parameter may take two values: overlay which adds a checkbox control, or baseLayer which adds a radio button control.

Example :

svgOverlay layers

svgOverlay1 to svgOverlay8 inputs expect a JSON object like the following one :

{
  "data": 
  [
    {
      "lat": 48.876684999999995,
      "lng": 2.175765,
      "rotation": 255
    },
    {
      "lat": 48.876684999999995,
      "lng": 2.175765,
      "rotation": 256
    }
  ],
  "config": {
    "marker": "arrow",
    "title": "Wind direction",
    "opacity": 0.5,
    "length": 9.3,
    "disableAutoscale": false,
    "addAs": "overlay" // overlay or baseLayer
  }
}

Example of display (for a larger data set) :

osm-svg-layer-view

Example :

Drawing features

It is possible to allow the user to manually select points, lines, rectangles or polygone regions in the map. This is possible by enable the drawingFeatures option.

osm-drawing-features

Selection result will be written to the selectedGeoJson actuator.

Example :

Address autocompletion

This widget uses the here geocoder autocomplete API to provide suggestion as the user types an address location.

The parameter countryIsoCodes restricts the provided suggestions to the specifed country.

Simple calendar

Use the Simple calendar widget to select a date.

calendar

Example :

Simple clock

Use the Simple clock widget to select a time.

clock

Example :