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.