Superset series 6/6 — Openlayers map visualization

Teclead Ventures
We enable our enterprise clients to reach the mass market and digitalize internal and external businees processes. https://teclead-ventures.de/en

We are hiring!

Introduction

In today’s data-driven world, visualising information in a clear and compelling manner is essential. Geospatial data, in particular, has become increasingly important for a variety of industries and applications. In this article, we’ll explore how to harness the power of OpenLayers and Superset to visualise maps effectively, making it easy for you to bring your geospatial data to life.

OpenLayers is a high-performance, feature-packed library for creating interactive maps on the web, while Superset is a powerful, enterprise-ready data visualisation platform. By integrating OpenLayers with Superset, you’ll be able to create dynamic, customisable, and interactive maps that can be easily embedded within your dashboards and reports. Whether you’re a seasoned data professional or a newcomer to geospatial visualisation, this step-by-step guide will help you unlock the full potential of these two powerful tools. So, let’s dive in and start visualising your maps with OpenLayers and Superset!

Requirements

• Node v16.x LTS
• Python 3.7+

Version

In this Guide we are using Superset version 2.1.0

You can use the same version by checking out in the corresponding branch

git checkout 2.1.0

Result Repository

This Superset documentation series will guide you through each step of customizing Superset. If you’d like to use the results directly, you can clone our Git repository, which includes all changes made during the course of this guide:

(**OPTIONAL):**
git clone [<https://github.com/Teclead-Ventures/superset>](<https://github.com/Teclead-Ventures/superset>)

Steps:

1. Create a new Superset visualisation plugin:

In the previous part (Part 5) of our superset series we explain how to create a new superset plugin.

2. Add OpenLayers as a dependency:

In the added plugin ( Step 1 ) navigate to /tmp/superset-plugin-chart-hello-world and run:

npm install ol

3. Create a custom map visualization:

Navigate to the main tsx/jsx file of your plugin.

In our Hello World example this would be /tmp/superset-plugin-chart-hello-world/src/SupersetPluginChartHelloWorld.tsx

First we add the required library imports:

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

Then inside of the SupersetPluginChartHelloWorld default function we replace the existing useEffect , add the mapContainerRef variable, adjust the returned JSX and delete the unused variables. The result should look like this:

import { useEffect, useRef } from "react";

export default function SupersetPluginChartHelloWorld(props: SupersetPluginChartHelloWorldProps) {
  // height and width are the height and width of the DOM element as it exists in the dashboard.
  // There is also a `data` prop, which is, of course, your DATA 🎉
  const { height, width } = props;
const mapContainerRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (mapContainerRef.current) {
      new Map({
        target: mapContainerRef.current,
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          center: [0, 0], // Here you can set the starting point
          zoom: 2,
        }),
      });
    }
  }, [mapContainerRef]);
  return (
    <Styles
      boldText={props.boldText}
      headerFontSize={props.headerFontSize}
      height={height}
      width={width}
    >
      <div ref={mapContainerRef} style={{ width: '100%', height: '400px' }}></div>
    </Styles>
  );
}

4. Build and link the plugin:

npm ci 
npm run build

Now from the main superset project run from /root/superset-frontend :

npm i -S /tmp/superset-plugin-chart-hello-world
npm i 
npm run build
cd ..
superset load_examples
superset db upgrade
superset init
superset run -p 8088 --with-threads --reload --debugger

When you now load the Hello World Plugin you will see this:

You can now start to draw trajectories or visualize heatmaps depending on your data.

Check out this Openlayers example which adds a Heatmap layer:

Earthquakes Heatmap

Conclusion

Perfect you are all set!

Do not forget this is a high-level overview of the process which has the purpose of setting up Openlayers + Superset. You might need to adapt these steps to your specific use case, such as customising the map layers, handling data from Superset, or configuring map interactions. You can check the previous guides of our superset documentation if you need further guidance.

Coming to an end I hope this superset series has helped you understand the structure of the project better and gave you some intuitive examples which will guide you in your very own use cases. Feel free to contact us if you need any help.

Superset Setup Part 1 : https://medium.com/@teclead-ventures/superset-series-1-6-setting-up-superset-a750481c228e

Superset Controlpanel Part 2 : https://medium.com/@teclead-ventures/superset-series-2-6-control-panel-31a84afae465

Cloning Superset Plugins Part 3: https://medium.com/@teclead-ventures/superset-series-3-6-cloning-plugins-3336a8a979a0

Modifying Superset Plugins Part 4 : https://medium.com/@teclead-ventures/superset-series-4-6-modifying-plugins-abad61517230

Adding Superset Plugins Part 5 : https://medium.com/@teclead-ventures/superset-series-5-6-adding-plugins-4677c6a1ff5b

Author : Daniel Jin Wodke

Editors: Ruben Karlsson, Matthias Daiber, Cherif Khlass, Lukas Zöllner , John Einicke