Visor de mapas JSON: muestra coordenadas de un JSON en un mapa

Qué hace este visor

Muchos datos de ubicación nunca llegan como archivo SIG. Llegan como JSON normal: la respuesta de una API del tiempo, una lista de tiendas de un localizador, una exportación de una app de reparto o un archivo que te manda un desarrollador. Cada registro tiene una latitud y una longitud en algún sitio, pero una herramienta de mapas que espera GeoJSON no puede leerlo, y al abrirlo en una hoja de cálculo se pierde la estructura anidada.

Este visor lee ese JSON tal como es. Recorre todo el documento buscando listas de registros, convierte los objetos anidados en nombres de campo como `location.lat` y reconoce los nombres habituales de latitud y longitud, además de campos únicos que guardan los dos valores, como arrays `[lng, lat]` o textos `"lat, lng"`. Cada registro con coordenadas válidas aparece en el mapa. La barra lateral te dice cuántos registros no tenían coordenadas o tenían valores fuera del rango válido, y te avisa cuando la latitud y la longitud parecen intercambiadas.

Lo hice para ese momento en que alguien te manda un JSON y te pregunta «¿dónde están estos?». Puedes revisar los datos en segundos, colorear los puntos por cualquier campo, hacer clic en un punto para leer el registro completo y descargar el resultado como GeoJSON para un SIG o como CSV para una hoja de cálculo. El archivo se lee en tu navegador y nunca se sube.

Formas de JSON que entiende el visor

El JSON real tiene muchas formas. Estas son las que el visor lee sin ninguna configuración. En cada caso muestra la lista de registros que encontró, y puedes elegir otra si el archivo tiene varias.

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

También se leen los números guardados como texto, como "52.52", y los números con coma decimal, como "52,52". Los arrays dentro de un registro, como una lista de etiquetas, se conservan como texto JSON en la ventana emergente y en la exportación.

Qué nombres de campo se reconocen

El visor compara la última parte de cada nombre de campo, así que `lat`, `location.lat` y `data.geo.lat` cuentan todos. No distingue mayúsculas de minúsculas. Si nada coincide, eliges los campos tú en el panel Coordinates.

Latitud

lat, latitude, lat_dd, y, ycoord, point_y, decimalLatitude, gps_lat, geo_lat y formas parecidas.

Longitud

lng, lon, long, longitude, lon_dd, x, xcoord, point_x, decimalLongitude, gps_lon, geo_lng y formas parecidas.

Un campo con ambos

Nombres que terminan en coordinates, coords, position, latlng, lnglat, location, geo, point, center o gps, cuando el valor es un array de dos números o un texto "a, b".

Elegir entre candidatos

Cada posible par de latitud y longitud se prueba con los primeros 300 registros. Gana el par con más valores dentro de ±90 y ±180, un par con el mismo objeto padre recibe un extra, y x/y pierden los empates frente a nombres lat/lng reales.

Orden de un par

lnglat, lonlat y coordinates significan longitud primero. latlng y latlon significan latitud primero. Con otros nombres gana el orden con más valores válidos. Si ambos encajan, los arrays se leen como [lng, lat] y los textos como "lat, lng".

Detalles técnicos

Esto es exactamente lo que el visor acepta y produce.

Entrada

Archivos .json, .jsonl y .ndjson de hasta 50 MB, o JSON pegado en el cuadro Paste JSON.

No para GeoJSON ni TopoJSON

Si el archivo ya es GeoJSON ("type": "FeatureCollection") o TopoJSON ("type": "Topology"), recibes un mensaje que te lleva al Visor de GeoJSON o al Visor de TopoJSON de este sitio.

Listas de registros

Arrays en los que al menos la mitad de los elementos son objetos, a cualquier profundidad hasta 8 niveles, y objetos cuyos valores son todos registros. Primero aparecen las listas con coordenadas y después las más grandes.

Coordenadas válidas

Latitud entre −90 y 90, longitud entre −180 y 180, en grados decimales (WGS84). Los registros fuera de estos rangos se cuentan y no se dibujan.

Aviso de intercambio

Si un registro está fuera de rango pero sería válido con la latitud y la longitud intercambiadas, el visor lo cuenta y ofrece un botón Swap.

Colorear por campo

Cualquier campo con hasta 10 valores distintos puede colorear los puntos, con una leyenda y un recuento por valor.

Rendimiento

Los puntos se dibujan en un canvas, así que decenas de miles de registros se mueven con fluidez en un portátil normal.

Exportación

GeoJSON con cada campo como propiedad, o CSV con latitude y longitude como las dos primeras columnas y los campos aplanados después.

Privacidad

El archivo se lee en tu navegador. Solo las teselas del mapa base vienen de internet.

Cómo poner JSON en un mapa, paso a paso

Este es el flujo completo con el ejemplo incluido: 25 ciudades europeas dentro de una respuesta anidada al estilo de una API, con las coordenadas en un objeto `location` y un registro sin ubicación.

1

Paso 1: Abre el visor

El mapa se abre con un mapa base de calles. Usa Upload, Paste JSON o arrastra un archivo al mapa. Aquí hice clic en Sample Data.

2

Paso 2: Revisa lo que encontró

El panel Records muestra la lista elegida (`data.cities`), cuántos registros están en el mapa y cuántos no tenían coordenadas. En el ejemplo, un registro tiene `"location": null`, así que se muestran 24 de 25.

3

Paso 3: Confirma los campos de coordenadas

El panel Coordinates muestra los campos detectados, aquí `location.lat` y `location.lng`. Cambia a «One field» para datos con un solo campo `[lng, lat]` o `"lat, lng"`, y usa Swap si los puntos caen en el lugar equivocado.

4

Paso 4: Colorea los puntos por un campo

Elige un campo en «Color by field». Aquí `capital` separa las capitales de las demás ciudades, con una leyenda y un recuento por valor.

5

Paso 5: Lee un registro

Haz clic en cualquier punto para ver sus coordenadas exactas y todos los campos del registro, incluidos los valores anidados y los arrays.

6

Paso 6: Exporta

Descarga los puntos como GeoJSON para QGIS, ArcGIS o un mapa web, o como CSV para Excel y Hojas de cálculo de Google.

Otras formas de llevar datos JSON a un mapa

Este visor es la forma más rápida de mirar un archivo JSON. Cuando necesitas la misma tarea dentro de un flujo de trabajo, uso estas herramientas.

La misma tarea en código

Los tres ejemplos leen el archivo de ejemplo de arriba, omiten el registro sin ubicación y conservan los demás campos.

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

Mi opinión: usa este visor para entender un JSON nuevo y revisar sus coordenadas. Cuando conozcas la estructura, unas pocas líneas de Python o jq lo convierten en GeoJSON cada vez que cambien los datos.

Cómo funciona el visor

Esto es lo que ocurre entre soltar un archivo y ver los puntos. Cada paso se ejecuta en tu navegador.

1. Analizar el texto. El texto se analiza como JSON. Si falla y el archivo tiene varias líneas, cada línea se analiza como JSON Lines. Se elimina la marca de orden de bytes del principio, si existe.
2. Rechazar archivos que tienen su propio visor. GeoJSON y TopoJSON se reconocen por su type y se envían al visor correspondiente de este sitio, porque ya contienen geometría real.
3. Encontrar las listas de registros. El visor recorre el documento hasta 8 niveles de profundidad y reúne cada array que sea sobre todo de objetos, y cada objeto cuyos valores sean todos registros. Cada registro se aplana en rutas con punto.
4. Detectar las coordenadas. Los nombres de campo se comparan con las listas de arriba. Cada par candidato se prueba con hasta 300 registros, y gana el par con más valores válidos. Si ningún par encaja, se prueban campos únicos con dos números.
5. Crear los puntos. Cada registro se lee con los campos elegidos. Los números en texto se convierten, los valores fuera de ±90 / ±180 se cuentan y se omiten, y los registros que encajarían intercambiados se cuentan aparte.
6. Dibujar, colorear y exportar. Los puntos se dibujan en una capa canvas y el mapa hace zoom a ellos. Si cambias un campo, el orden o el color, el mapa se redibuja al momento. Las exportaciones usan justo los registros que ves.

La detección solo es una primera propuesta. Cada elección se puede cambiar en la barra lateral y el mapa se actualiza en cuanto la cambias, así que una propuesta equivocada cuesta un clic.

Revisar coordenadas: rangos, intercambios y precisión

Un par de latitud y longitud son solo dos números. Estas tres comprobaciones te dicen si los números tienen sentido.

válido  ⇔  −90 ≤ latitud ≤ 90   y   −180 ≤ longitud ≤ 180

latitud 91.2, longitud 10.5   →  no válido (latitud demasiado grande)

guardado:      lat = 151.21,  lng = −33.87   →  no válido
intercambiado: lat = −33.87,  lng = 151.21   →  válido (Sídney)

1° latitud  ≈ 111 320 m
1° longitud ≈ 111 320 m · cos(latitud)

decimales   paso en latitud   paso en longitud en Berlín (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

Cuándo ayuda este visor

Estas son las situaciones en las que recurro a un visor de mapas JSON.

1. Revisar la respuesta de una API. Pega la respuesta de una API del tiempo, de transporte o de un localizador de tiendas y comprueba al momento si las ubicaciones tienen sentido, antes de escribir código de mapas.
2. Revisar la exportación de una app o base de datos. Las apps de reparto, los CRM y las plataformas IoT suelen exportar JSON. Pon la exportación en el mapa para encontrar registros con coordenadas que faltan o están mal.
3. Convertir JSON a GeoJSON o CSV. Obtén un archivo GeoJSON para QGIS o ArcGIS, o un CSV para Excel, sin escribir ningún script.
4. Encontrar coordenadas intercambiadas. El aviso y el mapa hacen fácil ver el error clásico en el que la latitud y la longitud cambian de sitio en algún punto de un proceso.
5. Explorar portales de datos abiertos. Muchos portales de datos abiertos ofrecen JSON junto a CSV. El JSON suele conservar detalles anidados que el CSV pierde, y puedes ponerlo en el mapa directamente.
6. Agrupar puntos por un campo. Colorea por estado, categoría o tipo para ver patrones, por ejemplo qué estaciones están desconectadas o qué tiendas abren el domingo.
7. Depurar código de mapas. Si tu propio mapa muestra puntos en el lugar equivocado, carga aquí el mismo JSON. Si aquí los puntos están bien, el error está en tu código, a menudo una confusión entre [lat, lng] y [lng, lat].
8. Enseñar JSON y coordenadas. Los estudiantes pueden pegar pequeños ejemplos de JSON y ver cómo el anidamiento, los nombres de campo y el orden de las coordenadas cambian el resultado en el mapa.

Preguntas frecuentes

Bibliotecas y créditos

La lectura del JSON y la detección de coordenadas se escribieron para este sitio. El mapa se basa en software de código abierto.

• Leaflet 1.9 · BSD-2-Clause · Volodymyr Agafonkin and contributors
  Dibuja el mapa interactivo, la capa de puntos en canvas y las ventanas emergentes.
• OpenStreetMap, Protomaps (hosted by KONAKTIVE), CARTO, Esri World Imagery · ODbL y condiciones del proveedor · OpenStreetMap contributors, Protomaps, KONAKTIVE, CARTO, Esri
  Teselas e imágenes del mapa base.

Herramientas relacionadas