Pathfinder is an open-source mapping application built with Next.js 15, MapboxGL, and TypeScript. It features real-time weather data, 3D building visualization, dark/light mode support, a street/satel...

Add a legend to a mapbox-gl map by parsing layer layout & paint expressions. - markusand/mapboxgl-legend

Provides an interface to the Mapbox GL JS (<https://docs.mapbox.com/mapbox-gl-js/guides>) and the MapLibre GL JS (<https://maplibre.org/maplibre-gl-js/docs/>) interactive mapping libraries to help users create custom interactive maps in R. Users can create interactive globe visualizations; layer sf objects to create filled maps, circle maps, heatmaps, and three-dimensional graphics; and customize map styles and views. The package also includes utilities to use Mapbox and MapLibre maps in Shiny web applications.

* Twitter * LinkedIn * Facebook * Email Gleo es una librería JavaScript de visualización de mapas web impulsada ​​​​por WebGL. Gleo es una biblioteca para mostrar mapas geográficos, que aprovecha WebGL1 mediante la biblioteca de abstracción Glii. Su objetivo es cubrir los casos de uso de Leaflet, OpenLayers o MapboxGL / MaplibreGL. Según su creador, Iván Sánchez Ortega, « _es como reinventar la rueda de Leaflet/OpenLayers/MapLibre_ «, y ha sido desarrollada solo por él. ## Objetivos * Ofrecer una API similar a Leaflet (imperativa, orientada a objetos, sin hojas de estilo, una instancia de objeto por símbolo cartográfico, clases extensibles), pero que aprovecha el renderizado 2D WebGL. * Soporte de proyecciones cartográficas como OpenLayers. * Rendimiento habilitado para WebGL como MapLibre. * Soporte de simbolización capaz de rivalizar con Deck.gl. ## Características * Módulos JavaScript ES6 puros (no se necesitan herramientas de agrupación de Typescript ni JavaScript). * Enfoque totalmente orientado a objetos. * Los símbolos de mapa son objetos y hacen cosas como manejar eventos del ratón. * Soporte de reproyección sobre la marcha. * Ausencia total de la palabra (sorprendentemente ambigua) «capa». * Licencia GPLv3. Usar Gleo requiere un sólido conocimiento de los fundamentos del desarrollo web. Gleo está diseñado como módulos de JavaScript y no requiere ninguna cadena de herramientas de agrupación (como rollup, parcel, webpack, etc.) para funcionar. ### Ejemplos interactivos * En este enlace puedes ver una muestra con los códigos y los visores resultantes. ### Más info * Repositorio de código. * Documentación de API. * Presentación (ejemplos). ### 📊 Comparativa de librerías de mapas web _open source_ Característica | **Leaflet** | **OpenLayers** | **MapLibre GL JS** | **Gleo** ---|---|---|---|--- **Última versión** | 1.9.4 | 9.2.4 | 5.3.0 | 1.0.0 **Fecha publicación** | 18 may 2023 | 27 may 2024 | mar 2025 | 21 mar 2025 **WebGL** | ❌ No nativo (sí via plugins) | ✅ Sí | ✅ Sí | ✅ Sí (núcleo WebGL) **Teselas vectoriales** | ❌ No nativo (sí vía plugins) | ✅ Sí | ✅ Sí (nativo) | ✅ Sí (vector-tile-js) **Proyecciones** | 🌍 Solo Web Mercator | 🌐 Múltiples via Proj4js | 🌍 Web Mercator + globo + experimental | 🌐 Múltiples via Proj4js **Plugins** | 🔌 Amplio ecosistema | 🔌 OL-ext y otros | 🔌 Comunidad activa (Awesome MapLibre) | 🚫 No dispone **Soporte móvil** | 📱 Excelente | 📱 Bueno (requiere ajustes) | 📱 Bueno | 📱 Requiere pruebas **Tamaño ligero** | ✅ Muy ligera (~42 KB) | ❌ Más pesada (~140-250 KB) | ❌ Media (~220 KB) | ❌ No especificado oficialmente **Facilidad de uso** | 😊 Muy fácil | 😐 Requiere curva de aprendizaje | 😐 Intermedia | 🧪 Experimental

Doing some tests, trying to let user click on a COUNTY and all counties belonging to STATE x get highlighted. You can see running here var map = new mapboxgl.Map({ container: 'map', style: { "version": 8, "name": "blank", "sources": { "empty": { "type": "vector", "url": "" } }, "layers": [{ "id": "background", "type": "background", "paint": { "background-color": "#1d1f20" } }] }, center: [-82, 39], zoom: 3, debug: 2 }); var hoveredStateId = null; map.on('load', function() { map.addSource("counties", { "type": "vector", "url": "mapbox://reyemtm.28b260nr" }); // The feature-state dependent fill-opacity expression will render the hover effect // when a feature's hover state is set to true. map.addLayer({ "id": "fill", "type": "fill", "source": "counties", "source-layer": "us_counties-8xelrv", "layout": {}, "paint": { "fill-color": ["case", ["boolean", ["feature-state", "hover"], false], "whitesmoke", "firebrick"], "fill-opacity": 1 } }) function getUniqueFeatures(array, comparatorProperty) { var existingFeatureKeys = {}; var uniqueFeatures = array.filter(function(el) { if (existingFeatureKeys[el.properties[comparatorProperty]]) { return false; } else { existingFeatureKeys[el.properties[comparatorProperty]] = true; return true; } }); return uniqueFeatures; } map.on("click", "fill", function(e) { if (e.features.length > 0) { var state_code = e.features[0].properties.STATE; console.info(state_code) var relatedFeatures = map.querySourceFeatures('counties', { sourceLayer: 'us_counties-8xelrv', filter: ['==', 'STATE', state_code] }); var uniqueFeatures_state = getUniqueFeatures(relatedFeatures, "STATE"); var uniqueFeatures_id = getUniqueFeatures(relatedFeatures, "id"); console.log(uniqueFeatures_state) relatedFeatures.forEach(function(f) { console.log(f.id) //18 console.log(f.properties.STATE) //allways the same, this is good var s = { source: 'counties', sourceLayer: 'us_counties-8xelrv', id: f.id }; map.setFeatureState(s, { hover: true }); }); } }); }); Console gives the correct info (that is, ids are unique and state_code is the same for all filtered features when click on one county). Curiously Texas is one of the few working correctly, but, when zooming in/out, highlighting becomes a chaos. I have also tried using uniqueFeatures_state as the object to iterate over, with no success.

Leverages the high-performance 'GeoArrow' memory layout to render potentially very large 'Deck.gl' data layers on a 'maplibregl'/'mapboxgl' map created with R package 'mapgl'. The heavy lifting is done on the 'JavaScript' side in the browser using 'deck.gl-geoarrow' (&lt;<a href="https://github.com/geoarrow/deck.gl-geoarrow/" target="_top">https://github.com/geoarrow/deck.gl-geoarrow/</a>&gt;). Currently provides functions for adding Scatterplot (points), Path (lines) and Polygon (polygons) layers. Has support for data classes from R packages 'wk' and 'sf'. In addition, convenience functions for styling data, tooltips and popups, as well as layer management are provided. Furthermore, remotely hosted 'GeoParquet' and 'GeoArrow' files can be visualised directly in the browser, without the need to first read them into R memory. Only the styling instructions are prepared by the user in R and are then transferred to and applied in the browser as the data arrives.

Leverages the high-performance 'GeoArrow' memory layout to render potentially very large 'Deck.gl' data layers on a 'maplibregl'/'mapboxgl' map created with R package 'mapgl'. The heavy lifting is done on the 'JavaScript' side in the browser using 'deck.gl-geoarrow' (&lt;<a href="https://github.com/geoarrow/deck.gl-geoarrow/" target="_top">https://github.com/geoarrow/deck.gl-geoarrow/</a>&gt;). Currently provides functions for adding Scatterplot (points), Path (lines) and Polygon (polygons) layers. Has support for data classes from R packages 'wk' and 'sf'. In addition, convenience functions for styling data, tooltips and popups, as well as layer management are provided. Furthermore, remotely hosted 'GeoParquet' and 'GeoArrow' files can be visualised directly in the browser, without the need to first read them into R memory. Only the styling instructions are prepared by the user in R and are then transferred to and applied in the browser as the data arrives.

The `mapboxgl-legend` library is a TypeScript plugin for Mapbox GL JS that automatically generates interactive legends by parsing layer styles and expressions. It eliminates the need for manual legend