Data Lens Developer's Guide

The JavaScript Code

The following is the full JavaScript code that we use in this visualization. If you want, you can copy and paste the code and use it in your own project, following the descriptions in the previous chapter.

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


  //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(
    mapHolder,
    platform.getMapTileService({
      type: 'base'
    }).createTileLayer(
      'maptile',
      'reduced.day',
      256 * pixelRatio, // bigger tile size for retina
      'png'
    ), {
      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(
    service,
    {
      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])
      .range(COLORS);

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

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

  //put layer on the map
  map.addLayer(layer);

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.