Geovisualization Developer's Guide

Setting Up Your App

How you set up and structure your Geovisualization apps is dependent on its nature. This guide shows you our recommended 'best practice' development process, possible file structure and explains the role of each file.

Fastpath: We recommend that you study the Geovisualization code examples. These include all the code you need, which you can copy and use as the basis for your own apps.

Steps Required

You use the Geovisualization REST API to set up your datasets and queries and we recommend Postman (see Using Postman), but you can use any similar tool.

To create an app, or modify an existing one, use the following steps as a guideline:

  1. Upload your data with the Geovisualization REST API (see Managing your Data) and get a dataset ID.
  2. Define a query on your dataset with the Geovisualization REST API query language (see Define Query). You can use sample query definitions as guidance found in the Geovisualization code examples. We recommend you store your query definition(s) in a file (for example, query.json) in your app file structure.
  3. POST your query JSON code to the Geovisualization 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).

File Structure

There are a number of files recommended for a Geovisualization application, none are required, but will help you organize the structure and function of your application.

[root]
|
|----- [src]
|    |
|    |----- index.css
|    |----- index.js
|
|----- index.html
|----- query.json
  1. An index.html file, in which you define the map container and include the libraries required by Geovisualization: HERE Maps API for JavaScript and Geovisualization JavaScript API. You can also include third party libraries (such as d3.js).
  2. 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.
  3. An index.css file, in which you define the styles for the map container.
  4. Your app references the query by its ID in index.js, but a query.json file that contains the query definition is useful to include for easy access and modification of the query code.
Note: All the examples in our documentation and code examples also add a dist folder that contains minimized versions of the JavaScript and CSS. Some also add two ui files that we use for creating UIs in our examples. Feel free to explore and reuse any that suit your use case.