Maps API for JavaScript Developer's Guide

Custom Location Extension

Showing Custom Location Extension Layer on the Map

HERE Maps API for JavaScript provides an easy way to overlay Custom Location Extension (CLE) layers on the map. The Custom Location Extension layers are used to bring user provided geospatial data to the map. More information about managing CLE layers could be found in Custom Location Extension REST API ducumentation.

The code example below shows a simple use case involving the Custom Location Extension layer in which the map user can tap on the building footprint polygons to view information about the area of the building. Layer's data in the example is assumed to be uploaded to the service via REST API or administration panel. The layer_id is determined at upload time. The code:

  1. Gets an instance of the Custom Location Extensoin service.
  2. Creates Custom Location Extensoin provider with the 'SEATTLE' layer, and a polygon rendering types.
  3. Registers a tap event listener with the tile provider responsible for the 'SEATTLE' layer.
/**
 * Assuming that "map" and "platform" are already initialized, and
 * CLE data layer was uploaded to the service.
 */
 // Create default map layers:
var service = platform.getCustomLocationService();

// create tile provider and layer that displays CLE layer
var provider = new mapsjs.service.extension.customLocation.TileProvider(service, {
  layerId: 'SEATTLE_14'
}, {
  resultType: mapsjs.service.extension.TileProvider.ResultType.POLYGON, 
  min: 15
});

var layer = new mapsjs.map.layer.TileLayer(provider);
map.addLayer(layer);

map.addEventListener('tap', function(ev) {
  var row;
  if (ev.target !== map) {
  row = ev.target.getData();
  console.log('SHAPE_AREA: ', row.getCell('SHAPE_AREA'));
  }
});

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:

The listener is a callback function to be invoked when the map user taps on a map (spatial) object, for example a polygon. 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 the building footpints rendered from the Custom Location Extension.

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.