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.

Visualize PMTiles in 3D¶

Visualize polygons from a PMTiles source in 3D.

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.

Add zoom and rotation controls to the map.

Ocean Bathymetry 3D¶

Visualize ocean bathymetry in 3D.

Visualze Overture data¶

Visualize Overture Maps data.

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.