MapLibre GL JS Examples

28

A WebGL-powered vector mapping library with 3D terrain and data-driven styling. All examples use MapTiler Cloud tiles.

mapMap Display & Interaction

3D extruded buildings in Prague's old town rendered with MapLibre GL JS.

3D Building Extrusions with MapLibre GL JSAdd 3D extruded buildings from MapTiler vector tiles using fill-extrusion layers.

3D terrain of the Alps near Zinal, Switzerland, rendered with MapLibre GL JS.

3D Terrain with MapLibre GL JSEnable 3D terrain rendering using MapTiler DEM tiles with adjustable exaggeration.

Satellite aerial imagery of a city center shown as a MapLibre GL JS basemap.

Satellite Basemap with MapLibre GL JSDisplay a satellite imagery basemap using the MapTiler satellite style.

Berlin map configured with cooperative scroll and gesture handling in MapLibre GL JS.

Control Map Interactions in MapLibre GL JSEnable cooperative gestures and customize scroll zoom behavior to improve embedded map UX in MapLibre GL JS.

3D globe view of Earth centered on Europe and Africa, rendered with MapLibre GL JS.

Globe Projection with MapLibre GL JSDisplay the map as a 3D globe with atmosphere effects using MapLibre GL JS setProjection API.

MapLibre GL JS map centered on Paris with a marker, loaded with MapTiler vector tiles.

Initialize a MapLibre GL JS MapCreate a maplibregl.Map instance with MapTiler vector tiles, navigation controls, and a marker popup.

Paris map showing the active MapTiler vector style name for runtime style switching.

Switch Vector Styles in MapLibre GL JSChange the map style at runtime using map.setStyle() to switch between MapTiler vector tile styles.

Non-interactive static map image of Prague generated with the MapTiler Static Maps API.

Static Map Image with MapLibre GL JSDisplay a non-interactive map image using the MapTiler Static Maps API alongside an interactive MapLibre map.

pin_dropMarkers, Annotations & Overlays

Custom Marker Icons with MapLibre GL JSUse custom HTML elements or symbol layers with image sprites for marker icons.

Western Europe choropleth map coloring the UK, France, and Germany by value in MapLibre GL JS.

Data-Driven Choropleth with MapLibre GL JSCreate a data-driven choropleth map using GeoJSON polygons and match expressions to color regions by value.

Prague map with a blue line connecting two points across the city in MapLibre GL JS.

Line Layers with MapLibre GL JSDraw a route or path on the map using a GeoJSON LineString source and a line layer with custom paint properties.

Prague map with a filled purple polygon area drawn using a GeoJSON fill layer.

Fill Layers with MapLibre GL JSRender a filled polygon area using a GeoJSON source and a fill layer -- the MapLibre way to draw polygons on the map.

Prague map with two MapLibre GL JS markers and popups.

Add Markers and Popups in MapLibre GL JSPlace maplibregl.Marker instances on the map with clickable Popup overlays using MapLibre GL JS.

Czechia map with markers grouped into numbered clusters using MapLibre GL JS's built-in clustering.

Point Clustering with MapLibre GL JSGroup nearby points into clusters using the built-in GeoJSON source clustering in MapLibre GL JS -- no plugins needed.

Czechia map with circles sized and colored by data value using MapLibre style expressions.

Style Expressions with MapLibre GL JSUse MapLibre style expressions like interpolate and step to dynamically size and color features based on data properties.

searchGeocoding & Search

Central Europe map with an address search box for forward geocoding in MapLibre GL JS.

Address Search with MapLibre GL JSSearch for places by name using the MapTiler Geocoding API and display results on a MapLibre GL JS map.

Prague map used to demonstrate click-to-reverse-geocode lookups with MapLibre GL JS.

Reverse Geocoding with MapLibre GL JSClick anywhere on a MapLibre GL JS map to get the address at that location using the MapTiler reverse geocoding API.

routeRouting & Navigation

Paris map with a driving route traced along the Seine using the OSRM API and MapLibre GL JS.

Display a Route with MapLibre GL JSDisplay a driving route between two points using the OSRM routing API and a GeoJSON line layer in MapLibre GL JS.

my_locationLocation & Real-Time

Prague map with a red rectangular geofence boundary drawn over the city.

Geofencing with MapLibre GL JSDefine a polygon boundary in MapLibre GL JS and check whether a clicked point falls inside or outside the geofence.

Prague map used to demonstrate the built-in GeolocateControl in MapLibre GL JS.

Geolocation Control in MapLibre GL JSShow the user's current position on the map using the built-in maplibregl.GeolocateControl with tracking support.

Prague map with a dashed blue circle standing in for an exact location, for privacy.

Fuzzy Location Circle with MapLibre GL JSShow an approximate location as a fuzzy circle polygon layer instead of an exact point for privacy protection.

Prague map with a simulated moving marker following a path in MapLibre GL JS.

Live GPS Tracking with MapLibre GL JSSimulate a moving marker by updating a GeoJSON source position in real time with setInterval.

insightsAnalytics & Advanced

Prague map on a dark style with an animated pulsing circle layer in MapLibre GL JS.

Animated Data with MapLibre GL JSAnimate a circle layer's radius paint property over time to visualize temporal data changes with requestAnimationFrame.

Prague map with a Finish Drawing control for sketching polygons in MapLibre GL JS.

Draw Polygons with MapLibre GL JSDraw polygons on the map by clicking to place vertices and updating a GeoJSON source in real time.

Prague map with an Export PNG button for saving the MapLibre GL JS canvas as an image.

Export Map as PNG with MapLibre GL JSCapture the current MapLibre GL JS map view as a downloadable PNG image using the WebGL canvas export API.

Prague map on a dark style with a native heatmap layer visualizing point density.

Heatmap Layer with MapLibre GL JSVisualize point density using the native heatmap layer type: no plugins needed.

United States map with state boundaries loaded from a remote GeoJSON file in MapLibre GL JS.

Load GeoJSON Source in MapLibre GL JSFetch a remote GeoJSON file and add it as a source with styled layers on a MapLibre GL JS map.

Paris store locator with a sidebar list of shops and a matching map marker in MapLibre GL JS.

Store Locator with MapLibre GL JSBuild a store locator with a sidebar list and interactive map markers using MapLibre GL JS.

Compare Libraries Official Docs

auto_awesome

Build maps using MapLibre GL JS with AI

Install the MapLibre GL JS skill in your IDE and let AI write the code for you.

auto_awesomeGet skills keyGet a free API key

All examples use MapTiler maps and require a free API key.