Geo-visualization Developer's Guide

The JavaScript and HTML

Create an index.html file and add the following HTML to set up the JavaScript, CSS and page structure you will need.

<!DOCTYPE html>
  <html lang="en">
      <meta name="viewport" content="initial-scale=1.0, width=device-width"/>
      <meta charset="utf-8"/>
        body {
          margin: 0;
          padding: 0;
        #map {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
      <title>Data Lens</title>
      <div id="map"></div>    
              <script type="text/javascript" src=""></script>
      <script type="text/javascript" src=""></script>
      <script type="text/javascript" src=""></script>
      <script type="text/javascript" src=""></script>
      <script type="text/javascript" src=""></script>
      <script type="text/javascript" src=""></script>      <script type="text/javascript" src=""></script>
      <script src="./map.js"></script>

Create a map.js file to hold your custom visualization code and add the following to it.

  //initialize the platform
  var platform = new H.service.Platform({
    app_id: '<your_app_id>',
    app_code: '<your_app_code>',
    useCIT: true,
    useHTTPS: true

  //instantiate datalens service
  var service = platform.configure(new H.datalens.Service());

  var COLORS = ['#41B1EC', '#1d8ede', '#2474cc'];

  var pixelRatio = devicePixelRatio > 1 ? 2 : 1;

  var mapHolder = document.getElementById('map');

  //instantiate (and display) a map
  var map = new H.Map(
      type: 'base'
      256 * pixelRatio, // bigger tile size for retina
    ), {
      center:  new H.geo.Point(29, -95),
      zoom: 4,
      style: 'default',
      pixelRatio: pixelRatio

  var mapEvents = new H.mapevents.MapEvents(map);
  new H.mapevents.Behavior(mapEvents);

  //initialize datalens Query tile provider
  var TILED_QUERY = '4a91cf4a8cfe4e27956b2ea52259308e';
  var provider = new H.datalens.QueryTileProvider(
      queryId: TILED_QUERY,
      tileParamNames: {x: 'x', y: 'y', z: 'z'}

  //d3 scales
  var magnitudeScale = d3.scaleLinear()
      .domain([0,  10]) //magnitude
      .range([1, 20]); //radius

  var depthScale = d3.scaleLinear()
      .domain([0, 10, 15])

  var alphaScale = d3.scaleLinear()
      .domain([0, 30])
      .range([0.9, 0.1]);

  //create a layer
  var layer = new H.datalens.ObjectLayer(
      //accepts data row and returns map object
      rowToMapObject: function(row) {
        return new
          {lat:, lng: row.lon}
      //accepts data row and returns style options
      rowToStyle: function(row, zoom) {
        var size = magnitudeScale(row.magnitude) *
          zoom *
        //Icon takes path and fit it icon size
        var icon = H.datalens.ObjectLayer.createIcon([
            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)

  //put layer on the map

Load index.html in your browser to see the final rendered visualization.

For a developer guide to the Geo-visualization JavaScript API, see Creating Visualizations. For the full JavaScript API reference, see JavaScript API.

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