Thing in the future

Home > Developers > IoT 2D MAP


Viewing of geolocated objects and their relations on a 2D map as a result of a Thing in request.


  "settings": {...},
  "graph": {...}


Settings of the visualization

Settings of the visualization describes the appearence of the map:

  • ’’mapType’’ the type of map to display using the Google Maps. The default value is terrain. Available values are:
    • roadmap: displays the default road map view. This is the default map type.
    • satellite: displays Google Earth satellite images
    • hybrid: displays a mixture of normal and satellite views
    • terrain: displays a physical map based on terrain information.
    • blank: blank page background
    • dark : like roadmap but with a dark theme
  • ’’mapTypeControl’’ enables/disables the Map Type control that lets the user toggle between map types (such as Map and Satellite). The default is true.
  • ’’zoomControl’’ enables/disables the Zoom control. By default, this control is visible
  • ’’streetViewControl’’ enables/disables the Pegman control that lets the user activate a Street View panorama. The default value is true.
  • ’’rotateControl’’ enables/disables the appearance of a Rotate control for controlling the orientation of 45° imagery. The default value is true. The control’s presence is determined by the presence or absence of 45° imagery for the given map type at the current zoom and location. You cannot make the control appear if no 45° imagery is currently available.
  • ’’scaleControl’’ enables/disables the Scale control that provides a simple map scale. The default value is true.
  • ’’fullscreenControl’’ enables/disables the control that opens the map in fullscreen mode. The default value is true.
  • ’’infoWindowTransparency’’: infoWindow represents the panel opening on the right side of the graph for displaying additional info (object properties, search form, settings form). This panel has a black background and can have a transparency of 0.6 or not. Values are true or false. Default value is true (translucent).
  • ’’legend’’: shows or not the graph legend. Values are true or false. Default value is false.
  • ’’niceNameFields’’: you can provide a list of object properties to learn to the graph how to add a title to nodes. Object properties are evaluated from first to last. The first object property value found for an object will by used as title. If none is found, the _class property value will be used.
   "settings": {
           "api_key": "...",
           "mapType" : "hybrid",
           "streetViewControl": false,
           "legend": true,
           "niceNameFields": ["", ""]

Data for the graph

Data for the graph (nodes and links) is the raw result of a Thing’in request with the format application/ziggy-json.

Only geolocated nodes will be shown on map.

Here is an exemple of this format with two nodes and a link:

"graph":  {
"total_items": 2,
"index": 0,
"nodes": [
  "_ori": "",
  "ont_datashare_owl_created": "2017-08-02T06:44:18Z",
  "_last_updated": 1505229641979,
  "_uuid": "17ed4dd9-50e0-436d-92e3-12277da2600e",
  "orientdb_class": "projection",
  "ont_datashare_owl_lastSync": "2017-09-12T15:07:40Z",
  "ont_datashare_owl_error": "NONE",
  "_class": "",
  "ont_datashare_owl_id": 10506,
  "_ori": "",
  "ont_datashare_owl_created": "2017-08-02T06:44:18Z",
  "_last_updated": 1505229642278,
  "_uuid": "7c4fce52-bfb1-4104-bf31-9d32b720a3c1",
  "orientdb_class": "projection",
  "ont_datashare_owl_error": "NONE",
  "_class": "",
  "ont_datashare_owl_id": 3606,
  "ont_datashare_owl_key": "-",
"links": [
  "source": "7c4fce52-bfb1-4104-bf31-9d32b720a3c1",
  "target": "17ed4dd9-50e0-436d-92e3-12277da2600e",
  "value": "ont_datashare_owl_hasDevice"
"size": 500

Dialog between the host page and the iframe

The dialog between the host page and the iframe relies on HTML5 messaging system, following this workflow:

  • when the iframe is loaded, it sends a load event to the host page to fetch data.
  • the host page send the data to the iframe only once.

The iframe has a context menu to allow to reset the graph.

  • at this time, the iframe send a message to rearm the data send and reload.
  • the host page wait for the iframe message of loading and resend data.

For this you can use the following code in your host page:

<iframe id="myIframe">
   <p>Your browser does not support iframes.</p>

and script

var messageNotSent = true;
var graphData = {
  "settings": {...},
  "graph": {...}
var graphDataMessage = JSON.stringify(graphData, false);
var iframe = document.getElementById('myIframe');
iframe.addEventListener('load',function () {
   console.log('load event received');
   if (messageNotSent) {
       iframe['contentWindow'].postMessage(graphDataMessage, "*");
       messageNotSent = false;

window.addEventListener('message',function (event) {
   console.log('message received: ';
   if ( == 'rearm') messageNotSent = true;