Tutorial Leaflet: sesión 3

8 mayo 20258 mayo 2025 Atilio Francois No Comments

Datos y estilos GeoJSON

Cargando…

¿Tarda demasiado?

Recargar el documento

Abrir en una nueva pestaña

Contenu

Diapositiva 1 : ¿Qué es GeoJSON?

GeoJSON es un formato de datos ligero muy utilizado para representar objetos geográficos en un entorno web. Se basa en JSON (JavaScript Object Notation), un formato de datos de texto ligero que es fácil de leer y escribir, y es ampliamente soportado por muchas bibliotecas y herramientas de desarrollo, incluyendo Leaflet, OpenLayers, y otros sistemas SIG (Sistemas de Información Geográfica).

GeoJSON está diseñado específicamente para describir objetos geográficos, como puntos, líneas, polígonos y conjuntos de estos objetos, incluyendo información adicional (como atributos) sobre los mismos. Se utiliza para integrar e intercambiar datos geoespaciales en modernas aplicaciones web y sistemas GIS.

Diapositiva 2: Estructura de un archivo GeoJSON

Un archivo GeoJSON es un formato de datos textuales basado en el estándar JSON, diseñado para representar objetos geográficos. Se utiliza habitualmente en aplicaciones de cartografía web. Los objetos contenidos en un archivo GeoJSON se organizan en una estructura jerárquica, centrada en torno a tres elementos clave:

1. FeatureCollection

Es el elemento raíz (el contenedor principal) de un archivo GeoJSON. Agrupa un conjunto de características, es decir, entidades geográficas individuales. Una FeatureCollection puede contener diferentes tipos de objetos geográficos: puntos, líneas o polígonos. Por regla general, un archivo GeoJSON contiene una única FeatureCollection.

2. Feature (característica geográfica)

Cada entidad geográfica se define como un feature. Una característica representa un objeto específico en el mapa (como un edificio, un árbol, un camino, una zona protegida, etc.). Se compone de dos partes esenciales:

geometría: es la descripción geométrica del objeto, que puede adoptar la forma de un Punto, una LíneaCadena o un Polígono. La geometría se define mediante un tipo y unas coordenadas.

propiedades: es la información descriptiva asociada al objeto (metadatos). Puede incluir un nombre, una categoría, una descripción, una fecha, un valor numérico, etc. Estas propiedades se expresan en forma de pares clave-valor, como en un documento de identidad de un objeto.

3. Geometry

La geometría especifica la forma y la posición espacial de un elemento. Se basa en un tipo y una o varias coordenadas geográficas (longitud, latitud). Los tipos de geometría más utilizados son :

Punto: una única ubicación en el mapa, definida por un par de coordenadas [longitud, latitud].

LíneaString: una línea formada por varios puntos interconectados.

Polígono: conjunto de puntos que forman una superficie cerrada (por ejemplo, una parcela, un lago, un municipio).

MultiPoint, MultiLineString, MultiPolygon: estos tipos pueden utilizarse para agrupar varias geometrías similares en una única característica (por ejemplo, un archipiélago, una red de carreteras, un conjunto de zonas protegidas).

Diapositiva 3 : ¿Por qué utilizar GeoJSON?

Ventajas de GeoJSON

Fácil de leer y escribir: Al estar basado en JSON, el formato es fácil de entender y manipular.

Compatibilidad: Está ampliamente soportado por modernas bibliotecas JavaScript (como Leaflet, OpenLayers, Mapbox), así como por muchas herramientas SIG.

Formato ligero: GeoJSON es un formato ligero, basado en texto, que se presta bien al uso web, especialmente para transferir datos geoespaciales.

Extensibilidad: Permite añadir propiedades personalizadas a los objetos geográficos, lo que lo hace flexible para una gran variedad de aplicaciones.

Limitaciones de GeoJSON

Rendimiento: Aunque GeoJSON es ligero, el tamaño de los datos puede aumentar considerablemente cuando se trabaja con grandes cantidades de objetos geográficos complejos.

Falta de soporte para múltiples proyecciones: GeoJSON funciona principalmente con la proyección EPSG:4326 (latitud/longitud), lo que puede plantear problemas para determinadas aplicaciones que requieren proyecciones específicas.

Diapositiva 4 : Cargar un archivo GeoJSON

Cargar un archivo GeoJSON externo en Leaflet es sencillo y eficiente, ya sea a través de una URL directa o de una petición HTTP como fetch(). Esta funcionalidad es esencial para integrar datos geoespaciales en tiempo real desde servidores externos, lo que es muy común en aplicaciones de mapas web

Diapositiva 5 : Uso de fetch()

Cuando se trabaja con Leaflet para mostrar mapas interactivos, se puede cargar un archivo GeoJSON local directamente en el código JavaScript. Este archivo puede incluirse en la misma carpeta que su aplicación, por lo que puede utilizarlo sin tener que realizar una petición HTTP externa. Esto resulta especialmente útil para datos locales o cuando se desea precargar objetos geográficos en el mapa.

Por ejemplo, aquí hay un archivo GeoJSON que describe un punto que representa una ubicación:

paris.geojson

  "type": "FeatureCollection",

  "features": [

      "type": "Feature",

      "geometry": {

        "type": "Point",

        "coordinates": [2.3522, 48.8566]

},

      "properties": {

        "name": "Paris",

        "description": "La capitale de la France"

Supongamos que este archivo se guarda con el nombre paris.geojson en la misma carpeta que su archivo HTML.

Si tiene un archivo GeoJSON externo en el mismo directorio que su aplicación (por ejemplo paris.geojson), puede utilizar fetch() para recuperar el archivo y añadirlo al mapa.

He aquí un ejemplo:

paris_geojson.html

<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Carte Leaflet avec GeoJSON local</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

</head>

<body>

    <div id="map" style="height: 600px;"></div>

    <script>

        // Initialiser la carte

        var map = L.map('map').setView([48.8566, 2.3522], 13); // Vue sur Paris

        // Ajouter une couche de base (carte OpenStreetMap)

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

        // Charger le fichier GeoJSON local et l'ajouter à la carte

        fetch('paris.geojson')

            .then(response => response.json()) // Convertir la réponse en JSON

            .then(data => {

                // Ajouter l'objet GeoJSON à la carte

                L.geoJSON(data).addTo(map);

})

            .catch(error => console.error('Erreur lors du chargement du fichier GeoJSON :', error));

    </script>

</body>

</html>

Explicación del código:

fetch(‘paris.geojson’): Recupera el archivo GeoJSON local.

response.json(): Convierte la respuesta en un objeto JavaScript.

L.geoJSON(data).addTo(map): Añade el objeto GeoJSON al mapa.

.catch() : Captura errores si el archivo no se puede cargar.

Con este código (L.geoJSON(data).addTo(map)) el punto GeoJSON se añade efectivamente al mapa, pero no es visible porque no se ha definido ningún estilo o popup, y un Punto sin icono personalizado o popup no se muestra por defecto en Leaflet.

He aquí una versión corregida del código HTML con una ventana emergente y un icono por defecto que hace visible el punto «París»:

paris_geojson.html

// Charger le fichier GeoJSON

fetch(‘paris.geojson’)

.then(response => response.json())

.then(data => {

L.geoJSON(data, {

pointToLayer: function (feature, latlng) {

return L.marker(latlng).bindPopup(

«<b>» + feature.properties.name + «</b><br>» + feature.properties.description

);

}

}).addTo(map);

})

.catch(error => console.error(‘Erreur lors du chargement du fichier GeoJSON :’, error));

Ver la página HTML en una nueva pestaña.

Diapositiva 6 : Insertar directamente en el código

Si prefiere no utilizar un archivo externo e incluir los datos GeoJSON directamente en el código JavaScript, puede definir el objeto GeoJSON en una variable y añadirlo directamente al mapa.

Ejemplo:

paris_geojson_code.html

<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Carte Leaflet avec GeoJSON local</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

</head>

<body>

    <div id="map" style="height: 600px;"></div>

    <script>

        // Initialiser la carte

        var map = L.map('map').setView([48.8566, 2.3522], 13); // Vue sur Paris

        // Ajouter une couche de base (carte OpenStreetMap)

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

        // Définir les données GeoJSON directement dans une variable

        var geojsonData = {

          "type": "FeatureCollection",

          "features": [

              "type": "Feature",

              "geometry": {

                "type": "Point",

                "coordinates": [2.3522, 48.8566]

},

              "properties": {

                "name": "Paris",

                "description": "La capitale de la France"

};

        // Ajouter l'objet GeoJSON à la carte

        L.geoJSON(geojsonData).addTo(map);

    </script>

</body>

</html>

Explicación del código:

En este ejemplo, el GeoJSON se define directamente en una variable JavaScript (geojsonData).

Este enfoque es sencillo y adecuado cuando se tienen datos GeoJSON relativamente pequeños y no se desea realizar ninguna petición externa para cargarlos.

Ver la página HTML en una nueva pestaña.

Ventajas y limitaciones

Ventajas:

Fácil de implementar, especialmente para archivos GeoJSON sencillos o proyectos en los que los datos son pequeños.

No es necesario gestionar peticiones HTTP complejas.

Limitaciones:

El método fetch() requiere que el archivo sea servido a través de un servidor local o remoto (no hay acceso directo a archivos locales a través del navegador sin un servidor).

Si tiene muchos datos geoespaciales, la carga directa a través de JavaScript puede resultar engorrosa y menos eficiente.

Conclusión

Cargar un archivo GeoJSON local en Leaflet es una operación sencilla que puede llevarse a cabo de dos formas principales: utilizando el método fetch() para cargar un archivo externo, o incluyendo los datos GeoJSON directamente en su código JavaScript. Esta flexibilidad facilita la integración de objetos geográficos en mapas interactivos.

Diapositiva 7 : Estilización condicional con Leaflet

La estilización condicional en Leaflet permite personalizar el aspecto de los elementos geográficos (puntos, líneas, polígonos) en función de sus propiedades u otros criterios. Esto hace que los mapas sean más interactivos e informativos, mostrando diferentes colores, tamaños o formas en función de valores específicos. Por ejemplo, los polígonos pueden colorearse en función de su superficie, o pueden mostrarse marcadores de distinto tamaño en función de la población de una ciudad.

En Leaflet, puede aplicar estilos condicionales basados en las propiedades de un objeto GeoJSON. Esto se hace normalmente en la función style, que se pasa al método L.geoJSON(). Esta función se utiliza para definir un estilo personalizado para cada característica basado en sus propiedades.

Personalizar los estilos de los objetos geoespaciales

Los objetos geoespaciales en Leaflet, tales como puntos, polilíneas, polígonos o capas GeoJSON, pueden ser estilizados definiendo parámetros tales como color, grosor de línea, relleno, etc. He aquí un ejemplo detallado de personalización de estilos.

Personalización de estilos con GeoJSON

Al trabajar con objetos GeoJSON, puede personalizar su estilo utilizando una función de estilo. Esta función admite parámetros como el color de la línea, el relleno del polígono, la opacidad, etc.

He aquí un ejemplo de cómo personalizar el estilo de los objetos GeoJSON:

paris_geojson_code.html

<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Carte Leaflet avec GeoJSON personnalisé</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

</head>

<body>

    <div id="map" style="height: 600px;"></div>

    <script>

        // Initialiser la carte

        var map = L.map('map').setView([48.8566, 2.3522], 13); // Vue sur Paris

        // Ajouter une couche de base (carte OpenStreetMap)

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

        // Données GeoJSON (ici un simple polygone)

        var geojsonData = {

          "type": "FeatureCollection",

          "features": [

              "type": "Feature",

              "geometry": {

                "type": "Polygon",

                "coordinates": [

                    [2.35, 48.85],

                    [2.36, 48.85],

                    [2.36, 48.86],

                    [2.35, 48.86],

                    [2.35, 48.85]

},

              "properties": {

                "name": "Paris Square"

};

        // Fonction pour personnaliser le style du polygone

        var style = function (feature) {

          return {

            color: "blue",          // Couleur de la bordure

            weight: 3,              // Épaisseur de la bordure

            opacity: 1,             // Opacité de la bordure

            fillColor: "lightblue", // Couleur de remplissage

            fillOpacity: 0.5       // Opacité du remplissage

};

};

        // Ajouter les données GeoJSON avec le style personnalisé

        L.geoJSON(geojsonData, { style: style }).addTo(map);

    </script>

</body>

</html>

Ver la página HTML en una nueva pestaña.

Explicación:

color: Define el color del borde del polígono.

weight: Define el grosor del borde.

fillColor: Define el color del relleno del polígono.

fillOpacity: Define la opacidad del relleno del polígono.

opacity: Define la opacidad del borde.

Diapositiva 8 : Otras propiedades de estilo disponibles

Personalizar una ventana emergente GeoJSON

Cuando se trabaja con datos GeoJSON, también se pueden personalizar las ventanas emergentes según las propiedades de los objetos geográficos. He aquí cómo hacerlo:

geojson_popup.html

<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Carte Leaflet avec Popups et GeoJSON</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

</head>

<body>

    <div id="map" style="height: 600px;"></div>

    <script>

        // Initialiser la carte

        var map = L.map('map').setView([48.8566, 2.3522], 13); // Vue sur Paris

        // Ajouter une couche de base (carte OpenStreetMap)

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

        // Données GeoJSON avec des propriétés pour chaque objet

        var geojsonData = {

          "type": "FeatureCollection",

          "features": [

              "type": "Feature",

              "geometry": {

                "type": "Point",

                "coordinates": [2.3522, 48.8566]

},

              "properties": {

                "name": "Paris",

                "description": "La capitale de la France"

};

        // Ajouter les données GeoJSON à la carte avec un popup personnalisé

        L.geoJSON(geojsonData, {

          onEachFeature: function (feature, layer) {

            layer.bindPopup("<b>" + feature.properties.name + "</b><br>" + feature.properties.description);

        }).addTo(map);

    </script>

</body>

</html>

Explicación:

onEachFeature: Esta función se llama para cada objeto GeoJSON. Se utiliza para personalizar las interacciones, incluidas las ventanas emergentes.

bindPopup(): Aquí el contenido de la ventana emergente se define dinámicamente a partir de las propiedades GeoJSON.

Conclusión

Personalizar estilos y ventanas emergentes en Leaflet permite crear mapas más interactivos y visualmente atractivos. Puede aplicar estilos a objetos geoespaciales como polígonos y polilíneas, y añadir ventanas emergentes interactivas para proporcionar información adicional. Tanto si se trata de un simple mapa interactivo como de una aplicación más compleja, la personalización de estilos y ventanas emergentes desempeña un papel fundamental para que la experiencia del usuario sea más agradable y funcional.

Diapositiva 9 : Estilización condicional de un polígono

Aplicación de estilos dinámicos a polígonos con Leaflet

Cuando se trabaja con datos GeoJSON, a menudo resulta útil cambiar el aspecto de un polígono en función de sus propiedades. Esto permite, por ejemplo, visualizar rápidamente las diferencias de altitud, densidad, superficie, etc.

He aquí un ejemplo en el que los polígonos se colorean en función de la altitud:

// Fonction de style pour les polygones, basée sur l'altitude

function polygonStyle(feature) {

  return {

fillColor: feature.properties.altitude > 300 ? «green» : «yellow», // Altitude > 300m = vert, sinon jaune

weight: 2, // Épaisseur des contours

opacity: 1, // Opacité du contour (1 = totalement opaque)

color: «black», // Couleur du contour

dashArray: «3», // Trait en pointillés

fillOpacity: 0.5 // Opacité du remplissage (0.5 = semi-transparent)

};

}

Et voici comment l’utiliser lors de l’ajout d’un calque GeoJSON :

L.geoJSON(geojsonPolygons, {

style: polygonStyle

}).addTo(map);

Explicación paso a paso

feature.properties.altitude: se recupera la propiedad altitud de cada polígono.

fillColor: condition ? «verde» : «amarillo» : se utiliza una condición ternaria:

Si la altitud es superior a 300, el color de relleno será verde.

En caso contrario, será amarillo.

Esta lógica hace que el mapa sea visualmente informativo: puede distinguir inmediatamente las zonas de gran altitud (verde) de las zonas de baja altitud (amarillo), sin tener que leer los datos.

Puede personalizarse

Por supuesto, puede adaptar este estilo a otras propiedades, por ejemplo:

Coloree los polígonos en función de la densidad de población.

Utilizar colores diferentes según la categoría del terreno (bosque, zona urbana, etc.).

Añadir un tooltip o popup para mostrar detalles al pasar el ratón por encima o al hacer clic.

Diapositiva 10 : Interacciones con GeoJSON en Leaflet

Interacciones con objetos GeoJSON en Leaflet

El objetivo aquí es hacer que el mapa sea interactivo: mostrar información, reaccionar a los clics del usuario o incluso cambiar la apariencia de un elemento en tiempo real.

La opción onEachFeature

Cuando se utiliza L.geoJSON(…), se puede especificar una opción especial llamada onEachFeature.

L.geoJSON(data, {

  onEachFeature: function(feature, layer) {

    // Action à réaliser pour chaque entité GeoJSON

});

¿Qué hace onEachFeature?

Esta función se ejecuta automáticamente para cada «característica» del archivo GeoJSON.

Se puede utilizar para:

Añadir una ventana emergente con layer.bindPopup() para mostrar información.

Adjuntar eventos como click, mouseover, mouseout, etc.

Modificar dinámicamente el estilo (por ejemplo, cambiar el color al hacer clic).

Añadir tooltips, animaciones u otros efectos de interacción.

Ejemplo sencillo: ventana emergente con el nombre

L.geoJSON(data, {

  onEachFeature: function(feature, layer) {

    // Affiche le nom dans une popup

    layer.bindPopup(feature.properties.nom);

}).addTo(map);

Quando o usuário clica em uma entidade (ponto, linha ou polígono), uma caixa pop-up é aberta com o valor da propriedade “name”.

Essa função pode ser aprimorada com a adição de vários tipos de interação:

onEachFeature: function(feature, layer) {

  layer.bindPopup("<b>" + feature.properties.nom + "</b>");

  // Changer la couleur au survol

  layer.on("mouseover", function () {

    this.setStyle({ color: "blue" });

});

  // Remettre la couleur d'origine à la sortie de la souris

  layer.on("mouseout", function () {

    this.setStyle({ color: "black" });

});

En resumen,

onEachFeature es una pasarela ideal para hacer interactivo un mapa. Es en esta función donde se define el comportamiento de cada entidad GeoJSON mostrada en el mapa.

Sesión de ejercicios 3: Visualización e interacción con datos GeoJSON en Leaflet

Objetivo:

Crear un mapa interactivo que muestre zonas estilizadas dinámicamente según sus atributos, con una ventana emergente al hacer clic.

Contenido:

Trabajarás con un pequeño archivo HTML que contiene :

Un mapa Leaflet centrado en Mauricio

Polígonos GeoJSON representando zonas ficticias (agrícolas y urbanas)

Un estilo condicional según el tipo de zona

Una ventana emergente mostrando información sobre cada zona

Este archivo es …\leaflet_starter_kit\data\exercice_geojson.html

Ver este archivo en una nueva pestaña.

Para hacerlo:

Abre el archivo HTML en un navegador (puedes guardarlo localmente como exercise-geojson.html).

Observa:
- El mapa muestra dos polígonos, cada uno coloreado según su tipo.
- Al hacer clic sobre él, aparece una ventana emergente que muestra el nombre y el tipo de zona.

Comprender:
- El estilo se define mediante la función styleFeature(), que comprueba feature.properties.type.
- La interacción se define mediante onEachFeature, que vincula un bindPopup() a cada entidad.

Modifique el código para realizar los siguientes ejercicios:
- Añada una nueva zona de tipo «bosque» con geometría simple.
- En styleFeature(), dé a la zona “bosque” un color diferente (por ejemplo, «verde oscuro»).
- En onEachFeature(), modifique el contenido de la ventana emergente para que muestre también un pequeño mensaje como «Haga clic para ampliar».
- Añade un evento de clic (layer.on(“click”, …)) que automáticamente haga zoom en el área clicada (map.fitBounds(layer.getBounds())).

Bonus:

Añade una opacidad diferente dependiendo del tipo de zona.

Prueba un efecto de mouseover y mouseout.

Resultado esperado:

Un mapa con tres zonas coloreadas, cada una con :

Su propio estilo

Una ventana emergente personalizada

Interacción con el clic

Ver el resultado final en una nueva pestaña.

<-Sesión 2: Capas e interactividad

->Sesión 4: Controles

Si cet article vous a intéressé et que vous pensez qu'il pourrait bénéficier à d'autres personnes, n'hésitez pas à le partager sur vos réseaux sociaux en utilisant les boutons ci-dessous. Votre partage est apprécié !