maplibre-gl-components: A MapLibre Plugin for Cloud-Native Geospatial Visualization

I am excited to share a new MapLibre plugin called maplibre-gl-components. It makes it easy to visualize cloud-native geospatial formats directly in the browser, with no server required. The plugin supports Cloud Optimized GeoTIFF (COG), Zarr, PMTiles, FlatGeobuf, GeoParquet, and STAC catalog items. It also ships with useful UI components like a layer control, minimap, bookmarks, print tool, view state manager, STAC search, and a control grid that bundles everything into a collapsible toolbar. These features will also be coming to Jupyter Notebook through the anymap-ts package.

Video tutorial: maplibre-gl-components Plugin Overview

What You Will Need¶

Node.js 18 or later (to run locally).
A modern web browser.
Alternatively, just use the live demo with no installation.

To run locally:

git clone https://github.com/opengeos/maplibre-gl-components.git
cd maplibre-gl-components
npm install
npm run dev

This starts a local dev server at localhost:5173 with all the examples.

UI Components¶

Layer Control¶

The layer control lets you toggle data layers on and off, adjust opacity with a slider, and inspect individual layers within the vector tile basemap. You can filter the layer list to show all layers, only rendered layers, or hide everything.

Basemap Selector¶

Switch between basemaps (OpenStreetMap, Google Satellite, and others) with a single click. No coding needed.

Search Control¶

Type a location name, hit enter, and the map zooms to it. Simple geocoding built right into the map.

Control Grid¶

The control grid bundles multiple tools into a collapsible grid of icon buttons in the upper right corner. This is similar to the toolbar in leafmap but built natively in TypeScript, so it works on static web pages without a Python kernel.

3D Terrain¶

Enable 3D terrain visualization with one click. The terrain tiles are hosted on AWS. Hold Ctrl and drag to tilt the map for a perspective view. Combine this with a satellite basemap for dramatic 3D landscapes.

View State¶

Displays the current map center, zoom level, pitch, bearing, and bounding box. You can also draw a bounding box on the map and copy the coordinates, which is handy when you need exact bounds for data queries.

Minimap¶

A small overview map in the corner showing your current location in a wider context. Drag the rectangle to navigate.

Bookmarks¶

Save map locations and navigate between them. Export bookmarks as JSON and import them later. This is useful for presentations or when you want to demonstrate multiple areas of interest.

Print Control¶

Save the map as PNG, JPEG, or PDF with an optional title. The output resolution is better than a simple screenshot.

Measurement¶

Measure distances by drawing lines or areas by drawing polygons. Switch between units (meters, kilometers, miles, acres, square miles). Clear measurements when done.

Cloud-Native Geospatial Data¶

The most powerful aspect of this plugin is its ability to visualize large geospatial datasets directly in the browser without a server or data download.

Cloud Optimized GeoTIFF (COG)¶

Paste a URL to any COG file and the plugin renders it directly in the browser using the georaster library. For example, you can visualize the 1.5 GB National Land Cover Database without downloading anything or running a tile server. For single-band rasters, you can change the color map interactively.

Zarr¶

Paste a URL to a Zarr dataset, fetch available variables, select one, and choose a color map. The data renders directly in the browser. Zarr is becoming increasingly popular for hosting large-scale scientific data in the cloud.

PMTiles¶

Load PMTiles vector datasets by URL. You can selectively choose which layers to render and click on features to inspect their attributes. The plugin also lets you set a “before layer ID” so you can place labels above your data layer, something that is not easily done with leafmap or ipyleaflet because they treat the basemap as a single layer.

Vector Data (GeoJSON, FlatGeobuf, GeoParquet)¶

Paste a URL to load vector data directly from the cloud. You can customize the fill color, stroke color, and opacity. FlatGeobuf works especially well because it uses HTTP range requests, allowing you to load very large datasets without downloading the entire file. Click on features to inspect their attributes.

STAC Items¶

If you have a URL to a specific STAC item, paste it in, fetch the available assets, and select which one to display (true color, near infrared, etc.). The raster renders directly in the browser with no tile server needed.

STAC Catalog Search¶

Search entire STAC catalogs from the map interface:

Element 84: Search collections like Sentinel-2, filter by date and cloud cover, and display single-band or RGB composites.
Microsoft Planetary Computer: Browse all available catalogs, select datasets like DEMs or land cover, choose a color map, and add to the map.

The search uses your current map view as the spatial filter, so results are relevant to the area you are looking at.

Using in Your Own Projects¶

Each example includes the source code. The TypeScript is straightforward: import the control, create it after the map loads, and add it to the map. For example, adding a minimap control is just a few lines of code. More complex components like the PMTiles control require registering the layer with the layer control for opacity management.

All of these components will be available through the anymap-ts Python package, so you can use them in Jupyter Notebooks. Because the components are built natively in TypeScript, exported HTML maps retain full interactivity without needing a Python kernel.

Resources¶

If you have ideas for new components or run into issues, feel free to open an issue or submit a pull request on GitHub. There is a lot more to come.