How to make nice GeoJSON tooltips on the map

[Moonbase59]

The Obsidian Leaflet plugin takes tooltip titles from the GeoJSON feature properties, namely name or title.

OpenDataLab (and other) GeoJSON data received from official institutions like the land surveyor’s office often doesn’t have a name property. Fortunately, we can often construct it from other existing feature properties, like BEZ and GEN for district ("Landkreis") data, in our example.

Our file geo-bayern-landkreise.geojson (converted to a readable format) has the following structure:

{
    "crs": {
        "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        },
        "type": "name"
    },
    "features": [
        {
            "geometry": {
                "coordinates": [
                    [
                        [
                            11.405818397401287,
                            48.81985164751142
                        ],

                        … and many more …

                        [
                            11.405818397401287,
                            48.81985164751142
                        ]
                    ]
                ],
                "type": "Polygon"
            },
            "properties": {
                "ADE": 4,
                "AGS": "09161",
                "AGS_0": "09161000",
                "BEM": "--",
                "BEZ": "Kreisfreie Stadt",
                "BSG": 1,
                "DEBKG_ID": "DEBKGDL20000E5Y4",
                "FK_S3": "R",
                "GEN": "Ingolstadt",
                "GF": 4,
                "IBZ": 40,
                "NBD": "ja",
                "NUTS": "DE211",
                "RS": "09161",
                "RS_0": "091610000000",
                "SDV_RS": "091610000000",
                "SN_G": "000",
                "SN_K": "61",
                "SN_L": "09",
                "SN_R": "1",
                "SN_V1": "00",
                "SN_V2": "00",
                "WSK": "1972/07/01",
                "destatis": {
                    "population": 136981,
                    "population_m": 69252,
                    "population_w": 67729
                }
            },
            "type": "Feature"
        }
    ],
    "source": "© GeoBasis-DE / BKG 2013 (Daten verändert)",
    "type": "FeatureCollection"
}

We can see there are neither name nor title feature properties, but we can construct a meaningful name by concatenating the BEZ and GEN properties.

Since manual editing is much too error-prone and awfully slow, and the data is JSON, we can easily use a little Python3 to do that job for us. Always backup your original GeoJSON file before, and work on copies!

import json

# load GeoJSON data from file
geojson = json.load(open("geo-bayern-landkreise.geojson"))

# check to see that the BEZ and GEN properties have the correct content
for d in geojson["features"]:
    print(d["properties"]["BEZ"], d["properties"]["GEN"])

# Python dicts are modified in-place, so we can easily add the "name" property
for d in geojson["features"]:
    d["properties"]["name"] = d["properties"]["BEZ"] + " " + d["properties"]["GEN"]

# check again if we’ve done it right
# The "name" property will be shown in Obsidian Leaflet’s tooltips
for d in geojson["features"]:
    print(d["properties"]["name"])

# write a new file, sort keys, don’t convert Unicode to ASCII
# if you wish a human-readable format, add `indent=4` to the options
# (which increases file size enormously!)
with open("geo-bayern-landkreise-new.geojson", "w") as outfile:
    json.dump(geojson, outfile, sort_keys=True, ensure_ascii=False)

# Done!
quit()

Now the relevant feature properties look like this:

            "properties": {
                "ADE": 4,
                …
                "BEZ": "Kreisfreie Stadt",
                …
                "GEN": "Ingolstadt",
                …
                "WSK": "1972/07/01",
                "destatis": {
                    "population": 136981,
                    "population_m": 69252,
                    "population_w": 67729
                },
                "name": "Kreisfreie Stadt Ingolstadt"
            },
            "type": "Feature"

We can see the name property has been added just as we wanted, and will now display when using this GeoJSON file within an Obsidian Leaflet map:

This principle can be applied to any GeoJSON data you might encounter—it’s only JSON data, after all, and can be easily processed.

Happy surveying!

[oyvindsolstad]

Can you do this for lines?

I plan to add all major interstates on a planning map I'm using, and even though I know them quite well, it could be useful to have the names on them. If so, where in the file?

The I-90 json file starts like this:

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "stroke": "#EA1B1B", "stroke-width": 3, "stroke-opacity": 0.5 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.32786, 47.59552 ], [ -122.32764, 47.59389 ],

[valentine195]

Yes - just add a title, name, or description field inside properties. The plugin will use whatever is in those fields for the tooltip, and will look for them in that order.

[Moonbase59]

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "stroke": "#EA1B1B", "stroke-width": 3, "stroke-opacity": 0.5 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.32786, 47.59552 ], [ -122.32764, 47.59389 ],

So that would make it (to give you a start):

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "name": "I-90", "stroke": "#EA1B1B", "stroke-width": 3, "stroke-opacity": 0.5 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.32786, 47.59552 ], [ -122.32764, 47.59389 ], …

[Moonbase59]

@oyvindsolstad: Here’s also a (made-readable) example for the U.S. Route 66 that shows how to separate a route into labelled sub-routes. (When finished playing around with it, I recommend compressing it again using above Python command. I created it from the original using indent=2.)

geo-usa-route66-edit.geojson.zip
(CC-BY 4.0, taken from https://commons.wikimedia.org/wiki/Data:U.S._Route_66.map)

[oyvindsolstad]

Thank you @valentine195 and @Moonbase59!

That worked flawlessly!

Now I just need to find geodata for all the major interstates. Wikipedia is a bit of a mess, and some (like I-40) have maps but when you click on the files generating the maps, they are not there. Weird.

[Moonbase59]

Added stroke-width: 3 to the "Route 66" file, because with a default stroke width of 2 it was a little hard to click on the parts of the route. Uncompressed (indent=2) version:

geo-usa-route66-edit2.geojson.zip

We have to experiment, maybe even go up to 4. And I see you already used it, hee hee. 😁

[zhubib1234]

Is offline map supported?

[Moonbase59]

@zhubib1234 No offence, but you will have to learn some things. It’s not all "grab and run" … All information is here, in the docs, and can easily be googled.

[zhubib1234]

To use "geo USA Route66 edit. Geojson" directly? Do you want to change the suffix? Change to. JSON?

[valentine195]

If you download the file, you can put it in your vault and wikilink to it.

```leaflet
geojson: [[geojson file]]
```

[Moonbase59]

Actually, I wouldn’t change the suffix. You can, but usually you wouldn’t need to. There are applications that can handle .geojson, and actually expect that suffix (at least on Linux).

The .geojson suffix is also practical in GitHub repositories—GitHub knows how to show maps from these.

[zhubib1234]

I'll try again.