Maps API for JavaScript Developer's Guide

Platform Data Extension

Showing Platform Data Extension Layer on the Map

HERE Maps API for JavaScript provides an easy way to overlay Platform Data Extension (PDE) thematic layers on the map. The Platform Data Extension layers can be used to enrich the map experience by providing additional data: postcodes, census data, road classes, junction views etc. More information about available thematic layers is provided by the layers Platform Data Extension REST API endpoint

The code example below shows a simple use case involving the Platform Data Extension thematic layer in which the map user can tap on the postcode data polygon centroid markers to view more information. The code:

  1. Gets an instance of the Platform Data Extensoin service.
  2. Creates Platform Data Extension provider with the 'PSTLCB_GEN' thematic layer, and polyline rendering types.
/**
 * Assuming that "map" and "platform" are already initialized
 */
 // Create default map layers:
var service = platform.getPlatformDataService();

style = new mapsjs.map.SpatialStyle();
// create tile provider and layer that displays postcode boundaries
var boundariesProvider = new mapsjs.service.extension.platformData.TileProvider(service,
{
  layer: 'PSTLCB_GEN', level: 12
}, {
  resultType: mapsjs.service.extension.platformData.TileProvider.ResultType.POLYLINE,
  styleCallback: function(data) {return style}
});
var boundaries = new mapsjs.map.layer.TileLayer(boundariesProvider);
map.addLayer(boundaries);

The example above uses the H.map.SpatialStyle with the default settings, however, the API allows you to change the style callbeck to take custom data attributes into account. The code below extends the initial steps from the previous examples by:

  1. Creating additional layer with 'PSTLCB_MP' thematic layer, that contains postcode area centroids, and setting its resultTupe to H.map.Marker.
  2. Registers a tap event listener with the tile provider responsible for the 'PSTLCB_MP' layer.
// create tile provider and layer that displays postcode area centroids
var centroidsProvider = new mapsjs.service.extension.platformData.TileProvider(service,
{
  layer: 'PSTLCB_MP', level: 12
}, {
  resultType: mapsjs.service.extension.platformData.TileProvider.ResultType.MARKER
});
var centroids = new mapsjs.map.layer.MarkerTileLayer(centroidsProvider);
map.addLayer(centroids);

// add events listener, that outputs data provided by the Platform Data Extenstion and
// associated with the H.map.Marker
centroidsProvider.addEventListener('tap', function(ev) {
  var markerData = ev.target.getData();
  console.log(markerData.getCell('POSTAL_CODE'), markerData.getCell('ISO_COUNTRY_CODE'))
});

The listener is a callback function to be invoked when the map user taps on a map (spatial) object, for example a marker. It retrieves the object from the event passed to it and outputs information associated with the object to the console.

The image below shows the observable effects of this code on the map.

Figure 1. Map with postcode areas and centroids rendered from the Platform Data Extension.