Data Lens Developer's Guide

Styling the Markers

In this chapter, we will define the JavaScript code for the visualization of proportional markers on the map. The code will make one request to the Data Lens 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, we 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 JavaScript code

We show the full JavaScript code in the next chapter. Here we highlight the important parts.

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

...
  var queryProvider = new H.datalens.QueryTileProvider(
    service,
    {
      queryId: TILED_QUERY,
      tileParamNames: {x: 'x', y: 'y', z: 'z'}
    }
  );
...

To draw the proportional markers, we first instantiate a map layer (H.datalens.ObjectLayer). Then, we 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:

...
  {
    ...
    rowToStyle: function(row, zoom) {
    var size = magnitudeScale(row.magnitude)
    ...
    var icon = H.datalens.ObjectLayer.createIcon([
      'svg',
      ...
      [
        ...
        fill: depthScale(row.depth),
        fillOpacity: alphaScale(row.depth),
        ...
      }]
    ], {size: size});
    return {icon: icon};
  }
...

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

...
  map.addLayer(layer);

For a developer guide to the Data Lens JavaScript API, see Creating Visualizations. For the full JavaScript API reference, see JavaScript API.

The result

The following graphic illustrates the result of our visualization:

Figure 1. Earthquake Visualization

The source code

The HERE Developer Portal offers a further set of documented examples of Data Lens visualizations, including all queries and source code. You can find these examples here:

https://developer.here.com/api-explorer/data-lens/

You cannot use this account to purchase a commercial plan on Developer Portal, as it is already associated to plans with different payment methods.

To purchase a commercial plan on Developer Portal, please register for or sign in with a different HERE Account.

Something took longer than expected.

The project should be available soon under your projects page.

Sorry, our services are not available in this region.

Something seems to have gone wrong. Please try again later.

We've detected that your account is set to Australian Dollars (AUD).
Unfortunately, we do not offer checkouts in AUD anymore.
You can continue using your current plan as normal, but to subscribe to one of our new plans,
please register for a new HERE account or contact us for billing questions on selfservesupport@here.com.