Data Inspector IDE

The Data Inspector provides rendering settings and an embedded JS editor that you can use to develop your custom rendering plugin code.

Rendering Settings
Figure 1. Rendering Settings

With these tools, you can create, modify, and instantly run custom GeoJSON rendering plugins for both default layer schemas (provided by the HERE platform) and your custom layer schemas through:

  • HERE platform Data Inspector

    In the HERE platform portal, go to a layer's details' page and select the Inspect tab.

    For this option to work, you do not need to install Node.js, additional Data Inspector Library modules, or any third-party components. Just log in to the portal with your platform credentials.

  • Local Data Inspector

    For this option to work, you need to install Node.js and the Data Inspector Library along with the example applications.

    With that done, you can see the geojson / DI / plugin example application that showcases the implementation of a sample rendering plugin.

Use Cases

The Data Inspector IDE enables you to solve the following typical use cases:

  • When you are developing a pipeline, a schema, or a dataset and need a rendering plugin to quickly visualize the outputs of your data pipelines on top of the base map.

    In this case, for a custom layer schema that has no GeoJSON plugin, you are provided with a predefined plugin JS template. The template contains detailed inline instructions where to put your code in the embedded editor.

  • When you are working with the data in a catalog layer and need to temporarily change the existing visualization to answer your specific questions about the data.

    In this case, you can modify the rendering plugin bundled with the original layer schema in the editor and run the code right away to inspect the output in the Data Inspector's Map View.

Later, once you are satisfied with the plugin’s behavior, you can download the plugin locally, bundle the plugin with your schema, and publish the schema to the platform to use it with the layer. To create or extend a schema, a Maven Archetype is provided. For more information, see Create and Extend Schemas.

Layer Rendering Settings

The Layer section in the Data Inspector's Control Panel allows you to work with layer schemas and rendering plugins:

Layer rendering settings
Figure 2. Layer rendering settings

Layer rendering settings are available for the following cases, depending on a layer's partitioning scheme and content type:

  • For all HERETile layers, rendering settings are available for layers of any content type.
  • For HERETile layers of content type application/vnd.geo+json, you can customize visualizations of GeoJSON data through a rendering plugin (highlight features, provide custom icons, apply tooltips, and more).
  • For HERETile layers that originally have no bundled schema, you can provide your own schemas for data decoding.
  • For generic layers, rendering settings are disabled, except for those whose content type is application/x-protobuf. As for the latter, you can use your own schemas for data decoding.

Schema

The Schema field shows the data schema that is currently assigned to a catalog layer.

By default, the original schema assigned to a catalog layer is loaded, along with the bundled rendering plugin (if available).

You can load your custom data schemas as a ZIP archive by clicking the More button on the right and selecting Open schema.

If you load a schema without a rendering plugin, no data is visualized, and the Rendering plugin field shows Missing. To fix this, you can do one of the following:

  • Develop your own rendering plugin: For this, click the Create plugin button to open the editor and type your code.

  • Reset your custom schema: For this, click the More button and select Reset to load the original schema assigned to the selected layer.

  • Load another data schema with a bundled rendering plugin.

Rendering Plugin

The Rendering plugin field informs you about the rendering plugin that is currently applied for the selected data schema:

  • Found: A rendering plugin has been detected in the currently loaded schema and applied.

  • Custom code: The currently loaded rendering plugin has been modified.

  • Missing: No rendering plugin bundled with the currently loaded schema has been found.

The editor enables you to load your local plugin JS file into the Data Inspector to run it on the layer data that has been already loaded into the Data Inspector. For this, click the More button on the right and select Open plugin. To return to the rendering plugin bundled with the currently loaded schema, select More > Reset.

To modify your plugin code, click the Edit plugin button to open the embedded editor. Once satisfied with the results, you can download the modified JS file to save your code by selecting More > Download.

Embedded JS Editor

You can open the plugin code editor by clicking the Create/Edit plugin button in the Rendering plugin section.

Embedded JS Editor
Figure 3. Embedded JS Editor

This is a rich JavaScript editor offering:

  • Extended code-editing functionality
  • Live JS syntax highlighting
  • JS file drag-and-drop
  • Code auto-completion
  • Syntax error indication

If you create a rendering plugin from scratch, the editor contains a plugin template with detailed inline instructions. To see a sample implementation of the Data Inspector Library rendering functions and style properties, see Plugin Examples and Style GeoJSON Visualization.

Rendering plugin code template
Figure 4. Rendering plugin code template

You can also drag-and-drop your local plugin JS file directly into the editor area. In this case, the file is loaded into the browser memory for the duration of the catalog connection session.

To launch your plugin code, click the Run button above. The layer data is rendered in the Data Inspector Library's map view. Once satisfied with the results, you can download the modified JS file to save your code with the Download button).

While developing your plugin, any errors that may occur can be viewed in your browser's developer tools.

Note: Restoring Unsaved Plugin Code

The rendering plugin editor automatically saves your plugin code to your browser's local storage. So, in case of browser crash, or if you accidentally leave or reload the plugin editor page with unsaved changes, you can restore your code from the previous session. The browser additionally prompts you about unsaved changes in case you reload or leave the plugin editor page.

Debugging

You can debug rendering plugin code with your browser's built-in developer tools. To launch developer tools on most popular browsers, use the Ctrl(Cmd)+Shift+J shortcut.

Because plugin code and its evaluated object are not accessible through a global scope object or the <script> tag, you need to add debugger statements to those lines in code on which you want the debugger to pause execution. After you open developer tools and rerun the plugin code (by selecting a new tile or clicking Run), the browser starts debugging at the first active breakpoint it encounters. For more information on the JS debugger statement, see MDN Web Docs.

Note

Each time you update code, the rendering plugin object is dynamically recreated by the Data Inspector Library with the JS eval function. That is why, if you manually place breakpoints at certain lines using a browser's developer tools, the breakpoints become invalid after you update the plugin code. Only breakpoints created with debugger statements persist, so make sure that you remove them in the production version of your plugin code.

results matching ""

    No results matching ""