JSON-Karten-Viewer: JSON-Koordinaten auf einer Karte zeigen

Was dieser Viewer macht

Viele Ortsdaten kommen nie als GIS-Datei an. Sie kommen als normales JSON: die Antwort einer Wetter-API, eine Filialliste aus einem Store-Locator, ein Export aus einer Liefer-App oder eine Datei, die Ihnen ein Entwickler schickt. Jeder Datensatz hat irgendwo einen Breiten- und einen Längengrad, aber ein Kartenprogramm, das GeoJSON erwartet, kann ihn nicht lesen, und in einer Tabellenkalkulation geht die verschachtelte Struktur verloren.

Dieser Viewer liest das JSON so, wie es ist. Er durchsucht das ganze Dokument nach Listen von Datensätzen, macht aus verschachtelten Objekten Feldnamen wie `location.lat` und erkennt die üblichen Namen für Breite und Länge, außerdem einzelne Felder mit beiden Werten, etwa Arrays `[lng, lat]` oder Texte `"lat, lng"`. Jeder Datensatz mit gültigen Koordinaten erscheint auf der Karte. Die Seitenleiste zeigt, wie viele Datensätze keine Koordinaten oder Werte außerhalb des gültigen Bereichs hatten, und warnt Sie, wenn Breite und Länge vertauscht aussehen.

Ich habe ihn für den Moment gebaut, in dem Ihnen jemand eine JSON-Datei schickt und fragt: „Wo liegen die?“. Sie prüfen die Daten in Sekunden, färben die Punkte nach einem beliebigen Feld, klicken auf einen Punkt, um den ganzen Datensatz zu lesen, und laden das Ergebnis als GeoJSON für ein GIS oder als CSV für eine Tabelle herunter. Die Datei wird in Ihrem Browser gelesen und nie hochgeladen.

Welche JSON-Formen der Viewer versteht

Echtes JSON hat viele Formen. Diese liest der Viewer ohne jede Einstellung. In jedem Fall zeigt er die gefundene Liste der Datensätze, und wenn die Datei mehrere hat, können Sie eine andere wählen.

[{ "name": "Berlin", "lat": 52.52, "lng": 13.405 }]

{ "data": { "cities": [{ "name": "Paris", "latitude": 48.8566, "longitude": 2.3522 }] } }

[{ "name": "Rome", "location": { "lat": 41.9028, "lon": 12.4964 } }]

[{ "id": 7, "coordinates": [2.1686, 41.3874] }]

[{ "stop": "Central", "latlng": "59.3293, 18.0686" }]

{ "BER": { "lat": 52.52, "lng": 13.405 }, "PAR": { "lat": 48.86, "lng": 2.35 } }

{"lat": 38.72, "lng": -9.14}
{"lat": 41.16, "lng": -8.63}

Zahlen als Text, etwa "52.52", und Zahlen mit Komma als Dezimalzeichen, etwa "52,52", werden ebenfalls gelesen. Arrays in einem Datensatz, etwa eine Liste von Schlagwörtern, bleiben im Popup und im Export als JSON-Text erhalten.

Welche Feldnamen erkannt werden

Der Viewer vergleicht den letzten Teil jedes Feldnamens, `lat`, `location.lat` und `data.geo.lat` zählen also alle. Groß- und Kleinschreibung spielt keine Rolle. Passt nichts, wählen Sie die Felder selbst im Bereich Coordinates.

Breite

lat, latitude, lat_dd, y, ycoord, point_y, decimalLatitude, gps_lat, geo_lat und ähnliche Formen.

Länge

lng, lon, long, longitude, lon_dd, x, xcoord, point_x, decimalLongitude, gps_lon, geo_lng und ähnliche Formen.

Ein Feld mit beiden

Namen, die auf coordinates, coords, position, latlng, lnglat, location, geo, point, center oder gps enden, wenn der Wert ein Array aus zwei Zahlen oder ein Text "a, b" ist.

Wahl zwischen Kandidaten

Jedes mögliche Paar aus Breite und Länge wird an den ersten 300 Datensätzen getestet. Das Paar mit den meisten Werten innerhalb von ±90 und ±180 gewinnt, ein Paar mit demselben Elternobjekt erhält einen Bonus, und x/y verlieren bei Gleichstand gegen echte lat/lng-Namen.

Reihenfolge eines Paares

lnglat, lonlat und coordinates bedeuten Länge zuerst. latlng und latlon bedeuten Breite zuerst. Bei anderen Namen gewinnt die Reihenfolge mit mehr gültigen Werten. Passen beide, werden Arrays als [lng, lat] und Texte als "lat, lng" gelesen.

Technische Details

Genau das nimmt der Viewer an und erzeugt er.

Eingabe

.json-, .jsonl- und .ndjson-Dateien bis 50 MB oder JSON, das Sie in das Feld Paste JSON einfügen.

Nicht für GeoJSON oder TopoJSON

Ist die Datei schon GeoJSON ("type": "FeatureCollection") oder TopoJSON ("type": "Topology"), erscheint ein Hinweis auf den GeoJSON-Viewer oder den TopoJSON-Viewer dieser Website.

Listen von Datensätzen

Arrays, in denen mindestens die Hälfte der Einträge Objekte sind, in jeder Tiefe bis 8 Ebenen, dazu Objekte, deren Werte alle Datensätze sind. Listen mit Koordinaten stehen zuerst, danach die größeren.

Gültige Koordinaten

Breite zwischen −90 und 90, Länge zwischen −180 und 180, in Dezimalgrad (WGS84). Datensätze außerhalb dieser Bereiche werden gezählt und nicht gezeichnet.

Warnung bei Vertauschung

Liegt ein Datensatz außerhalb des Bereichs, wäre aber mit vertauschter Breite und Länge gültig, zählt der Viewer ihn und bietet einen Swap-Button an.

Färben nach Feld

Jedes Feld mit bis zu 10 verschiedenen Werten kann die Punkte färben, mit Legende und Anzahl pro Wert.

Leistung

Die Punkte werden auf einem Canvas gezeichnet, daher bleiben Zehntausende Datensätze auf einem normalen Laptop flüssig.

Export

GeoJSON mit jedem Feld als Eigenschaft, oder CSV mit latitude und longitude als ersten beiden Spalten und den aufgelösten Feldern danach.

Datenschutz

Die Datei wird in Ihrem Browser gelesen. Nur die Kacheln der Basiskarte kommen aus dem Internet.

So bringen Sie JSON auf eine Karte, Schritt für Schritt

Hier ist der ganze Ablauf mit dem eingebauten Beispiel: 25 europäische Städte in einer verschachtelten Antwort im API-Stil, mit den Koordinaten in einem Objekt `location` und einem Datensatz ohne Ort.

1

Schritt 1: Viewer öffnen

Die Karte öffnet sich mit einer Straßenkarte. Nutzen Sie Upload, Paste JSON oder ziehen Sie eine Datei auf die Karte. Hier habe ich auf Sample Data geklickt.

2

Schritt 2: Prüfen, was gefunden wurde

Der Bereich Records zeigt die gewählte Liste (`data.cities`), wie viele Datensätze auf der Karte sind und wie viele keine Koordinaten hatten. Im Beispiel hat ein Datensatz `"location": null`, daher erscheinen 24 von 25.

3

Schritt 3: Koordinatenfelder bestätigen

Der Bereich Coordinates zeigt die erkannten Felder, hier `location.lat` und `location.lng`. Wechseln Sie zu „One field“ für Daten mit einem einzigen Feld `[lng, lat]` oder `"lat, lng"`, und nutzen Sie Swap, wenn die Punkte an der falschen Stelle liegen.

4

Schritt 4: Punkte nach einem Feld färben

Wählen Sie unter „Color by field“ ein Feld. Hier teilt `capital` die Städte in Hauptstädte und andere Städte, mit Legende und Anzahl pro Wert.

5

Schritt 5: Einen Datensatz lesen

Klicken Sie auf einen Punkt, um die genauen Koordinaten und jedes Feld des Datensatzes zu sehen, auch verschachtelte Werte und Arrays.

6

Schritt 6: Exportieren

Laden Sie die Punkte als GeoJSON für QGIS, ArcGIS oder eine Webkarte herunter, oder als CSV für Excel und Google Tabellen.

Andere Wege, JSON-Daten auf eine Karte zu bringen

Dieser Viewer ist der schnellste Weg, eine JSON-Datei anzusehen. Wenn Sie dieselbe Aufgabe in einem Arbeitsablauf brauchen, nutze ich diese Werkzeuge.

Dieselbe Aufgabe im Code

Alle drei Beispiele lesen die oben genutzte Beispieldatei, überspringen den Datensatz ohne Ort und behalten die übrigen Felder.

# Python: pandas flattens nested JSON, GeoPandas builds the points
import json
import pandas as pd
import geopandas as gpd

with open("cities.json") as f:
    data = json.load(f)

df = pd.json_normalize(data["data"]["cities"])   # columns: location.lat, location.lng
df = df.dropna(subset=["location.lat", "location.lng"])
gdf = gpd.GeoDataFrame(
    df, geometry=gpd.points_from_xy(df["location.lng"], df["location.lat"]), crs="EPSG:4326"
)
gdf.to_file("cities.geojson", driver="GeoJSON")

# jq on the command line: JSON records to a GeoJSON FeatureCollection
jq '{type: "FeatureCollection", features: [
      .data.cities[] | select(.location != null) | {
        type: "Feature",
        properties: del(.location),
        geometry: { type: "Point", coordinates: [.location.lng, .location.lat] }
      }]}' cities.json > cities.geojson

// JavaScript + Leaflet: note the order, Leaflet wants [lat, lng]
const res = await fetch("cities.json");
const json = await res.json();
for (const c of json.data.cities) {
  if (!c.location) continue;
  L.marker([c.location.lat, c.location.lng]).bindPopup(c.name).addTo(map);
}

Meine Meinung: Nutzen Sie diesen Viewer, um eine neue JSON-Datei zu verstehen und ihre Koordinaten zu prüfen. Sobald Sie die Struktur kennen, machen ein paar Zeilen Python oder jq bei jeder Datenänderung GeoJSON daraus.

So arbeitet der Viewer

Das passiert zwischen dem Ablegen einer Datei und den Punkten auf der Karte. Jeder Schritt läuft in Ihrem Browser.

1. Text parsen. Der Text wird als JSON geparst. Klappt das nicht und hat die Datei mehrere Zeilen, wird jede Zeile als JSON Lines geparst. Eine Byte-Order-Mark am Anfang wird entfernt.
2. Dateien mit eigenem Viewer abweisen. GeoJSON und TopoJSON werden an ihrem type erkannt und an den passenden Viewer dieser Website verwiesen, weil sie schon echte Geometrie enthalten.
3. Listen von Datensätzen finden. Der Viewer durchläuft das Dokument bis 8 Ebenen tief und sammelt jedes Array, das überwiegend aus Objekten besteht, und jedes Objekt, dessen Werte alle Datensätze sind. Jeder Datensatz wird in Punktpfade aufgelöst.
4. Koordinaten erkennen. Die Feldnamen werden mit den Listen oben verglichen. Jedes mögliche Paar wird an bis zu 300 Datensätzen getestet, das Paar mit den meisten gültigen Werten gewinnt. Passt kein Paar, werden einzelne Felder mit zwei Zahlen versucht.
5. Punkte bauen. Jeder Datensatz wird mit den gewählten Feldern gelesen. Zahlen als Text werden umgewandelt, Werte außerhalb von ±90 / ±180 gezählt und übersprungen, und Datensätze, die vertauscht passen würden, werden extra gezählt.
6. Zeichnen, färben und exportieren. Die Punkte werden auf einer Canvas-Ebene gezeichnet, und die Karte zoomt auf sie. Ändern Sie ein Feld, die Reihenfolge oder die Farbe, wird die Karte sofort neu gezeichnet. Die Exporte nutzen genau die Datensätze, die Sie sehen.

Die Erkennung ist nur ein erster Vorschlag. Jede Wahl lässt sich in der Seitenleiste ändern, und die Karte aktualisiert sich sofort. Ein falscher Vorschlag kostet also nur einen Klick.

Koordinaten prüfen: Bereiche, Vertauschung und Genauigkeit

Ein Paar aus Breite und Länge sind nur zwei Zahlen. Diese drei Prüfungen zeigen, ob die Zahlen sinnvoll sind.

gültig  ⇔  −90 ≤ Breite ≤ 90   und   −180 ≤ Länge ≤ 180

Breite 91.2, Länge 10.5   →  ungültig (Breite zu groß)

gespeichert:  Breite = 151.21,  Länge = −33.87   →  ungültig
vertauscht:   Breite = −33.87,  Länge = 151.21   →  gültig (Sydney)

1° Breite ≈ 111 320 m
1° Länge  ≈ 111 320 m · cos(Breite)

Stellen   Schritt Breite   Schritt Länge in Berlin (52.52°)
1         11.1 km          6.8 km
2         1.1 km           680 m
3         111 m            68 m
4         11.1 m           6.8 m
5         1.1 m            0.68 m
6         0.11 m           0.07 m

Wann dieser Viewer hilft

In diesen Situationen greife ich zu einem JSON-Karten-Viewer.

1. Eine API-Antwort prüfen. Fügen Sie die Antwort einer Wetter-, Verkehrs- oder Store-Locator-API ein und sehen Sie sofort, ob die Orte stimmen, bevor Sie Kartencode schreiben.
2. Einen App- oder Datenbank-Export prüfen. Liefer-Apps, CRMs und IoT-Plattformen exportieren oft JSON. Zeigen Sie den Export auf der Karte, um Datensätze mit fehlenden oder falschen Koordinaten zu finden.
3. JSON in GeoJSON oder CSV umwandeln. Erhalten Sie eine GeoJSON-Datei für QGIS oder ArcGIS oder eine CSV für Excel, ohne ein Skript zu schreiben.
4. Vertauschte Koordinaten finden. Die Warnung und die Karte machen den klassischen Fehler leicht sichtbar, bei dem Breite und Länge irgendwo in einer Verarbeitungskette die Plätze tauschen.
5. Open-Data-Portale erkunden. Viele Open-Data-Portale bieten JSON neben CSV an. Das JSON behält oft verschachtelte Details, die in der CSV fehlen, und Sie können es direkt auf die Karte bringen.
6. Punkte nach einem Feld gruppieren. Färben Sie nach Status, Kategorie oder Typ, um Muster zu sehen, etwa welche Stationen offline sind oder welche Läden sonntags öffnen.
7. Kartencode debuggen. Zeigt Ihre eigene Karte Punkte an der falschen Stelle, laden Sie dasselbe JSON hier. Stimmen die Punkte hier, liegt der Fehler in Ihrem Code, oft eine Verwechslung von [lat, lng] und [lng, lat].
8. JSON und Koordinaten unterrichten. Lernende können kleine JSON-Beispiele einfügen und sehen, wie Verschachtelung, Feldnamen und Reihenfolge der Koordinaten das Ergebnis auf der Karte verändern.

Häufig gestellte Fragen

Bibliotheken und Danksagung

Das Lesen des JSON und die Erkennung der Koordinaten wurden für diese Website geschrieben. Die Karte baut auf Open-Source-Software auf.

• Leaflet 1.9 · BSD-2-Clause · Volodymyr Agafonkin and contributors
  Zeichnet die interaktive Karte, die Canvas-Punktebene und die Popups.
• OpenStreetMap, Protomaps (hosted by KONAKTIVE), CARTO, Esri World Imagery · ODbL und Nutzungsbedingungen des Anbieters · OpenStreetMap contributors, Protomaps, KONAKTIVE, CARTO, Esri
  Kacheln und Luftbilder der Basiskarte.

Verwandte Werkzeuge