Implement GeoJSON Renderer

You can create a GeoJSON rendering plugin with Data Inspector Library components and bundle it with a schema.

After you publish the schema and use it with a layer, you can see data rendered on the Inspect tab of the catalog layer in the HERE platform portal.

Follow the steps below to create a GeoJSON renderer:

  1. Create a renderer project by installing the Web App Generator with the option Custom data using custom JavaScript translators to GeoJSON and extending the renderer.plugin.template.js file that becomes available in the generated example application. For more information, see the Create Renderer Plugins chapter.

    To see a sample implementation of the Data Inspector Library's rendering functions and style properties, see the Plugin Examples chapter.

  2. Copy your renderer plugin to the ds/src/main/resources/renderers folder.

Example Schema GeoJSON Renderer

Based on the schema project generated in previous chapters, let's render the geographic marker using a GeoJSON renderer:

  1. Edit the proto/src/main/proto/com/here/example/v1/test_schema.proto file as follows:

    syntax = "proto3";
    
    package com.here.example.v1;
    
    // MainProtobufMessage is a placeholder, and this value must match the package/messagename in
    // the mainMessage tag of the layer-manifest-plugin in the schema_ds module.
    message MainProtobufMessage {
        double lat = 1;
        double lon = 2;
        string hint = 3;
    }
    
  2. Create a GeoJSON renderer file ds/src/main/resources/renderers/com.here.example.v1.MainProtobufMessage.js and use the following JavaScript code:

     (() => {
         "use strict";
         /**
         * Renderer plugin must return an object with one of these functions in it:
         *
         * getGeoJSON: function (params) { ... }
         * getGeoJSONAsync: async function (params) { ... }
         *
         * Both synchronous `getGeoJSON` and asynchronous `getGeoJSONAsync` functions return
         * an object with GeoJSON data in the `body` property:
         *
         * {
         *     contentType: "application/vnd.geo+json; charset=utf-8",
         *     body: geoJsonData
         * }
         *
         *
         * Only one of these functions must be declared. If both are present, the plugin will not be
         * used.
         */
         const plugin = {
             /**
              * Generates an object with GeoJSON data.
              *
              * @param {object} params.logger Logger to log information to console.
              * @param {object} params.layer All properties as well as dataUrl, name, partitioning and
              * originalConfiguration.
              * @param {object} params.decodeResult Decoded data of the partition.
              * @param {object} params.mapUtils Various converters like `mercatorConverter`,
              * `heretileToQuad`, `hdmapCoordinateToLonLat`, and more.
              * @param {object} params.geometryDataProviders Various geometry data providers to map data.
              * @returns {object} An object with generated GeoJSON data.
              */
              getGeoJSON:function (params) {
    
                  // Destructuring of the `params` object.
                  const { logger, layer, decodeResult, mapUtils } = params;
    
                  // Partition data decoded with the schema protobuf
                  var data = decodeResult.data;
    
                  logger.info("Data successfully loaded");
    
                  // Prepare GeoJSON to visualize
                  var result = {
                      "type": "FeatureCollection",
                      "features": [
                          {
                              "type": "Feature",
                              "properties": {
                                  "tooltip" : data.hint
                              },
                              "geometry": {
                                  "type": "Point",
                                  "coordinates": [
                                      data.lon,
                                      data.lat
                                  ]
                              }
                          }
                      ]
                  };
    
                  // Return an object with GeoJSON data
                  return {
                      contentType: "application/vnd.geo+json; charset=utf-8",
                      body: result
                  };
              }
         };
         return plugin;
     })();
    

    Note that this file is for demonstration purposes only. When you implement the rendering plugin, make sure that you properly name your renderer plugin file. Its name (without the .js extension) should match the message field in the META-INF/layer.manifest.json manifest file of the built artifact (ZIP archive) of the data schema (ds) module.

  3. Publish the schema:

    mvn deploy
    
  4. Create a catalog using the OLP Command Line Interface (CLI):

    olp catalog create renderer-catalog "Renderer Catalog" --summary="Renderer Catalog"
    
  5. Create a layer inside the newly created catalog with the CLI:

    Linux
    Windows
    olp catalog layer add hrn:here:data:::renderer-catalog renderer-layer renderer-layer --summary="Renderer layer" \
                              --description="Renderer layer" --coverage="DE" --versioned --content-type=application/x-protobuf \
                              --partitioning=heretile:12 --schema=hrn:here:schema:::com.here.example:test_rendering_schema_2_v1:1.0.0
    olp catalog layer add hrn:here:data:::renderer-catalog renderer-layer renderer-layer --summary="Renderer layer" ^
                              --description="Renderer layer" --coverage="DE" --versioned --content-type=application/x-protobuf ^
                              --partitioning=heretile:12 --schema=hrn:here:schema:::com.here.example:test_rendering_schema_2_v1:1.0.0
  6. Populate the data on the layer with the CLI:

    You can download sample partition data here. The file contains protobuf-serialized data with geographic coordinates.

    olp catalog layer partition put hrn:here:data:::renderer-catalog renderer-layer --partitions=23618402:resources/renderer-example.partition
    

    Once done, you should see the sample partition data rendered in the Inspect tab of the renderer-layer layer in the hrn:here:data:::renderer-catalog catalog:

results matching ""

    No results matching ""