Skip to content

Overview

This page contains examples of using MapLibre with Leafmap. Built on top of the py-maplibregl Python package, Leafmap makes it much easier to create stunning 3D maps with MapLibre in just a few lines of code. Some examples are adapted from the MapLibre documentation and py-maplibregl examples. Credits to the original authors.

To preview the examples, visit https://maps.gishub.org.

Video tutorials on YouTube

Video tutorials on how to use Leafmap with MapLibre are available on YouTube: https://bit.ly/maplibre

Display buildings in 3D

Use extrusions to display buildings' height in 3D.

Create a 3D choropleth map

Create a 3D choropleth map of Europe with countries extruded

Extrude polygons for 3D indoor mapping

Create a 3D indoor map with the fill-extrude-height paint property.

Construct 3D map styles with MapTiler

3D Terrain

Go beyond hillshade and show elevation in actual 3D.

Add 3D buildings and GIF animations

Add 3D buildings and GIF animations to the map.

Add a default marker

Add a default marker to the map.

Add a colorbar

Add a colorbar to the map.

Add components to the map

Add various components to the map, including legends, colorbars, text, and HTML content.

Add deck.gl layers

Add deck.gl layers to the map.

Add GIF animations to the map

Add GIF animations to the map.

Add HTML content to the map

Add HTML content to the map.

Add an icon to the map

Add an icon to the map from an external URL and use it in a symbol layer.

Add a generated icon to the map

Add an icon to the map that was generated at runtime.

Add a legend to the map

Add a custom legend to the map.

Add a logo to the map

Add an image to the map as a logo.

Add text to the map

Add text to the map.

Animate a line

Animate a line by updating a GeoJSON source on each frame.

Animate map camera around a point

Animate the map camera around a point.

Animate a series of images

Use a series of image sources to create an animation.

Animate a point

Animate the position of a point by updating a GeoJSON source on each frame.

Animate a point along a route

Animate a point along the distance of a line.

Change the default position for attribution

Place attribution in the top-left position when initializing a map.

Customize basemaps

Customize basemaps with MapTiler and xyzservices.

Center the map on a clicked symbol

Use events and flyTo to center the map on a symbol.

Change building color based on zoom level

Use the interpolate expression to ease-in the building layer and smoothly fade from one color to the next.

Change the case of labels

Use the upcase and downcase expressions to change the case of labels.

Cloud Optimized GeoTIFF (COG)

Visualize Cloud Optimized GeoTIFF (COG) files with TiTiler.

Create and style clusters

Use MapLibre GL JS' built-in functions to visualize points as clusters.

Change a layer's color with buttons

Use setPaintProperty to change a layer's fill color.

Countries filter

Utilize and refine data from the MapTiler Countries to create a Choropleth map of the US states.

Customize marker icon image

Use the icon-image property to change the icon image of a marker.

Style lines with a data-driven property

Create a visualization with a data expression for line-color.

Disable scroll zoom

Prevent scroll from zooming a map.

Display and style rich text labels

Use the format expression to display country labels in both English and in the local language.

Create a draggable Marker

Drag the marker to a new location on a map and populate its coordinates in a display.

Draw features on the map

Use the draw control to draw features on the map.

Use a fallback image

Use a coalesce expression to display another image when a requested image is not available.

Add a pattern to a polygon

Use fill-pattern to draw a polygon from a repeating image pattern.

Fit a map to a bounding box

Fit the map to a specific area, regardless of the pixel size of the map.

Fly to a location

Use flyTo to smoothly interpolate between locations.

Slowly fly to a location

Use flyTo with flyOptions to slowly zoom to a location.

View a fullscreen map

Toggle between current view and fullscreen mode.

Add a new layer below labels

Use the second argument of addLayer to add a layer below labels.

Add a GeoJSON line

Add a GeoJSON line to a map using addSource, then style it using addLayer’s paint properties.

Draw GeoJSON points

Draw points from a GeoJSON collection to a map.

Add a GeoJSON polygon

Style a polygon with the fill layer type.

Add a GeoPandas GeoDataFrame

Add a GeoPandas GeoDataFrame to a map.

Google Earth Engine

Add Google Earth Engine data layers to a map.

Create a heatmap layer

Visualize earthquake frequency by location using a heatmap layer.

Display a non-interactive map

Disable interactivity to create a static map.

Jump to a series of locations

Use the jumpTo function to showcase multiple locations.

Change a map's language

Use setLayoutProperty to switch languages dynamically.

Add a layer control

Control layer visibility with a layer control.

Create a gradient line using an expression

Use the line-gradient paint property and an expression to visualize distance from the starting point of a line.

Add live realtime data

Use realtime GeoJSON data streams to move a symbol on your map.

Update a feature in realtime

Change an existing feature on your map in real-time by updating its data.

View local GeoJSON

View local GeoJSON without server upload.

View local raster datasets

View local raster datasets with localtileserver

Locate the user

Geolocate the user and then track their current location on the map using the GeolocateControl.

Add a raster tile source

Add a third-party raster source to the map.

Use MapTiler styles

Use MapTiler styles to customize the look of your map.

Get coordinates of the mouse pointer

Show mouse position on hover with pixel and latitude and longitude coordinates.

Add multiple geometries from one GeoJSON source

Add a polygon and circle layer from the same GeoJSON source.

Display map navigation controls

Add zoom and rotation controls to the map.

Ocean Bathymetry 3D

Visualize ocean bathymetry in 3D.

PMTiles source and protocol

Uses the PMTiles plugin and protocol to present a map.

Restrict map panning to an area

Prevent a map from being panned to a different place by setting max_bounds.

Display a satellite map

Display a satellite raster baselayer.

Set pitch and bearing

Initialize a map with pitch and bearing camera options.

Visualize SpatioTemporal Asset Catalog (STAC)

Visualize SpatioTemporal Asset Catalog (STAC) items with TiTiler.

Export 3D maps as HTML files for website hosting

Export 3D maps as HTML files for website hosting.

Variable label placement

Use text-variable-anchor to allow high priority labels to shift position to stay on the map.

Variable label placement with offset

Use text-variable-anchor-offset to allow high priority labels to shift position to stay on the map.

Add a vector tile source

Add a vector source to a map.

Add a video

Display a video on top of a satellite raster baselayer.

Visualize population density

Use a variable binding expression to calculate and display population density.

Add a WMS source

Add an external Web Map Service raster layer to the map using addSource's tiles option.

Fit to the bounds of a LineString

Get the bounds of a LineString.