Dynamic geoJSON Plugin (Alpha) structure from JSON API data source

Grafana Geomap Panel
1

Hello everyone,

This is my first question in the forum. First of all, many thanks to those who developed Grafana—an excellent open-source tool.

Let me explain my limitations. I have a local web service that returns a GeoJSON with polygons and associated properties. This GeoJSON is correctly structured (I tested it in geojson.io, and it works fine).

Now, this API updates every 10 seconds, as polygons may be added to its response, or it may contain none at all. It is a dynamic solution.

My goal is to add these dynamic polygons to a GeoMap layer.

Initially, I was using the GeoJSON layer, but it is not dynamic. Even though there is a place to enter the URL, the data does not refresh when the dashboard refreshes. That is, once the dashboard is created, the data remains cached statically, and even if the API returns new polygons, the dashboard does not update.

I then enabled the Dynamic GeoJSON (Alpha) option in Grafana, which provides more capabilities. The option to add the GeoJSON via URL still exists (and remains static). However, I can now also query the data source directly. In my case, I installed and configured the JSON API data source, setting it up with my web service URL.

However, I have not been able to structure the query correctly to plot the polygons on the map.

Has anyone encountered a similar issue?

2

Somewhere in grafana installation folder, there are sample geojson files, I think on map folder, open those up and it should give you an idea as to what structure is expected

3

Thank you for the response. The structure of my GeoJSON is correct, there are no issues there.

I’m sorry that my issue wasn’t understood. If I place my API URL in the GeoJSON URL of my layer, the polygons published by my API are correctly projected onto the map, but this is a static solution. That is, it does not refresh with the dashboard’s auto-refresh.

On the other hand, if I set the Infinity connector as the Data Source and add my API URL (http://127.0.0.1:3030/geojson?ts=${__time}), I can see the API response in the table view. However, I don’t know how to integrate this (now dynamic) data into the query provided by the Dynamic GeoJSON (Alpha) layer.

I believe I managed to share an image of my dashboard editing screen. On one side, in the Dynamic GeoJSON (Alpha) layer, I marked in blue the query component that I can’t get to work, and in red the GeoJSON URL, which I left with a placeholder value. If I set my API URL there, the polygons are correctly projected, but they do not update afterward.

WhatsApp Image 2025-01-30 at 8.55.38 PM
WhatsApp Image 2025-01-30 at 8.55.38 PM1600×803 187 KB

1 Like
4

I would go with the orchestra city plugin instead of geomap

The geomap plugin does work well for what you want unless maybe you can create a hidden infinity variable and use the variable in the dynamic geojson?

5

I’ve already tried it and the behavior is the same as geomap. If I write the GeoURL in the layer, it shows the current polygon but won’t refresh automatically with auto refresh set up.

I’ve read an answer written by you in some other post where you mentioned how you could parse the data retrieved with Infinity to dynamically plot some polygons using Orchesrta. However, I couldn’t apply it to my solution. It didn’t work

6

Check your browser console to see if it is really sending the needed change in parameters

Or debug your api

7

I can see the changes in the API response correctly in the browser when I change the original geojson file.

What I don’t understand is the reason to add a data source that is not needed. I could change the data source to the grafana sample data and write my API URL to the GeoJSON URL in the dynamic geoJSON layer and it will work, but won’t refresh.

So, why is it important to add a data source? Or how could I use the data source response to plot the polygon retrieved without writing the GeoJSON URL in the layer?

8

let me try to spin up my mock geojson api. where is this ${__time} coming from? is that an out of the box grafana global variable?

9

Hi!. First of all, thanks for your time and help.

The ${__time} at the end of the API URL was proposed by chatGPT as a workaround to get sure that Grafana is looking at the last published response.

It works in the sense that the API response is identical with or without that term, but didn’t solve my problem about the autorefreshing the polygons on the dashboard

1 Like
10

there is not such variable so not sure if it will work. here is the dynamic geojson change, it required for me to select refresh on top right

dynamic-geojson

spun up a fake api to emulate your

http://localhost:5000/geojson?ts=${__to:date:YYYY-MM-DD HH:mm:ss}

partial rest api server code

app.get("/geojson", (req, res) => {

  let timesearch = req.query.ts;
  let county_name = req.query.county_name;
  
  //const date = new Date(timesearch);
  const date = new Date();
  const secondsUTC = date.getUTCSeconds();

  console.log('time based dynamic geojson', timesearch, secondsUTC)
  let geojson = fs.readFileSync(
    "./data/wa_counties.geojson"
  );
  let featureCollection = JSON.parse(geojson);
  let feature;

  if (secondsUTC % 2 == 0) {
    county_name = 'Klickitat'
  } else {
    county_name = 'Walla Walla'
  }

  feature = featureCollection.features.filter(function (feature) {
    return feature.properties.NAME === county_name;
  });
11

Hi Josiah, again, thanks for your time and effort. I finally desisted on trying this plugin for my needs. I decided to find another way with other tools and using html and leaflet was a smoother path. I could achieve what I need with much more adaptations. I’ll keep trying grafana and maybe in a newer version the geojson plugin improved enough.

1 Like
12

leaflet is the best option in my opinion, great choice. geomap is not ready for the big league yet