Display interactive map layers

Interactive Map Layer (IML) in the HERE Maps API for JavaScript provide a way to integrate dynamic, real-time, or sensitive data into your mapping application. By using IML, you can efficiently manage and visualize large datasets with various style and filtering capabilities to suit your business use case.

For example, you can dynamically style and filter datasets with geospatial data, such as locations of public amenities, real-time traffic updates, or environmental data, making it easier for users to explore and interact with geospatial information.

IMLs are stored in the HERE platform, which provides a comprehensive and interactive experience for managing and analyzing geographic data by enabling you to perform a detailed inspection of features and layers, including viewing feature details, and understanding the data size and number of features within a layer. You can also view details on rendered data currently visible, or search for specific features by ID.

📘
Although the following steps demonstrate how to render the IML in the read-only mode, you can also interact with your IML data by updating, adding, or removing records directly from your mapping application. For more information, see the HERE Data API Developer Guide.

Tutorial objectives

In this tutorial, you accomplish the following tasks:

Create an Interactive Map Layer in the HERE platform, containing publicly available geospatial data about street markets in Amsterdam.
Use the HERE Maps API for JavaScript to connect to the layer and display the street market locations as markers on a vector map.

Prerequisites

On the HERE platform, create a project and register app. For more information, see Get started.
Obtain an OAuth 2.0 token to authenticate API requests, as described in further steps. For more information, see How to authorize with OAuth 2.0.
Prepare the data to upload as part of an IML. This tutorial uses the publicly available GeoJSON data related to street markets in Amsterdam.

Create a catalog

Create a catalog that is a collection of related data layers. A catalog can contain different types of layers representing different types of stream or batch data, including geospatial data. Catalogs are identified by a unique HERE Resource Name (HRN), which the HERE platform generates automatically when you create a catalog.

You can create a catalog in the following ways:

Through the HERE platform user interface, as the following steps describe.
Through the HERE Data API call to the config service. For more information, see Create a catalog in the HERE Data API Developer Guide.

Follow these steps to create a catalog in the HERE platform user interface.

In the HERE platform, open the Launcher menu from the top navigation bar.
From the Launcher menu, select Projects Manager. The manager displays the list of your projects, as shown in the following example:
Select a project to host the catalog.
In the selected project, on the Resources tab, in the Catalogs section, click Add a catalog > Create a new catalog.
In the Add catalog dialog menu, enter and configure the new catalog details, and then click Save to confirm your settings. The HERE platform adds the catalog to the list of available resources in your project, as shown in the following example:

📘
Note
The HRN of the catalog is listed on the Overview tab, in the Catalog Info section:
Select the catalog that you just created.
On the Sharing tab, ensure that both your user ID and your platform app have at minimum Read and Write permissions within the scope of the catalog. To grant Read, Write, or Manage permissions to an entity within the HERE platform, click Share. See the following figure for reference:

Create an Interactive Map Layer

Create an IML to host the data related to specific geographic entities and features.

In the catalog that you just configured, click Add new layer.
In the Configuration dialog menu for the new layer, in the Layer Type drop-down, select Interactive Map.
Configure the mandatory layer properties, such as Layer Name, Layer ID, Layer Summary, Layer Description, and Cost Allocation Tags.

📘
Note

Note down the Layer ID property value.

In this tutorial, the sample layer uses the mandatory options only, as shown in the following figure for reference:

For more information about the mandatory and additional layer properties, see Create a layer in the Data API Developer Guide. 4. Confirm your settings by clicking Save layer.

Publish data to the layer

To publish your geospatial data to an IML, use the Interactive REST API. The following code snippet provides a sample curl request, adjusted for publishing data in the GeoJSON format:

curl -X PUT "https://interactive.data.api.platform.here.com/interactive/v1/catalogs/<CATALOG_HRN>/layers/<LAYER_ID>/features" \
     -H "Authorization: Bearer <TOKEN>" \
     -H "Accept: application/geo+json" \
     -H "Content-Type: application/geo+json" \
     -d '<GeoJSON>'

In that request:

<CATALOG_HRN> is the HERE Resource Number of the catalog that contains the layer to which you want to publish data, for example: hrn:here:data::olp-here:amsterdam-street-markets
<LAYER_ID> refers to the ID of the target layer within that catalog, for example, street-markets.
<TOKEN> is the authorization token required to authenticate the request.
<GeoJSON> refers to the actual data to be sent with the request. This should be a GeoJSON-formatted string containing the features you want to insert.

For more information, see Publish data to an interactive map layer in the Data API Developer Guide.

After you receive a 200 OK response from the server, you can inspect the layer data directly on the HERE platform, as shown in the following figure:

Display IML data on a map

After you create and populate an IML with data, you can use the HERE Maps API for JavaScript to display this data on a map by using the IML Provider service. The service fetches the layer data through the HERE Interactive Map Data API, allowing you to interact with and manage custom layers on the map.

📘
Note
The following steps build upon the base map described in Get started with HERE Maps API for JavaScript as the foundation for introducing code additions.

Set the map center to Amsterdam and the zoom in the map view:
```
map.setCenter( {lat: 52.3676, lng: 4.9041 })
map.setZoom(12)
```
Optional: Disable the POI display for better visibility of the IML data by modifying the defaultLayers variable, as shown in the following example:
```
const defaultLayers = platform.createDefaultLayers({pois: false})
```

Configure the addIml function to import and display the IML data on the map:

function addIml(map) {
   // Define Here Resource Name (HRN) of the catalog
   const catalogHrn = "hrn:here:data::olp-here:amsterdam-street-markets";
   // Define the layer that stores data
   const layerId = "street-markets";
   // Instantiate the IML service
   const service = platform.getIMLService();
   // Create a provider for the IML data
   const imlProvider = new H.service.iml.Provider(service, catalogHrn, layerId);

   // Add the IML layer to the map
   map.addLayer(new H.map.layer.TileLayer(imlProvider));

}
// Call the addIml(map) function to add the IML layer to the map:
addIml(map);

The map now displays the geospatial data, with the locations of street markets in Amsterdam marked as points, as shown in the following example: IML layer in the HERE Maps API for JavaScript

Summary

In this tutorial, you created and configured an Interactive Map Layer in the HERE platform. You populated the layer with data through the Interactive REST API call. Then, by using the ID of the layer and the HRN of its parent catalog, you displayed the IML data on a HERE map through the HERE Maps API for JavaScript.

Next steps

To further explore the design and features of the HERE Maps API for JavaScript, see the API Reference.