• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página
logo web Geoinnova

Geoinnova

Consultoría y Formación en SIG y Medio Ambiente

  • Geoinnova
    • Equipo
    • Coworking
    • Asociación
    • Alianzas Estratégicas
    • Visor de proyectos Geoinnova
  • Consultoría y Desarrollo SIG
    • Productos
      • Planero Web
      • QElectricGIS
      • Plugins
  • Consultoría Territorial
    • Turismo sostenible
    • Planes Urbanos de Actuación Municipal – PUAM
    • Geomarketing
  • Consultoría Ambiental
    • Estudios ambientales para proyectos de energías renovables
    • Estudios de Impacto e Integración Paisajística
    • Evaluación Ambiental Estratégica de planes y programas
    • Estudio de Impacto Ambiental para proyectos
    • Cálculo huella de carbono
    • Educación Ambiental
  • Formación
    • Todos los cursos
    • Máster y Diplomas
    • Cursos de ArcGIS
    • Cursos de QGIS
    • Cursos de Teledetección
    • Cursos de Medioambiente
  • Contenidos
    • Blog
    • Tertulia Territorio Geoinnova
    • TFMs y otro trabajos de alumnos
    • Noticias
    • Webinars
    • Geolibrería
    • Plugins
  • Contacto
    • Soporte de Clientes – Tickets
Programación y Desarrollo SIG SIG

MapLibre GL JS: Crear mapa y añadir datos desde un GeoJSON

22/11/2022 Deja un comentario

Maplibre GL JS, es una librería TypeScript de código abierto para publicar mapas en sitios web. Surgió en diciembre de 2020 como una bifurcación de código abierto de la librería Mapbox JS v1, tras el anuncio de la versión Mapbox GL JS v2 de licencia propietaria y no gratuita.

Esta bifurcación se convirtió en una continuación oficial de código abierto de la Mapbox GL JS v1 y es compatible con la Mapbox GL JS original.

https://maplibre.org/
MapLibre.org

Dentro de los proyectos de la organización MapLibre, además de la librería MapLibre GL JS, podemos encontrar MapLibre Native, SDK de código abierto para Android e iOS que permite mostrar mapas dentro de aplicaciones móviles, de escritorio o dispositivos integrados.

La librería MapLibre GL JS dispone de complementos como maplibre-gl-directions y maplibre-gl-geocoder que nos permiten mostrar respectivamente, direcciones de enrutamiento y geocodificación.

Además posee una API muy bien documentada, y multitud de ejemplos y plugins para incorporar.

MapLibre-Documentation
MapLibre GL JS – Documentation

Veamos un ejemplo sobre cómo crear un mapa básico y añadir multiples marcadores o puntos desde una fuente GeoJSON externa.

Contenidos ocultar
Crear estructura HTML y añadir MapLibre GL JS al proyecto
Elemento div para establecer id del mapa
Incluir estilo al mapa (CSS)
Crear Mapa
Agregar marcador
Incluir fuente GeoJSON

Crear estructura HTML y añadir MapLibre GL JS al proyecto

El primer paso será crear una estructura HTML básica con las secciones de head y body para posteriormente incluir MapLibre agregando los archivos JS y CSS al encabezado del documento HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mapa Básico</title>
    <script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet" />
</head>
<body>
    
</body>
</html>

Elemento div para establecer id del mapa

Para poder situar el mapa, creamos un identificador dentro del body mediante la etiqueta <div>.

<body>
    <div id="map"></div>
</body>

Incluir estilo al mapa (CSS)

Ahora ya podemos incluir las reglas CSS para el div que contiene el mapa. En nuestro caso está representado con el selector de id #map.

Establecemos que el mapa ocupe el ancho completo de la pantalla, no tenga ningún margin ni padding y con un posicionamiento absoluto.

body {
    margin: 0;
    padding: 0;
}
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

Crear Mapa

Creamos la instancia de la librería MapLibre llamando a su constructor maplibregl.Map(). Este constructor acepta 4 parámetros:

  • container: indicamos el identificador del mapa.
  • style: url del estilo de mapa que queremos cargar.
  • center: coordenadas lng, lat.
  • zoom: nivel de zoom.

El selector container, debe tener el mismo valor que el ID que se indicó como identificador del mapa, en nuestro caso ‘map’.

 container: 'map',

Para obtener un enlace de un estilo (style), podemos utilizar alguno de los mapas on-line de la plataforma MapTiler Cloud o utilizar el que viene en el ejemplo de creación de mapa básico de la API de la propia librería:

style: 'https://demotiles.maplibre.org/style.json' //style URL

El parámetro center define el punto central del mapa utilizando las coordenadas de longitud y latitud.

center: [-3.675501, 40.258370],

Por último el nivel de zoom está relacionado con la escala del mapa que define lo cerca que está la vista de la superficie de la tierra.

  zoom: 4,

El constructor completo quedaría así:

    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://demotiles.maplibre.org/style.json',
        center: [-3.675501, 40.258370],
        zoom: 4,
    });

Agregar marcador

Una vez creado el mapa vamos a incluir un marcador. Creamos una variable que nombraremos «madrid» y utilizaremos el constructor de macadores Marker. A continuación estableceremos su longitud y latitud con el método setLongLat y por último lo añadiremos al mapa con .addTo();

 const madrid = new maplibregl.Marker()
       .setLngLat([-3.8196239, 40.4381311])
       .addTo(map);

Incluir fuente GeoJSON

GeoJSON​ es un formato estándar abierto diseñado para representar elementos geográficos sencillos junto con sus atributos no espaciales, basado en JavaScript Object Notation. Admite las siguientes geometrías:

  • GeometryCollection
  • LineString
  • MultiLineString
  • MultiPoint
  • MultiPolygon
  • Point
  • Polygon

Agregaremos un GeoJSON con varios puntos de ejemplo inmediatamente después de que se haya producido la primera representación visual completa del mapa. Controlaremos este evento con map.on(‘load’)

map.on('load', function() {
   
});

Primero debemos definir la fuente de nuestros datos usando la función map.addSource, que tendrá como parámetros:

  • id: el ID de la fuente a agregar
  • source: objeto fuente.

Como identificador usaremos xample_points y se usará como conexión con la fuente que definiremos al agregar la capa con nuestra fuente GeoJSON.

Y para el objeto source, definimos el tipo de de fuente: GeoJSON y el parámetro data, después del cual podemos pegar el propio GeoJSON o vincularlo a un fuente externa, que será nuestro caso.

map.addSource('xample_points', {
    type: 'geojson',
    data: 'https://raw.githubusercontent.com/geoinnova/Points/master/points.json'
});

A continuación añadiremos una nueva capa de estilo con addLayer(). Como parámetros indicaremos:

  • id: identificador de la capa
  • type: tipo de geometría almacenada en la capa
  • source: La fuente de datos para la capa.
  • paint: propiedades de diseño
map.addLayer({
    'id': 'xample_points',
    'type': 'circle',
    'source': 'xample_points',
    /* 
    'paint': {
        'circle-radius': 8,
        'circle-color': '#B42222'
    },
    */
});

Opcionalmente podemos configurar las propiedades paint para personalizar cómo se representará la geometría.

Y eso es todo, con estas pocas líneas de código hemos cargado un mapa con un marcador y varios puntos obtenidos desde una fuente externa GeoJSON.

Puedes ver el código completo del proyecto y realizar pruebas en:

Si quieres aprender más sobre otras librerías de código abierto para webmapping, puedes consultar el Curso de Desarrollo de visores de mapas web o incluso si ya tienes conocimientos previos de los Sistemas de Información Geográfica y las Bases de Datos puedes consultar el Diploma en Programación y Tecnologías Geoespaciales de Código Abierto.

Apúntate a nuestra newsletter semanal

"*" señala los campos obligatorios

Consentimiento*
Este campo es un campo de validación y debe quedar sin cambios.

Información legal

Cumplimos el RGPD (Reglamenteo General de Protección de Datos) y esta en la primera información que debes saber. Responsable: Asociación Geoinnova. Finalidad: Apuntarte en nuestra base de datos para poder enviarte nuestra newsletter y cualquier otra información de interes. Legitimidad: Nos das tu consentimiento para comunicarnos contigo. Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir tus datos. Para una información más ampliada entra a nuestra política de privacidad.

Artículos relacionados

QGIS Hub plugin: Complemento para la descarga de estilos
19/09/2023
5 complementos de QGIS para trabajar con datos catastrales
11/09/2023
Copernicus Land: los datos geográficos de la ocupación del suelo en Europa
27/07/2023

Eva Rabasco

Full Stack Developer. Comprometida con el diseño y desarrollo de materiales innovadores basados en la Web. Amplia experiencia en tecnologías específicas del lado cliente y del servidor. Actualmente forma parte del equipo de Programación y Desarrollo SIG de la Asociación Geoinnova. Además desarrolla su labor como docente en algunos de los cursos de bases de datos y de programación SIG del catálogo de cursos de Geoinnova.

Interacciones con los lectores

¿Quieres comentarnos algo? Adelante! Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Footer

Menú Legal

  • Aviso Legal
  • Política de privacidad
  • Política de cookies
  • Términos y condiciones

Otras páginas de interes

  • Promociones y descuentos en formación
  • Formación bonificada FUNDAE
  • Verificador y descarga de Certificados de aprovechamiento

Contacto

Calle Luis Morondo Urra nº 8 Bajo A
31006 Pamplona (Navarra)
info@geoinnova.org
+34 948 117 137

Horario de atención

Lunes a Viernes - 09:00 a 14:00 y de 16:00 a 19:00.
Fines de semana y Festivos - Exclusivamente por mail.
Horario de Verano (01 de julio al 30 de agosto): De lunes a viernes de 8 a 15h.

Síguenos en Redes Sociales

Apúntate a nuestra newsletter

"*" señala los campos obligatorios

Consentimiento*
Este campo es un campo de validación y debe quedar sin cambios.

Entidad adherida a Confianza Online Certificado de inscripción en el Registro de huella de carbono, compensación y proyectos de absorción Logo Plazox

© 2023 · Desarrollada por Geoinnova en colaboración con OikosMSP

Gestionar el Consentimiento de las Cookies
Utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. Lo hacemos para mejorar la experiencia de navegación y para mostrar anuncios personalizados. El consentimiento a estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos anónimos. Sin una requerimiento, el cumplimiento voluntario por parte de su proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarlo.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en un sitio web o en varios sitios web con fines de marketing similares.
Administrar opciones Gestionar los servicios Gestionar {vendor_count} proveedores Leer más sobre estos propósitos
Preferencias
{title} {title} {title}