Geovisualization Developer's Guide

Visualizing your Data

In this chapter, you will define the HTML and JavaScript code for the visualization of proportional markers on the map. The code will make one request to the Geovisualization REST API for each tile in the viewport, so that the app receives the geographical data points only for the visible tiles. With this data, you create a marker on the map for each data point, using data-driven styling (size, color and opacity) to represent each earthquake's magnitude and depth.

Define the HTML Code

Create an index.html file and add the following HTML to set up the JavaScript, CSS and page structure you will need, also create a map.js file in the same directory.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="initial-scale=1.0, width=device-width"/>
  <meta charset="utf-8"/>
  <style>
  body {
  margin: 0;
  padding: 0;
  }

  #map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  }
  </style>
  <title>Data Lens</title>
</head>
<body>
  <div id="map"></div> 
      <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-core.js"></script>
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-service.js"></script>
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.js"></script>
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-clustering.js"></script>
  <script type="text/javascript" src="https://js.cit.datalens.api.here.com/2.6.1/mapsjs-datalens.js"></script>  
  <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
  <script src="./map.js"></script>
</body>
</html>     

Define the JavaScript Code

This example will not show all the JavaScript code, only the parts most relevant to using Geovisualization. You can find the full JavaScript code here and if you are new to HERE, you should read the Maps API for JavaScriptdocumentation.

Create an instance of a provider class (H.datalens.QueryTileProvider) to request the data for the tiles visible in the viewport. In its constructor, you use an instance of a service class (H.datalens.Service) that defines the communication with the Geovisualization REST API. Finally, bind the query to the provider.

...
const service = platform.configure(new H.datalens.Service());

const provider = new H.datalens.QueryTileProvider(
  service,
  {
    queryId: query.id,
    tileParamNames: {x: 'x', y: 'y', z: 'z'}
  }
);
...

To draw the proportional markers, first instantiate a map layer (H.datalens.ObjectLayer). Then, create an SVG circle for each marker, whose style is defined by the following functions:

  • The marker's size (size) is a function of the magnitude of the earthquake. The greater the magnitude of the earthquake, the larger the size of the marker.
  • The marker's color (fill) is a function of the depth of the earthquake epicenter. The deeper the epicenter, the darker the blue of the marker.
  • The marker's transparency (fillOpacity) is also a function of the earthquake's depth. The deeper the epicenter, the greater the transparency of the marker.

The following code illustrates the above:

...
const layer = new H.datalens.ObjectLayer(
  provider,
  {
    rowToMapObject: (row) => new H.map.Marker({
      lat: row.lat, lng: row.lon
    }),
    rowToStyle: (row, zoom) => {
      let size = magnitudeScale(row.magnitude) *
        zoom *
        window.devicePixelRatio;
      let icon = H.datalens.ObjectLayer.createIcon([
        'svg',
        {
          viewBox: [-size, -size, 2 * size + 2, 2 * size + 2]
        },
        ['path', {
          d: d3.arc()({ //fill
            startAngle: 0,
            endAngle: 360,
            outerRadius: size
          }),
          fill: depthScale(row.depth),
          fillOpacity: alphaScale(row.depth),
          stroke: 'rgba(227,232,235,0.5)',
          strokeWidth: 1.5 * pixelRatio
        }]
      ], {size: size});
      return {icon: icon};
    },
    dataDomains: {
      magnitude: magnitudeScale.ticks(10),
      depth: depthScale.ticks(10)
    }
  }
);
...

Finally, to render the markers, add the layer to the map:

...
map.addLayer(layer);
Load index.html in your browser to see the final rendered visualization.

The Result

Figure 1. Earthquake Visualization
Note: For a full guide to the Geovisualization JavaScript API, see Creating Visualizations. For the full JavaScript API reference, see JavaScript API.