Cómo crear un mapa web en Leaflet a partir de un GeoJSON

por

Leaflet es una librería JavaScript opensource para crear mapas interactivos en un entorno móvil. Algunas de las ventajas de la API de Leaflet son su sencillez y facilidad de uso, su soporte móvil o que es ampliable con plugins.

En la primera parte de este tutorial te enseñamos a crear un mapa web  de Leaflet se forma sencilla.

Si queremos crear un sencillo mapa web con Leaflet y utilizar nuestras propias capas en local, el primer paso es convertir nuestras capas a geoJSON.

Conversión de un archivo shapefile en GeoJSON

GeoJSON se está convirtiendo en un formato de datos muy popular entre muchas tecnologías y servicios GIS. ¿Por qué? es simple, ligero, sencillo. Además esta opción es más rápida que almacenar la capa en un servidor de datos GIS ya que podemos alojar el archivo geojson directamente en el servidor web.

Ahora vamos a trabajar con la capa en formato geoJSON. Utilizaremos una capa en formato SHP, por ejemplo countries.shp.

Para convertir un shapefile a geojson tenemos varias opciones:

1. Utilizar la librería open source  ogr2ogr que sirve para convertir datos vectoriales entre distintos formatos

2. Utilizar un conversor online:

3. Utilizar un cliente SIG como QGIS. Desde QGIS añadimos el SHP y a continuación guardaremos la capa en formato geoJSON. (Capa > Guardar como…)

Leaflet a partir de un GeoJSON

Guarda el nuevo archivo .geojson en el mismo directorio que las páginas HTML que estamos creando y cambia la extensión del archivo a «countries.js«. Es importante cambiar la extensión de .geojson a .js para que funcione.

Visualizando la capa GeoJSON en Leaflet

Ahora que hemos convertido el shapefile a JavaScript necesitamos asegurarnos de que Leaflet lo importará y reconocerá nuestros datos. Con un editor de texto, como el Notepad + +, abrimos el archivo countries.js y agregamos

var countries =

Justo antes del código ya existente del archivo, de tal forma que el contenido del archivo countries.js sea:

var countries = {"type":"FeatureCollection", ... }

Haciendo esto, estamos estableciendo que el contenido completo del archivo GeoJSON es igual a la variable countries.

Una vez que hemos creado un mapa sencillo con Leaflet llevaremos el archivo GeoJSON a nuestro documento HTML, incorporando la siguiente sentencia a la cabecera:

<script type="text/javascript" src="countries.js"></script>

Los objetos GeoJSON se importan al mapa a través de una capa de GeoJSON. Para crearla y añadirla un mapa, podemos usar el siguiente código:

L.geoJson(countries).addTo(map);

countries

Un poco de color

Ahora vamos a dar color a los países de acuerdo a su población. Utilizando los valores que recibimos de él, creamos una función que nos devuelve un color en función de la  población:

function getColor(d) {
return d > 100000000 ? '#800026' : 
d > 50000000 ? '#BD0026' : 
d > 20000000 ? '#E31A1C' : 
d > 10000000 ? '#FC4E2A' : 
d > 5000000 ? '#FD8D3C' : 
d > 2000000 ? '#FEB24C' : 
d > 1000000 ? '#FED976' : 
'#FFEDA0'; 
}

A continuación definimos otra función para nuestra capa GeoJSON de manera que fillColor dependerá de la propiedad feature.properties.POP_EST.

También ajustaremos la apariencia y añadimos un borde blanco con puntos discontinuos.

function style(feature) { 
return { 
fillColor: getColor(
feature.properties.POP_EST), 
weight: 2, 
opacity: 1, 
color: 'white', 
dashArray: '3', 
fillOpacity: 0.7 
}; 
}

Añadimos el estilo en la capa:

L.geoJson(countries, { style: style }).addTo(map);

Este sería el resultado:

Leaflet a partir de un GeoJSON

Interactuando con el mapa

Ahora vamos a añadir una funcionalidad: al hacer click sobre el mapa se abrirá una ventana emergente con el nombre del país.

El siguiente código usa la funcionalidad popup de Leaflet:

function popup(feature, layer) { 
if (feature.properties && feature.properties.NAME) 
{ 
layer.bindPopup(feature.properties.NAME); 
} 
}

Esta función comprueba que la parte propierties del GeoJSON existe, así como la propiedad del campo NAME, que es único para el archivo de datos.

  • La función layer.bindPopup construye la funcionalidad de clic en el mapa.

Por último añadimos la función que crea las ventanas emergentes. onEachFeature es una propiedad de L.geoJson que se puede pasar con una función:

geojson = L.geoJson(countries, { 
 style: style, onEachFeature: popup 
}) 
.addTo(map);

Leaflet a partir de un GeoJSON

Si quieres aprender a hacer visores como este apúntate ya a nuestro curso online Desarrollo de Aplicaciones web maping!

17 comentarios en «Cómo crear un mapa web en Leaflet a partir de un GeoJSON»

  1. Buenas noches,
    Estoy iniciandome con todo esto de LEAFLET, pero desconozco la posibilidad de hacer algunas funciones como tengo en mente, por lo que no se si será la mejor API para mis proyectos.
    La duda es la siguiente:
    Igual que existe el Campo NAME: con su NOMBRE DE PÀIS, sería posible tener un campo vacio el cual se pudiera modificar el contenido de ese campo desde la propia herramienta sin tener que tocar codigo? y de ser así seria necesario utilizar POSTGIS?
    Saludos.

  2. Hola Aurelio,

    Gracias por tu artículo. Me ha sido muy útil en mi proceso de aprendizaje con Leaflet.
    Tengo una pequeña duda: si quisiese añadir un GeoJSON que tengo subido a GITHUB, como podria hacerlo?

    Saludos,

    Vicent.

    • Hola Vicent,
      Gracias a ti por seguirnos. En lugar de poner:
      url: ‘cities.json’,

      puedes poner algo así: ‘https://gist.githubusercontent.com/AurelioMorales/7a8e1ea67bf391b0a2ba/raw/dd3621e61cf99c8ad32c2be50610a84f05c3a249/cities.json’

      saludos!

  3. Gracias, me sirvió para mejorar mi presentación.

    Tengo una duda, si solo quisiera visualizar el borde para marcar limites, sin colores de llenado, donde tendría que modificar?

    Un Abrazo

    • Hola! En Leaflet una capa vectorial de polígonos hereda las opciones de la clase Path. Las opciones de esta clase son:
      stroke, color, weight, opacity, fill, fillcolor, fillOpacity, dashArray, lineCap, lineJoin, clickable, pointerEvents, classname. Modifica el valor fillcolor y stroke. Saludos!

  4. Buen Día:

    Tengo una pregunta… he tratado de visualizar un GeoJSON con googleMaps, y no he podido!!!, el archivo esta bien, la página me carga solo el mapa de Google Maps, pero no he podido definir bien en el código el como agregar el archivo GeoJSON.

    Ayuda por favor…

    Gracias de Antemano

  5. Hola!

    Primero que todo agradecerte por estos tutoriales !, me han servido demasiado en estos 3 años que llevo trabajando en SIG!.
    Ahora si la conulta… es que tengo mi archivo shp, y el QGIS me genera el còdigo GeoJSON sin problema. Igualmente lo puedo visualizar en el notepad++. Pero al momento de visualizar el còdigo geoJSON … no se ve para nada a lo que se espera. SImplemente me grafica una linea horizaontal que atravieza todo el Google Maps por la parte superior y ya. No se si sea error de transformaciòn de coordenadas, creo que las tengo bien.

    Cuando intento visualizar el archivo GeoJSON se me ve asì:
    ———————————————————————————————
    http://www.subeimagen.com/images/2015/04/21/imgerrorTY92R.jpg
    ——————————————————————————————–

    y mi archivo shp se ve asì….

    ———————————————————————————–
    http://www.subeimagen.com/images/2015/04/21/imgerror2.jpg
    ————————————————————————————

    Estoy frenado por este error en mi trabajo! De antemano Muchas gracias. . ..

    • Hola Andrés,
      Prueba a añadir el archivo geoJSON en QGIS para compararlo con tu archivo original SHP. No se si el visualizador de geoJSON que utilizas te permite ampliar el nivel de zoom para ir a la zona en cuestión…
      Saludos!

      • Hola!

        Gracias por tu pronta respuesta.
        Lo trato de visualizar sobre google maps en esta pàgina que es super ùtil. (se pueden crear shp, exportar como GeoJSON, visualizar, entre otras….)

        —————————————————
        http://geojson.io/#map=2/20.0/0.0
        —————————————————

        En QGis se visualiza perfecto. Pero el requerimiento es que mi archivo GeoJSON este sobre google maps, y ahì es donde se me presenta este inconveniente… y luego ser montado en una pàgina web.

        El zoom lo puedo usar perfectamente pues esta sobre un google maps, y archivo definitivamente no espacializa como deberìa.

        Muchas Gracias.

  6. Buen dia estimado Aurelio.

    He estado revisando unos codigo de leaflet y encontré uno que permite crear una ventana lateral para mostrar informacion de algun elemento del mapa (marca, ejemplo un edificio), pregunto ¿ en lugar de escribir el contenido de un elemento para esta ventana, existe alguna manera para que al hacer click en algun elemento del mapa(marca) esta ventana absorva y muestre uno ó varios campos de este elemento desde la base de datos.

    Un abrazo

    Atte

    Kleber

  7. Hola Aurelio,

    Gracias por el tutorial, me sirvió muchísimo! Sólo dos detalles:

    1. La propiedad POP_EST debe ir con minúsculas para que funcione bien.

    2. La función getColor no me funcionó hasta asignar todo primero a una variable, algo así:

    function getColor(d) {
    var color =
    d > 100000000 ? ‘#800026’ :
    d > 50000000 ? ‘#BD0026’ :
    d > 20000000 ? ‘#E31A1C’ :
    d > 10000000 ? ‘#FC4E2A’ :
    d > 5000000 ? ‘#FD8D3C’ :
    d > 2000000 ? ‘#FEB24C’ :
    d > 1000000 ? ‘#FED976’ :
    ‘#FFEDA0’;
    return color;
    }

    Saludos!

  8. Hola, pues es verdad lo que dice Jonatan, con un vídeo es más fácil comprender para mi y para los que somos newbies, por favor Aurelio un vídeo 🙂

Los comentarios están cerrados.