Data Lens Developer's Guide

Setting Up Your App

How you set up and structure your Data Lens apps is dependent on the nature of your visualization, but also a matter of personal preference. To guide you in 'best practice' usage of Data Lens, this topic describes a typical development process and possible file structure and explains the role of each file.

Fastpath: We recommend that you study the Data Lens code examples. These include all the code needed to create the visualizations, which you can copy and use as the basis for your own apps.

For communicating with the Data Lens REST API, we recommend the Chrome plugin Postman (see Using Postman), but you can use any similar tool.

To create a visualization app, or modify an existing one, use the following tasks as guidelines:

  1. Upload your data with the Data Lens REST API (see Managing your Data) and get the dataset ID.
  2. Define a query on your dataset with the Data Lens REST API query language (see Define Query). You can use sample query definitions as guidance; these can be found in the Data Lens code examples. It is convenient, but not necessary, to store your query definition in a file (for example, query.json) in your app file structure.
  3. POST your query JSON code to the Data Lens REST API (see Creating a Query) and get the query ID.
  4. Publish your query to make your visualization publicly accessible (see Publishing a Query).
  5. Create an index.html file, in which you define the map container and include the libraries required by Data Lens: HERE Maps API for JavaScript and Data Lens JavaScript API. You can also include third party libraries (such as d3.js) in your apps.
  6. Create an index.js file, in which you define the main logic of the visualization. The query ID and the dataset ID are included in this file.
  7. Create an index.css file, in which you define the styles for the map container.
  8. Create a ui.js file, in which you define the logic of the map legend's user interface.
  9. Create a ui.css file, in which you define the styles for the map legend's user interface.

A typical file structure for a Data Lens app is the following:

    [root]
    |
    |----- [dist]
    |      |
    |      |----- index.css
    |      |----- index.js
    |      |----- ui.css
    |      |----- ui.js
    |
    |----- index.html
    |----- query.json

Note that query.json (containing the query definition) is not strictly required, because your app references the query by its ID in index.js. But it is good practice to include it for easy access and modification of the query code. In addition, other files may be unnecessary depending on your app design. For example, you can omit ui.js and ui.css if you are not including a legend on your map.

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.