HERE Map Content Data

Currently, the Data Inspector Library provides two mechanisms for visualizing certain HERE Map Content (HMC) layers (Building Footprints, Cartography, Roads - Topology & Geometry):

• Dedicated GeoJSON rendering plugins that allow you to customize your visualizations as needed.
• Special RibDataSource data source.

For implementation details, see the chapters below.

Visualization through Dedicated Plugin

The dedicated rendering plugins for the Building Footprints, Cartography, and Roads - Topology & Geometry layers are included in the data schemas of these layers. To see how they work, use the Control the Visualization app that comes as part of Data Inspector Library examples. For this, in the top panel, specify the HRN of the HMC catalog and the ID of the corresponding layer, for example:

For more information on how to work with rendering plugins, see Create rendering plugins.

Visualization through RibDataSource

RibDataSource is used to visualize highly accurate geo-referenced data from catalogs that use the HERE Map Content schema. For more information, see HERE Map Content Data Specification.

The HERE Map Content data source allows visualizing data from several layers simultaneously.

To visualize the HERE Map Content Data from a catalog, follow these steps:

1. Start with creating an instance of RibDataSource and connect it to MapView as follows:

    const ribDataSource = new RibDataSource({
        dataProvider: new RibDataProvider({
            hrn: "HRN string",
            layer: "Layer ID where data is stored",
            environment: "here",
            getToken: async () => "Your Token"
        })
    });
    mapView.addDataSource(ribDataSource);
   

2. Then, to visualize HERE Map Content for a certain tile, call the selectTile method as follows:

    ribDataSource.selectTile(tileMortonCode);
   

Optional Parameters

• intersectionAgent { InteractiveIntersectionAgent }: An instance of InteractiveIntersectionAgent that triggers events when an intersection with a geometry object happens or changes. Used to set custom handlers on mouse-over or display geometry tooltip.

• dataStore.secondaryLayers { string[] }: An array of additional layers supported by the Data Store to be rendered together with the layer specified in the dataStore.layer property.

Example App

Before you can visualize the HERE Map Content Data, you need to know the HERE Resource Name (HRN) of the layer that contains the data. You can find the HRN of the necessary catalog in the Data section of the HERE platform portal.

To visualize the HERE Map Content Data from a catalog, follow these steps:

1. Install the web app generator and enter your application name when prompted.

2. Select the option RIB data when prompted What kind of data will you visualize on top of the Base map?.

3. When prompted HRN of the Catalog you want to visualize?, enter the HRN of the catalog that contains the HERE Map Content Data.

4. When prompted Name of the layer you want to visualize?, enter the name of the layer that contains the HERE Map Content Data.

5. When prompted On which level the data is stored?, enter the minimum zoom level that is required for the data to render.

6. Once the code is generated, you can build and serve the web app by running the following command:

    npm run start
   

7. Next, open http://localhost:8080 in your favorite web browser to see the generated app.

To see the base map, update the authentication form with the credentials that you obtained from the HERE platform portal.