Introducing anymap-ts: Interactive Maps with TypeScript and Jupyter
Introducing anymap-ts: Interactive Geospatial Maps with TypeScript and Jupyter¶
I am excited to introduce anymap-ts, a new Python package that makes geospatial visualization easy. Built on MapLibre and TypeScript from the ground up, anymap-ts brings the same rich mapping experience to both web applications and Jupyter Notebooks. It supports many popular geospatial formats, including GeoJSON, GeoParquet, FlatGeobuf, PMTiles, Cloud Optimized GeoTIFF (COG), Zarr, COPC LiDAR, and Gaussian Splat. It also includes a powerful set of built-in UI components that you can mix and match like building blocks.
Video tutorial: Introducing anymap-ts for Interactive Geospatial Visualization
Why anymap-ts¶
I have been building Python mapping packages (such as leafmap) for years. Those packages rely on upstream JavaScript libraries exposed through Python widget bridges like ipyleaflet and ipywidgets. This architecture creates several pain points:
Adding new features often requires changes to the upstream JavaScript library first, then the Python wrapper, then the widget layer.
Once you export a map to HTML, the interactive toolbar stops working because there is no Python kernel.
Communication between the front end and back end adds complexity and limits what you can do in the browser.
With anymap-ts, I built the entire toolbar and all the UI components directly in TypeScript on top of MapLibre. This means I have full control over what features to add, and I can iterate quickly without waiting on upstream packages. The Python package simply wraps the TypeScript library, so every feature works in both the web and Jupyter. Exported HTML maps retain full interactivity because everything runs in JavaScript, with no Python kernel required.
What You Will Need¶
Python 3.9 or later (for the Jupyter version).
A modern web browser.
Install with pip or conda:
pip install anymap-tsOr try it instantly in your browser with no installation using JupyterLite.
Getting Started¶
Import the map class and create a map. By default, it displays the full control grid toolbar with all available tools.
from anymap_ts import MapLibreMap
m = MapLibreMap(zoom=2)
mThe toolbar appears in the upper right corner with 26 tools. Each button activates a unique feature. You can customize which tools appear using the include or exclude parameters:
# Show only specific tools
m = MapLibreMap(zoom=2, include=["basemap", "layer_control", "search", "inspect"])
m# Hide specific tools
m = MapLibreMap(zoom=2, exclude=["minimap", "street_view", "gaussian_splat"])
mYou can also adjust the toolbar layout by changing the number of rows and columns.
Built-in Tools¶
Layer Control¶
The layer control panel lets you turn data layers on and off, adjust opacity with a slider, and reorder layers by dragging. This works for both basemap layers and your own data layers. You can also add basemaps (Google, OpenStreetMap, and others) with a single click from the basemap selector.
3D Globe and Terrain¶
Switch between a flat map and a 3D globe view with one click. You can also enable 3D terrain visualization. Hold Ctrl and drag your mouse to change the pitch and bearing for a perspective view.
Search and Inspect¶
The search tool lets you find any location by name. The inspect tool lets you click on map features to query their attributes, working for both your data layers and the vector tile basemap.
Upload Local Data¶
Click the upload icon to load files from your computer directly onto the map. The tool supports many geospatial formats including GeoJSON, FlatGeobuf, and GeoParquet.
View State Manager¶
The view state tool displays your current map center, zoom level, and bounding box. You can also draw a rectangle on the map to get the bounding box coordinates, which is handy for sourcing data from other services.
Measurement¶
Measure distances by drawing lines on the map, or measure areas by drawing polygons. You can switch between different units (meters, kilometers, miles) and clear measurements when done.
Geometry Editor¶
The editor tool lets you create, modify, and manage vector features directly on the map:
Draw points, lines, and polygons.
Edit vertices, move features, and rotate shapes.
Select multiple features and merge them.
Undo and redo operations.
Save features to your computer as GeoJSON and load them back.
Bookmarks¶
Save map locations as bookmarks and navigate between them. Each bookmark stores the full view state including center, zoom, pitch, and bearing. You can export and import bookmark collections.
Print / Export¶
Save the current map view as PNG, JPEG, or PDF with an optional title. This is similar to a screenshot but with more control over the output.
Minimap¶
Display an overview minimap in the corner showing a wider context of your current location. You can drag the rectangle in the minimap to navigate.
Street View¶
Integrated Google Street View lets you click any location on the map to view street-level imagery. A dot on the map shows exactly where the camera is pointing. You can navigate through the street view and rotate 360 degrees.
Cloud-Native Data Support¶
Vector Data (GeoJSON, FlatGeobuf, GeoParquet)¶
Paste a URL to load vector data directly from the cloud. FlatGeobuf works especially well because it uses HTTP range requests, so you can load very large datasets without downloading the entire file.
Raster Data (Cloud Optimized GeoTIFF)¶
Load COG files by URL. Unlike leafmap, which requires a tile server endpoint, anymap-ts uses the georaster library to render COG data directly in the browser. No server needed.
Zarr¶
Paste a Zarr dataset URL, fetch the available variables, customize the color map, and add it to the map. Zarr is becoming increasingly popular for hosting large-scale scientific data in the cloud.
PMTiles¶
Load PMTiles vector tiles by URL. You can select which data layers to display and inspect feature attributes by clicking on the map.
STAC (SpatioTemporal Asset Catalog)¶
Search geospatial data catalogs directly from the map interface:
Element 84: Search collections like Sentinel-2, filter by date range, and load single-band or RGB composites.
Microsoft Planetary Computer: Browse catalogs, select datasets (DEMs, land cover, etc.), and add them to the map with customizable color maps.
LiDAR Point Clouds¶
Load USGS 3DEP LiDAR data by searching for available datasets at any location. The data streams directly from AWS, so you can visualize billions of points without downloading anything.
Gaussian Splat¶
Visualize 3D Gaussian Splat models by pasting a URL. This is useful for photogrammetric 3D reconstructions and other 3D data.
Resources¶
I am very excited about this package. It gives me full control over the mapping stack, from TypeScript components all the way to the Python API. Going forward, anymap-ts will eventually replace many of the older packages I have built. If you have feature requests or run into issues, please visit the GitHub repository and open an issue. I would love to hear your feedback.