Visionneuse de carte JSON : afficher les coordonnées d'un JSON sur une carte

Ce que fait cette visionneuse

Beaucoup de données de localisation n'arrivent jamais sous forme de fichier SIG. Elles arrivent en JSON ordinaire : la réponse d'une API météo, une liste de magasins d'un localisateur, un export d'une application de livraison ou un fichier envoyé par un développeur. Chaque enregistrement a une latitude et une longitude quelque part, mais un outil de cartographie qui attend du GeoJSON ne sait pas le lire, et l'ouvrir dans un tableur fait perdre la structure imbriquée.

Cette visionneuse lit ce JSON tel quel. Elle parcourt tout le document à la recherche de listes d'enregistrements, transforme les objets imbriqués en noms de champs comme `location.lat`, et reconnaît les noms habituels de latitude et de longitude, ainsi que les champs uniques qui contiennent les deux valeurs, comme des tableaux `[lng, lat]` ou des textes `"lat, lng"`. Chaque enregistrement aux coordonnées valides apparaît sur la carte. Le panneau latéral indique combien d'enregistrements n'avaient pas de coordonnées ou des valeurs hors limites, et vous prévient quand latitude et longitude semblent inversées.

Je l'ai créée pour le moment où quelqu'un vous envoie un fichier JSON en demandant « où sont-ils ? ». Vous vérifiez les données en quelques secondes, colorez les points selon n'importe quel champ, cliquez sur un point pour lire tout l'enregistrement, et téléchargez le résultat en GeoJSON pour un SIG ou en CSV pour un tableur. Le fichier est lu dans votre navigateur et n'est jamais envoyé.

Les formes de JSON que la visionneuse comprend

Le JSON réel prend beaucoup de formes. Voici celles que la visionneuse lit sans aucun réglage. Dans chaque cas, elle affiche la liste d'enregistrements trouvée, et vous pouvez en choisir une autre si le fichier en contient plusieurs.

[{ "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}

Les nombres stockés en texte, comme "52.52", et les nombres avec une virgule décimale, comme "52,52", sont lus aussi. Les tableaux à l'intérieur d'un enregistrement, comme une liste de mots-clés, restent en texte JSON dans la fenêtre et dans l'export.

Quels noms de champs sont reconnus

La visionneuse compare la dernière partie de chaque nom de champ, donc `lat`, `location.lat` et `data.geo.lat` comptent tous. Les majuscules et minuscules ne comptent pas. Si rien ne correspond, vous choisissez les champs vous-même dans le panneau Coordinates.

Latitude

lat, latitude, lat_dd, y, ycoord, point_y, decimalLatitude, gps_lat, geo_lat et formes voisines.

Longitude

lng, lon, long, longitude, lon_dd, x, xcoord, point_x, decimalLongitude, gps_lon, geo_lng et formes voisines.

Un champ avec les deux

Noms se terminant par coordinates, coords, position, latlng, lnglat, location, geo, point, center ou gps, quand la valeur est un tableau de deux nombres ou un texte "a, b".

Choix entre candidats

Chaque paire possible de latitude et de longitude est testée sur les 300 premiers enregistrements. La paire avec le plus de valeurs dans ±90 et ±180 gagne, une paire de même parent reçoit un bonus, et x/y perdent les égalités face à de vrais noms lat/lng.

Ordre d'une paire

lnglat, lonlat et coordinates veulent dire longitude d'abord. latlng et latlon veulent dire latitude d'abord. Pour d'autres noms, l'ordre avec le plus de valeurs valides gagne. Si les deux conviennent, les tableaux sont lus en [lng, lat] et les textes en "lat, lng".

Détails techniques

Voici exactement ce que la visionneuse accepte et produit.

Entrée

Fichiers .json, .jsonl et .ndjson jusqu'à 50 Mo, ou JSON collé dans la zone Paste JSON.

Pas pour GeoJSON ni TopoJSON

Si le fichier est déjà du GeoJSON ("type": "FeatureCollection") ou du TopoJSON ("type": "Topology"), un message vous renvoie vers la Visionneuse GeoJSON ou la Visionneuse TopoJSON de ce site.

Listes d'enregistrements

Tableaux dont au moins la moitié des éléments sont des objets, à toute profondeur jusqu'à 8 niveaux, plus les objets dont toutes les valeurs sont des enregistrements. Les listes avec coordonnées viennent d'abord, puis les plus grandes.

Coordonnées valides

Latitude entre −90 et 90, longitude entre −180 et 180, en degrés décimaux (WGS84). Les enregistrements hors de ces plages sont comptés et ne sont pas dessinés.

Alerte d'inversion

Si un enregistrement est hors limites mais serait valide avec latitude et longitude inversées, la visionneuse le compte et propose un bouton Swap.

Couleur par champ

Tout champ avec au plus 10 valeurs différentes peut colorer les points, avec une légende et un compte par valeur.

Performances

Les points sont dessinés sur un canvas, donc des dizaines de milliers d'enregistrements restent fluides sur un ordinateur portable ordinaire.

Export

GeoJSON avec chaque champ en propriété, ou CSV avec latitude et longitude en deux premières colonnes, suivies des champs aplatis.

Confidentialité

Le fichier est lu dans votre navigateur. Seules les tuiles du fond de carte viennent d'internet.

Comment mettre du JSON sur une carte, étape par étape

Voici tout le déroulé avec l'exemple intégré : 25 villes européennes dans une réponse imbriquée de style API, avec les coordonnées dans un objet `location` et un enregistrement sans position.

1

Étape 1: Ouvrir la visionneuse

La carte s'ouvre avec un fond routier. Utilisez Upload, Paste JSON ou glissez un fichier sur la carte. Ici, j'ai cliqué sur Sample Data.

2

Étape 2: Vérifier ce qui a été trouvé

Le panneau Records montre la liste choisie (`data.cities`), combien d'enregistrements sont sur la carte et combien n'avaient pas de coordonnées. Dans l'exemple, un enregistrement a `"location": null`, donc 24 sur 25 sont affichés.

3

Étape 3: Confirmer les champs de coordonnées

Le panneau Coordinates montre les champs détectés, ici `location.lat` et `location.lng`. Passez à « One field » pour des données avec un seul champ `[lng, lat]` ou `"lat, lng"`, et utilisez Swap si les points tombent au mauvais endroit.

4

Étape 4: Colorer les points selon un champ

Choisissez un champ sous « Color by field ». Ici, `capital` sépare les capitales des autres villes, avec une légende et un compte par valeur.

5

Étape 5: Lire un enregistrement

Cliquez sur un point pour voir ses coordonnées exactes et tous les champs de l'enregistrement, y compris les valeurs imbriquées et les tableaux.

6

Étape 6: Exporter

Téléchargez les points en GeoJSON pour QGIS, ArcGIS ou une carte web, ou en CSV pour Excel et Google Sheets.

Autres façons de mettre des données JSON sur une carte

Cette visionneuse est le moyen le plus rapide de regarder un fichier JSON. Quand il faut faire le même travail dans une chaîne de traitement, voici les outils que j'utilise.

Le même travail en code

Les trois exemples lisent le fichier d'exemple utilisé plus haut, ignorent l'enregistrement sans position et gardent les autres champs.

# 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);
}

Mon avis : utilisez cette visionneuse pour comprendre un nouveau fichier JSON et vérifier ses coordonnées. Une fois la structure connue, quelques lignes de Python ou de jq le transforment en GeoJSON à chaque mise à jour des données.

Comment fonctionne la visionneuse

Voici ce qui se passe entre le dépôt d'un fichier et l'affichage des points. Chaque étape se déroule dans votre navigateur.

1. Analyser le texte. Le texte est analysé comme du JSON. Si cela échoue et que le fichier a plusieurs lignes, chaque ligne est analysée en JSON Lines. Une marque d'ordre des octets au début est retirée.
2. Refuser les fichiers qui ont leur propre visionneuse. Le GeoJSON et le TopoJSON sont reconnus par leur type et renvoyés vers la visionneuse adaptée de ce site, car ils contiennent déjà une vraie géométrie.
3. Trouver les listes d'enregistrements. La visionneuse parcourt le document jusqu'à 8 niveaux de profondeur et rassemble chaque tableau composé surtout d'objets, ainsi que chaque objet dont toutes les valeurs sont des enregistrements. Chaque enregistrement est aplati en chemins pointés.
4. Détecter les coordonnées. Les noms de champs sont comparés aux listes ci-dessus. Chaque paire candidate est testée sur 300 enregistrements au plus, et la paire avec le plus de valeurs valides gagne. Si aucune paire ne convient, les champs uniques à deux nombres sont essayés.
5. Construire les points. Chaque enregistrement est lu avec les champs choisis. Les nombres en texte sont convertis, les valeurs hors de ±90 / ±180 sont comptées et ignorées, et les enregistrements qui conviendraient une fois inversés sont comptés à part.
6. Dessiner, colorer et exporter. Les points sont dessinés sur une couche canvas et la carte zoome dessus. Changer un champ, l'ordre ou la couleur redessine la carte aussitôt. Les exports utilisent exactement les enregistrements que vous voyez.

La détection n'est qu'une première proposition. Chaque choix se modifie dans le panneau latéral, et la carte se met à jour dès que vous le changez, donc une mauvaise proposition coûte un clic.

Vérifier les coordonnées : plages, inversions et précision

Une paire latitude/longitude, ce n'est que deux nombres. Ces trois vérifications vous disent si ces nombres ont un sens.

valide  ⇔  −90 ≤ latitude ≤ 90   et   −180 ≤ longitude ≤ 180

latitude 91.2, longitude 10.5   →  non valide (latitude trop grande)

stocké :   lat = 151.21,  lng = −33.87   →  non valide
inversé :  lat = −33.87,  lng = 151.21   →  valide (Sydney)

1° latitude  ≈ 111 320 m
1° longitude ≈ 111 320 m · cos(latitude)

décimales   pas en latitude   pas en longitude à 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

Quand cette visionneuse est utile

Voici les situations où j'utilise une visionneuse de carte JSON.

1. Vérifier une réponse d'API. Collez la réponse d'une API météo, de transport ou de localisation de magasins et voyez tout de suite si les positions ont un sens, avant d'écrire le moindre code de carte.
2. Contrôler un export d'application ou de base de données. Les applications de livraison, les CRM et les plateformes IoT exportent souvent du JSON. Affichez l'export sur une carte pour trouver les enregistrements aux coordonnées manquantes ou fausses.
3. Convertir du JSON en GeoJSON ou CSV. Obtenez un fichier GeoJSON pour QGIS ou ArcGIS, ou un CSV pour Excel, sans écrire de script.
4. Repérer des coordonnées inversées. L'alerte et la carte rendent facile à voir le bug classique où latitude et longitude échangent leur place quelque part dans une chaîne de traitement.
5. Explorer des portails open data. Beaucoup de portails open data proposent du JSON à côté du CSV. Le JSON garde souvent des détails imbriqués que le CSV perd, et vous pouvez le cartographier directement.
6. Regrouper des points par champ. Colorez par statut, catégorie ou type pour voir des tendances, par exemple quelles stations sont hors ligne ou quels magasins ouvrent le dimanche.
7. Déboguer du code de carte. Si votre propre carte affiche des points au mauvais endroit, chargez ici le même JSON. Si les points sont justes ici, le bug est dans votre code, souvent une confusion entre [lat, lng] et [lng, lat].
8. Enseigner le JSON et les coordonnées. Les élèves peuvent coller de petits exemples de JSON et voir comment l'imbrication, les noms de champs et l'ordre des coordonnées changent le résultat sur la carte.

Questions fréquentes

Bibliothèques et remerciements

La lecture du JSON et la détection des coordonnées ont été écrites pour ce site. La carte repose sur des logiciels open source.

• Leaflet 1.9 · BSD-2-Clause · Volodymyr Agafonkin and contributors
  Dessine la carte interactive, la couche de points en canvas et les fenêtres d'information.
• OpenStreetMap, Protomaps (hosted by KONAKTIVE), CARTO, Esri World Imagery · ODbL et conditions du fournisseur · OpenStreetMap contributors, Protomaps, KONAKTIVE, CARTO, Esri
  Tuiles et images du fond de carte.

Outils associés