Colaboración:
Anal. de Sist. José Jachuf,
IDECOR
MapLibre es una biblioteca de mapas de código abierto que permite desarrollar aplicaciones web y móviles. La herramienta presenta ventajas comparativas respecto de otros software, como la representación de mapas en 3D, el uso de la GPU y posibilidades de asignar estilos.
En esta nota te contamos cómo crear un mapa básico con datos abiertos de la IDE provincial, utilizando este software de gran crecimiento en el último tiempo.
El proyecto MapLibre se originó en 2020, como una bifurcación -más conocida como fork- de Mapbox GL JS, una biblioteca JavaScript para la visualización de mapas en aplicaciones web. Surgió como respuesta a un cambio en la licencia de Mapbox GL JS.
Su objetivo es proporcionar una alternativa de código abierto y gratuita para desarrolladores y empresas que deseen utilizar una biblioteca de mapeo en sus aplicaciones web. El proyecto se encuentra en constante desarrollo y mejora por parte de las comunidades de código abierto.
MapLibre se presenta como alternativa a las bibliotecas Openlayers y Leaflet, y se compone de dos productos:
- MapLibre GL JS: librería TypeScript de código abierto para publicar mapas en cualquier sitio web. La visualización rápida de mapas es posible gracias a la representación de mapas vectoriales, acelerada por GPU.
- 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. Este conjunto de herramientas proporciona una rápida visualización de mapas en aplicaciones de iOS y Android utilizando la misma aceleración basada en GPU que la versión de TypeScript.
Crear un mapa utilizando MapLibre
La siguiente guía presenta el “paso a paso” para crear un mapa web con datos abiertos disponibles en Mapas Córdoba.
Paso 1. Crear un archivo index.html con el siguiente contenido:
Paso 2. Incluir el javascript y css de MapLibre en la sección head:
Paso 3. Dentro del body agregar:
De este modo, se obtendrá el siguiente resultado:
El código completo es:
Crear un archivo de estilo propio con datos de Mapas Córdoba
En la creación del mapa vemos esta línea con el atributo style:
style: ‘https://demotiles.maplibre.org/style.json‘
atributo
Un style de MapLibre es un documento que define la apariencia visual de un mapa, especificando: datos a dibujar, orden en que se dibujan y estilos de los datos dibujados. Un documento de estilo es un objeto JSON con propiedades específicas a nivel raíz y anidadas.
Se puede entender este concepto tal como si fuese un proyecto de QGIS, por ejemplo, en donde se definen las fuentes de los datos, las capas a cargar, estilos de representación, etiquetado, colores, rangos de visualización basado en el zoom y más. Para más información consultar en: https://maplibre.org/maplibre-style-spec/
| Se recomienda siempre definir el objeto style en un archivo separado. Por simplicidad en este ejemplo vamos a crear el objeto en el propio archivo index.html |
Continuando con el código, vamos a mostrar cómo crear y usar un archivo style propio. Entre los atributos más importantes definiremos los siguientes:
- ubicación inicial
- zoom inicial
- capa base (por ejemplo, OSM – OpenStreetMap)
- capa de parcelas del Catastro provincial publicadas en Mapas Córdoba, con renderizado basado en el estado y etiquetado (capa vector tile publicada por IDECOR) Ver nota: IDECOR incorpora versión beta de ‘vector tiles’ como nuevo servicio de mapas
El objeto json es el siguiente:
En su visualización, puede observarse que con un mismo origen de datos -parcelas-idecor-, es posible representar la capa de diferentes maneras: como un polígono relleno (fill), como líneas (line) para mostrar los bordes y como etiquetas (symbol).
El index.html resultante será:
El mapa resultante es el que puede observarse en la siguiente imagen:
Finalmente, agregaremos un control de navegación con el siguiente código, colocándolo a continuación de la definición del mapa:
¡Aprovechá todos los recursos!
Desde el GitHub de IDECOR podés descargar todo el código y preparar tus propios mapas web! Adelante!
Si te interesan este tipo de contenidos, podés sumarte a IDECOR-Dev, la comunidad de desarrollo de aplicaciones y geoservicios de la IDE provincial. Por consultas o ara conocer más sobre estos recursos, escribinos a [email protected].
Seguí informándote de las Novedades de IDECOR a través de nuestras redes en Instagram, Linkedin, Twitter y YouTube.
