Overview

These examples aim to replicate as much of the MapLibre GL JS Examples as possible.

Display buildings in 3D

Use extrusions to display buildings' height in 3D.

Extrude polygons for 3D indoor mapping

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

3D Terrain

Go beyond hillshade and show elevation in actual 3D.

Add an icon to the map

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

Change the default position for attribution

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

Change the case of labels

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

Create and style clusters

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

Cooperative gestures

Enable cooperative gestures with a specific language. See how it behaves in fullscreen mode.

 Add custom icons with Symbols

Add custom symbol icons to your map.

Style lines with a data-driven property

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

Disable map rotation

Prevent users from rotating a map.

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.

Add a pattern to a polygon

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

View a fullscreen map

Toggle between current view and fullscreen mode. Does not work on iPhones because a pseudo-fullscreen is used, and the code is embedded in an iframe, which prevents the map from scaling.

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.

Create a heatmap layer

Visualize earthquake frequency by location using a heatmap layer.

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.

PMTiles source and protocol

Uses the PMTiles plugin and protocol to present a map.

Add a WMS source

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