Embedded Map visualization

Thing’in portal provides to other projects a map visualization to embed in an iframe.
In order to use the embedded map visualization, you’ll have to provide informations:

  • settings of the visualization
  • data of the graph (nodes and links)

Contact: Alain Dechorgnat

Purpose

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

Properties

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.
json
{
...
   "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:

json
{
"graph":  {
"total_items": 2,
"index": 0,
"nodes": [
 {
  "_ori": "http://orange-labs.fr/fog/ont/datashare.owl#Device-10506",
  "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": "http://orange-labs.fr/fog/ont/datashare.owl#Lifx",
  "ont_datashare_owl_id": 10506,
 },
 {
  "_ori": "http://orange-labs.fr/fog/ont/datashare.owl#Connector-3606",
  "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": "http://orange-labs.fr/fog/ont/datashare.owl#Connector",
  "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>
</iframe>

and script

javascript
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: '+event.data);
   if (event.data == 'rearm') messageNotSent = true;
   },false);  

iframe.src="http://ziggy-por-dev.nprpaas.ddns.integ.dns-orange.fr/assets/map/index.html";