Geovisualization Developer's Guide

What is Geovisualization?

Geovisualization is a toolkit for creating data-driven visualizations on a map. You create web apps using data that you fetch using the Geovisualization REST API and that you style using the Geovisualization JavaScript API. This topic describes the components that you use to create your own apps.

Fastpath: We recommend that you study the Geovisualization code examples. These demonstrate the different technologies that Geovisualization provides and include some real-world use cases. The examples include all the code needed to create the visualizations, which you can copy and use as the basis for your own apps.

First prepare your data ...

Geovisualization consumes geographically-related data and prepares it for visualization apps. You first need to upload your raw data to your account with the Geovisualization REST API. This creates structured datasets that Geovisualization can consume. Using the specialized Geovisualization REST API query language, you then define 'queries' (JSON objects) on your datasets. A query can transform the data, such as by aggregation, filtering or sorting. In your JavaScript code, you invoke a service that calls a query, and the Geovisualization REST API returns the resulting data to your app.

... then create your visualization ...

Once the data is prepared and your query is called into your app, you employ the Geovisualization JavaScript API to create the visualization. You do this by defining layers on the base map. For example, you can create a heat map or raster map and then include data-driven markers on the same map. The layers can reflect data ranges and react to viewport zoom levels, and can also be interactive (for example, showing a popup on clicking a marker). Additionally, you can call third-party JavaScript libraries (for example, d3.js) to visualize your data in other ways, such as with bar charts or pie charts.

... or you can copy one of ours

The following is an example of a heat map, where the 'bandwidth' (a parameter that controls the distribution of density) can be explicitly controlled in the viewport. You can view and copy the full code for this example, and many others, on the HERE API Explorer.

Figure 1. Example: Heat Map showing Density Distribution, with Bandwidth Slider (click the image to go to the code example)