Adding custom geojson to Geomap

Grafana Geomap Panel
, ,
1

I’m trying to add a custom geojson file to geomap. I don’t see a way to select my own file from the options so I located the dropdown options in the geojsonLayer.ts file and added my own value there. The new file is located in the same /public directory as the other .geojson map files. However, this does not result in the expected behavior of that value being available. I’ve restarted the Grafana server thinking that might result in the uptake of the new TS file but no joy there.

What is the proper way to add a custom geojson file to Geomap? If it is editing the geojsonLayer.ts file how does one make the new option available?

2 Likes
2

I am having the same issue.

1 Like
3

I am having the same issue

1 Like
4

It seems the choices are embedded in the code, however as a workaround custom files are permited if you upload your file to the folder (be aware that you can not delete the text in the GeoJSON URL selection box, you need to directly click and start writting the path and filename). At least that work for us. Thanks Grafana geojson team for working on the tool and to Peancor for finding this workaround.

1 Like
5

Can you specify your workaround a little more:

  • To which folder? The gazetteer folder?
  • Write the file/path name where?

Did anyone encounter: “Unable to parse locations” if you replaced one of the existing .json files with a custom one? I think it is not an issue with my json format.
Thanks

6

In our case the file was uploaded to the “/public/gazetteer” folder, and in the GEOMAP option of data layer we typed the Geojson URL as: /public/gazetteer/image.geojson
Hope it helps!

2 Likes
7

Thanks! It’s hard to notice that one can write a custom path there.

If anybody is trying to get it to work with german postal codes:
Get the file DE.tab here:

And then run the following python script in that folder:

import sys
import pandas as pd
import json

dat = pd.read_csv("DE.tab",sep='\t')
dat = dat[dat["plz"].notnull()]
dat = dat[dat["lat"].notnull()]
dat = dat[["plz","lat","lon","name"]]
dat.columns = ["key","latitude","longitude","name"]

for i,row in dat.iterrows():
    if "," in row["key"]:

        for alt in row["key"].split(','):
            tmp = row.copy()
            tmp["key"] = alt
            dat = dat.append(tmp,ignore_index=True)


dat = dat[~dat["key"].str.contains(",")]

parsed = json.loads(dat.to_json(orient='records'))
tmp = json.dumps(parsed, indent=4, ensure_ascii=False).encode('utf8')

print(tmp.decode())
1 Like
8

I have set up a server that serves geoJSON files and thought that I could have grafana query my server for the files by adding the url to the server as stated above, but it does not show me anything. Have anyone managed to do this?

1 Like
9

i can enter my files no problem.

has anyone been able to pass a variable into the GeoJSON URL
ie

public/maps/${variable}.geojson

or is my syntax off.

10

A node server or what kind of server?

11

Can this work with a servwr that serves geojson files? Make it grab different routes?

1 Like
12

This is working for me using nodejs/express.js for a rest api

app.get("/provinces", (req, res) => {
  let raw = fs.readFileSync(
    "/public/maps/limits_IT_provinces.geojson"
  );
  let geojson = JSON.parse(raw);
  let properties = geojson.features.map((p) => p.properties);

  return res.send(properties);
});

app.get("/provinces/:prov_istat_code_num", (req, res) => {
  let geojson = fs.readFileSync(
    "/public/maps/limits_IT_provinces.geojson"
  );
  let featureCollection = JSON.parse(geojson);
  let prov_istat_code_num = req.params.prov_istat_code_num
  let feature = featureCollection.features.filter(function (feature) {
    return feature.properties.prov_istat_code_num === parseInt(prov_istat_code_num);
  });

  province = {};
  province.type = "FeatureCollection";
  province.bbox = [
    6.62662136853768, 35.493691935511417, 18.52038159909892, 47.091783746462159,
  ];
  province.features = feature;

  return res.send(province);
});

using another geomap plugin: GitHub - orchestracities/map-panel: This plugin extends Grafana Geomap panel with several functionalities: Support for GeoJSON shapes, Support for icons, Support for pop up visualizations of data from a specific point, Multiple layers for the different queries.

image
image870×678 100 KB

1 Like
13

hi, could you give a little more explanation please.
I’m a little lost . :sweat_smile:
how conf variable?

14

How conf variable? Not sure I understand

image
image1099×530 32.4 KB

15

thank you very much , one additional question ,I have a problem with the Multi-value and Include All option
do you know any way to make them work?

16

Are you going to use the nodejs/express approach?

17

Yes, I’m using node express, and I can’t use Multi-value and Include All option. thanks.

18

Yes you can. The issue is more javascript/typescript issue. You will have to sort out how to parse the multi values on the node side.

19

i need to know more on this. Where is your node.js located? on the same Grafana server? I have about 700 geojson files, and statically assining them is a pain.

20

Mine is separate node rest api host. But location does not matter but best to separate concerns

You could implement dynamic loading of geojson files from a folder

image

But I would recommend you import these files into better suited GIS database