GeoJSON data

GeoJsonDataSource allows you to render geometric objects provided in the GeoJSON format. It corresponds with the RFC7946 GeoJSON Specification and supports the following geometry types:

Point
LineString
Polygon
MultiPoint
MultiLineString
MultiPolygon

Supported geometric objects with additional properties are Feature objects. Sets of Feature objects are contained in the FeatureCollection objects.

This data source supports the following custom style properties for Feature objects:

tooltip
style.color
style.fill
radius and more

📘
Note: Property inheritance
When you define a property for a MultiPoint, MultiLineString, or MultiPolygon, each point, linestring, or polygon inherits the properties of its container feature. For example, suppose you attach a custom SVG icon to a MultiPoint geometry. As a result, the same icon is visualized for all the points in this array. Besides, if your select one of these points, all the points defined in this MultiPoint geometry get selected as well.
If you want a specific point to be highlighted or selected separately, split the container MultiPoint to independentPoints (or just smaller sets of MultiPoints) and assign individual attributes to each of those Point's. The same applies to linestrings and polygons.

For more information on supported custom style properties, see Style GeoJSON Visualization.

Supported data providers

The GeoJSON data source supports these data providers:

A direct GeoJSON object, which you can provide by uploading a file.
A catalog layer from the Data Service where Content-Type is application/geo+json or application/vnd.geo+json and the data is in the GeoJSON format.
A catalog layer from the Data Service with rendering plugins that can decode any data into the GeoJSON format.
A catalog layer that references road segments and their offsets for location referencing instead of longitude and latitude values that can be visualized with rendering plugins.

If you use the Data API, the catalog layer must be of type versioned or volatile and use the HERE Tile partitioning scheme. For more information on partitioning, see the Partitions chapter in the Data User Guide.

Connect to data service

The GeoJSON data source renders the data contained in the layers whose Content-Type is application/geo+json or application/vnd.geo+json without decoding it.

Otherwise, the protobuf.js library is used to decode the raw data from the layer into a JSON object. The JSON object is then decoded into a GeoJSON object using the relevant rendering plugin.

const geoJsonDataSource = new GeoJsonDataSource({
  dataStore: {
    hrn: HRN.fromString("Your HRN string"),
    layer: "Layer name",
    getBearerToken: () => Promise.resolve("Your Token"),
  },
});
mapView.addDataSource(geoJsonDataSource);

// Select tile when data source is ready
mapView.addEventListener(MapViewEventNames.DataSourceConnect, () => {
  geoJsonDataSource.selectTile(geoJsonDataTile);
});

Rendering plugins can be present in a Data Service catalog or included from a local file. If your catalog does not have a rendering plugin, you can create your own JavaScript JSON-to-GeoJSON translator and visualize the data with the GeoJSON data source.

To use your own plugin, update the parameter externalRenderingPluginName with the name of your plugin like in the following example:

const geoJsonDataSource = new GeoJsonDataSource({
  dataStore: {
    hrn: HRN.fromString("Your HRN string"),
    layer: "Layer name",
    getBearerToken: () => Promise.resolve("Your Token"),
  },
  externalRenderingPluginName: "renderer.plugin.template", // `renderer.plugin.template.js` file must be placed into project root directory
});
mapView.addDataSource(geoJsonDataSource);
mapView.addEventListener(MapViewEventNames.DataSourceConnect, () => {
  geoJsonDataSource.selectTile(geoJsonDataTile);
});

Provide a GeoJSON object

const geoJsonDataSource = new GeoJsonDataSource({});
mapView.addDataSource(geoJsonDataSource);

const geoJsonData: FeatureCollection = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {},
      geometry: {
        type: "Point",
        coordinates: [13.37885856628418, 52.516357970439735],
      },
    },
  ],
};

if (dataInspector.mapView !== undefined) {
  dataInspector.mapView.addEventListener(
    MapViewEventNames.DataSourceConnect,
    (event) => {
      if (
        geoJsonDataSource !== undefined &&
        event.dataSourceName === geoJsonDataSource.name
      ) {
        geoJsonDataSource.renderGeoJson(geoJsonData); // visualize the GeoJSON object
      }
    }
  );
}

Optional parameters

intersectionAgent { InteractiveIntersectionAgent }: An instance of InteractiveIntersectionAgent that fires events when someone interacts with a geometry object. Use it to set custom handlers for mouse-over events or to display geometry tooltips.
dataStore { GeoJsonDataStoreParameters & DataStoreClientParameters }: Connection parameters to provide data from the Data Service. If omitted, the data source can still take the GeoJSON data that you pass into renderGeoJson.
externalRenderingPluginName { string }: The name of a custom rendering plugin. A JavaScript file with the same name or with the prefix rendering. must exist in the project's root directory. This rendering plugin is used instead of the standard plugin that comes with the Data Service.

GeoJSON from catalog example app

Before you can visualize GeoJSON data from a catalog, you need to know one of the following:

The HERE Resource Name(HRN) of the layer whose Content-Type is application/geo+json or application/vnd.geo+json
The HRN of the catalog where a rendering plugin is published and that has Scheme.hrn defined in the catalog configuration.

You can create and extend your own schemas by using Maven archetypes in the HERE Data SDK for Java & Scala.

For more information, see the Create and Extend Schemas chapter in the Archetypes Developer Guide.

To visualize some test data first, you can use the following public sample catalog:

HRN: "hrn:here:data::olp-here:here-geojson-samples"
layer name: "berlin-districts"
level: "12"

To visualize GeoJSON data from a catalog, follow these steps:

Install the web app generator and enter your application name when prompted.
When prompted What kind of data will you visualize on top of the Base map?, select the option GeoJSON from a data layer.
When prompted HRN of the Catalog you want to visualize?, enter the HRN of the catalog that contains GeoJSON data.
When prompted Name of the layer you want to visualize?, enter the name of the layer containing a GeoJSON rendering or the HRN of the layer whose Content-Type is application/geo+json or application/vnd.geo+json.
When prompted On which level the data is stored?, enter the minimum zoom level that is required for the data to render.
Once the code is generated, you can build and serve the web app by running the following command:
```
npm run start
```
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 platform.

GeoJSON data from file example app

After you generate the web app (see the example above), you need to upload your GeoJSON file. If you want to visualize some test data first, you can use the following GeoJSON sample:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "tooltip": "You can have some tooltip for each Feature",
        "style": {
          "fill": "blue"
        }
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [13.304, 52.499],
            [13.35, 52.458],
            [13.43, 52.468],
            [13.441, 52.521],
            [13.371, 52.537],
            [13.304, 52.499]
          ]
        ]
      }
    }
  ]
}

To visualize GeoJSON data from the file, follow these steps:

Install the web app generator and enter your application name when prompted.
Select the option GeoJSON from a file when prompted What kind of data will you visualize on top of the Base map?.
Once the code is generated, you can build and serve the web app by running the following command:
```
npm run start
```
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 platform.