react-google-maps is a library containing React components and hooks for building Google Maps user interfaces. It includes components to render maps, customisable markers, info windows and control panels. The hooks allow developers to access underlying object instances, such as the Map object, or to load additional APIs, like the geocoding or direction services. If you work in React and use the Google Maps JavaScript API, this library will save you a couple lines.
Python library Lonboard promises super fast visualisation of huge geospatial datasets in Jupyter notebooks. The demo renders over three million data points in under three seconds; a load that brings other libraries to their knees.
We’re sharing lonboard, a new python library, to fill this need. On a dataset with 3 million points, ipyleaflet crashed after 3.5 minutes, pydeck crashed after 2.5 minutes, but lonboard successfully rendered in 2.5 seconds.
Impressive speed, all without clustering or downscaling the data. Lonboard renderes exactly the amount of features that it finds in the data set. How is this possible you ask? Lonboard employs efficient binary data encodings, as opposed to more traditional text-based formats like GeoJSON:
Lonboard is so fast because it moves data from Python to JavaScript (in your browser) and then from JavaScript to your Graphics Processing Unit (GPU) more efficiently than ever before. Other Python libraries for interactive maps encode data as GeoJSON to copy from Python to the browser. GeoJSON is extremely slow to read and write, resulting in a very large data file that must be copied to the browser.
With lonboard, the entire pipeline is binary. In Python, GeoPandas to GeoArrow to GeoParquet avoids a text encoding like GeoJSON, resulting in a compressed binary buffer that can be efficiently copied to the browser. In JavaScript, GeoParquet to GeoArrow offers efficient decoding (in WebAssembly). Then deck.gl can interpret the raw binary buffers of the GeoArrow table directly without any parsing (thanks to @geoarrow/deck.gl-layers).
The 8.0 release brings several API simplifications. Some of them are not backwards compatible, so make sure to read the upgrade notes. The new StadiaMaps source replaces the Stamen source, because Stamen no longer hosts map tiles. Several WebGL improvements are also part of this release. And finally, a new loader API for image layers makes working with non-tiled raster data more modular and faster.
My colleagues at Development Seed have released eoAPI:
Say hello 👋 to eoAPI, a cloud-native backend for standing up a modern, open geospatial data infrastructure. Built around the STAC specification, eoAPI makes massive earth observation (EO) data archives discoverable and interoperable. EO data is accessible through open community standards for data discovery, allowing your data to connect seamlessly to scientific notebooks, AI pipelines, and dashboard interfaces.
eoAPI bundles open-source software into a package, which simplifies standing up modern geospatial data infrastructure to aid discovery and visualisation of geospatial vector and raster data and make it available through open standards:
pg-STAC is an optimized Postgres schema to index and search large-scale STAC collections.
stac-fastapi is an Open Geospatial Consortium (OGC) Features API compliant FastAPI application for STAC metadata search.
titiler-pgSTAC is a TiTiler extension that connects to pgSTAC to support large-scale dynamic mosaic tiling for visualizing STAC collections and items.
tipg is an Open Geospatial Consortium (OGC) Features and Tiles API for vector datasets.
Getting started is easy with infrastructure-as-code templates allowing you to deploy eoAPI with opinionated but reasonable defaults:
eoapi-cdk - A set of AWS CDK constructs to deploy eoAPI services.
eoapi-template - An AWS CDK app that shows how to configure the eoapi-cdk constructs.
eoapi-k8s - IaC and Helm charts for deploying eoAPI services on AWS and GCP.
The softwares is available open-source and free under the permissive MIT licence.
Mapbox GL marked a paradigm shift in web mapping; away from pre-rendered tiled raster maps towards more dynamic vector maps rendered in the client.
Konstantin Käfer looks back at the early days of Mapbox GL:
Luckily, the time was right for a new approach. Several things fell into place that enabled the creation of Mapbox GL:
We had just developed the Mapbox Vector Tile format, enabling efficient delivery of small chunks of geodata to the client. Over the past decade, this format has become tremendously successful and is now an industry standard that is used across the entire geospatial community.
WebGL was becoming widely available, having been standardized just two years earlier.
Mapbox GL was a game-changer. Too bad they decided to switch to a proprietary license.
This has been lurking in my feed reader for a while, but it’s still worth sharing: Google offers a new set of Web Components to compose and add basic maps applications to websites, removing the need to write extensive JavaScript.
The basic example shows how to add a map with a marker to a website:
More interactive maps can be built with auxiliary components for buttons, layout and overlays.
This is a positive development: Web Components allow developers to add basic map functionality to websites without resorting to additional frameworks with potentially heavy footprints. I’d like to see more proposals like this.
Open-source alternatives are available (for OpenLayers) or have not seen significant development in recent years (for Leaflet).
Initially we turned to Mapbox, an established leader for generating and publishing online maps. But when we embedded a map from Mapbox on our staging website, we found it assigned a tracker that could not be disabled without violating Mapbox’s terms of service.
They ultimately settled for MapTiler in combination with MapLibre. Go open source!
A new major release is available of the open-source WebGL mapping framework MapLibre GL.
This release is a big step for MapLibre GL JS! With more than 500 commits, and almost a year in the making, version 3.0.0 is surely our best release yet.
Notable changes include:
The release completes the transition to WebGL2, bringing better interoperability with other WebGL2-based frameworks and better performance through parallelisation,
transformCameraUpdate provides a hook that allows you to manipulate the map’s camera state, ideal for use with reactive front-end frameworks where the camera-state properties are stored externally,
Better, continuous interpolations when using HCL interpolations via interpolate-hcl,
Several improvements to stabilise 3D terrain display.
Several performance improvements make MapLibre generally faster.
VersaTiles is a set of open-source applications that form a complete stack to create, host, and visualise OpenStreetMap data on the Web using vector tiles.
From the VersaTiles website:
VersaTiles lets you use OpenStreetMap based vector tiles, without any restrictions, locked-in paid services or attribution requirements beyond OpenStreetMap. You can use the freely downloadable tilesets from VersaTiles on your own infrastrure, in any way you like. Our open spec, royalty free and permissively licensed conatainer format works with virtually any webserver or CDN — with no requirement to pay unreasonable prices for “Tiles-as-a-Service”.
It includes a tile generator, based on TileMaker that produces tiles in the Shortbread schema. A converter produces tiles in the custom *.versatiles format from MBTiles. The VersaTiles format results on a smaller footprint—compared to MBTiles—and it doesn’t use SQLite under the hood. That means you can host it pretty much anywhere, either using the VersaTiles server or on a CDN; and clients can utilise HTTP range requests to access a subset of the data. The front-end is based on MapLibre, and includes map styles and a range of open-source fonts.
OGC Web Map Service (WMS) layers (Yes, they still exist),
A terrain extension allows developers to render 2D data on a 3D surface, and
Collision filters, hiding overlapping features and resulting in cleaner visualisation of dense data.
Deck.gl doesn’t get much recognition, but it looks like a serious web-mapping toolkit.
The market for open-source web-map libraries is getting crowded again. Some classic libraries are still around: OpenLayers, Leaflet, and MapboxGL (technically not open-source). With MapLibre, Gleo, and Deck.gl, some promising new implementations are on the rise. Technology-wise, map front-ends have stalled in the last couple of years. I hope this newfound competition results in advancements in the field.
Planet has published a library of React components to build map user interfaces using OpenLayers:
The @planet/maps library provides components for rendering maps in your React applications. The library acts as a wrapper around OpenLayers, transforming the imperative API into declarative components.
The purpose of this project is to provide a mapping between React’s declarative components and OpenLayers’ imperative API. In other words, this project provides a React renderer for OpenLayers.
[…]
Components exported by this package map 1:1 with classes exported by OpenLayers.
Component props map directly to properties that are settable on instances of OpenLayers classes. Exceptions to this are props like options (passed to the constructor only), listener props (e.g. onChange), and ref.
Components accept a ref that provide access to the underlying OpenLayers instance.
The examples only show a small fraction of the whole feature set of the library. I looked through the source code on GitHub, and it seems like many—if not all—OpenLayers classes have a corresponding React component in the library.
James Milner released an alpha version of Terra Draw, a JavaScript library that implements adapters centralising drawing functions across different map libraries. Instead of building functionality to draw rectangles, lines, or points for each mapping API, you can now learn Terra Draw and be done with it.
Leaflet, MapboxGL and Google Maps are supported; of the major contemporary libraries, only OpenLayers and MapLibre are currently missing. Terra Draw supports creating and editing points, lines, polygons, and circles and even includes a freehand tool.
Most products are set on one mapping library, and Terra Draw will be less valuable. But there are a couple of scenarios where Terra Draw is useful. Terra Draw could be an option if you’re building a new product and haven’t decided (or don’t want to commit) to one mapping library or base map provider. It allows you to focus on the problem, not the technology. In consulting, when different projects often require a different provider, Terra Draw allows transferring solutions across various projects, potentially freeing up time to work on other things. And TerraDraw enables you to adhere to engineering best practices: The drawing implementation is abstracted away so you can switch libraries later; for example, when a vendor decides to change to a more restrictive proprietary license.
Iván Sánchez Ortega introduces Gleo, a WebGL mapping library he’s been working on for a couple of months now:
What’s Gleo? In a nutshell, it’s a Javascript, WebGL-first, web mapping display library. It’s kinda reinventing the wheel of Leaflet/Openlayers/MapLibre, if such reinvention involved a lot of OOP architectural thinking.
Why you ask, if we already have OpenLayers and MapLibre doing pretty much the same thing:
The point is being able to understand the architecture of a WebGL map library. Because, as I said several times during the conference [FOSS4G], I still don’t understand what a “bucket” is in Maplibre parlance.
Building something for the sake of understanding the fundamentals of some technology is a perfectly fine reason to reinvent the wheel.
You can view the code on GitLab or follow Iván on Mastodon or Twitter, where he posts regular updates about his work on Gleo.
A design proposal for the modularization of the map rendering architecture can be found at #547. This modularization will allow new rendering architectures to be implemented quickly and more easily, and we anticipate that the modularization will give us a concrete framework to better interrogate various migration strategies.
I love this approach, gathering feedback from the community before starting the work to make actual changes to the code and architecture.