Skip to content
Home
Other Libraries
Leaflet
Examples

Leaflet Examples

Getting Started

Maptoolkit basemap tiles in L.tileLayer, with a switcher for seven styles.
Basemap and Style Switcher
Maptoolkit basemap tiles in L.tileLayer, with a switcher for seven styles.
Display a Maptoolkit vector tile map using Leaflet.
Basic Map
Display a Maptoolkit vector tile map using Leaflet.
Colored SVG pins with numbers, labels and data, fitted to the map.
Custom Markers
Colored SVG pins with numbers, labels and data, fitted to the map.
Basemaps, overlays and a legend that shows only what is on the map.
Layer Control and Legend
Basemaps, overlays and a legend that shows only what is on the map.
A locate button with an accuracy circle and error handling.
User Location
A locate button with an accuracy circle and error handling.

Markers & Data

Colored SVG pins with numbers, labels and data, fitted to the map.
Custom Markers
Colored SVG pins with numbers, labels and data, fitted to the map.
Group thousands of markers into clusters on a Leaflet map.
Marker Clustering
Group thousands of markers into clusters on a Leaflet map.
Where people live in Europe, from the Eurostat population grid.
Heatmap
Where people live in Europe, from the Eurostat population grid.
Color countries by a value, with popups and a legend.
Choropleth with Legend
Color countries by a value, with popups and a legend.
Basemaps, overlays and a legend that shows only what is on the map.
Layer Control and Legend
Basemaps, overlays and a legend that shows only what is on the map.
Temperature, rain and wind over a Leaflet basemap.
Temperature, Rain and Wind
Temperature, rain and wind over a Leaflet basemap.

Drawing & Editing

Draw, edit and measure shapes, and export them as GeoJSON.
Draw and Edit Shapes
Draw, edit and measure shapes, and export them as GeoJSON.
Draw with snapping, cut holes, measure, and export GeoJSON.
Draw with Leaflet-Geoman
Draw with snapping, cut holes, measure, and export GeoJSON.

Routing

Calculate a car route and draw it on a Leaflet map with turn-by-turn markers.
Route Display
Calculate a car route and draw it on a Leaflet map with turn-by-turn markers.
Drag A or B to reroute, and hover a step to see it on the map.
Route Planner
Drag A or B to reroute, and hover a step to see it on the map.
A car driving a real route, turned to its heading, with a trail.
Animate a Vehicle
A car driving a real route, turned to its heading, with a trail.
A recorded walk, snapped to the paths it was walked on.
Snapped GPS Track
A recorded walk, snapped to the paths it was walked on.
A bike route colored by what it runs on, with a surface breakdown.
Route by Surface Type
A bike route colored by what it runs on, with a surface breakdown.

Geocoding & Isochrones

Add a geocoder search control to a Leaflet map using the leaflet-control-geocoder plugin.
Geocoder Search
Add a geocoder search control to a Leaflet map using the leaflet-control-geocoder plugin.
Click the map to look up the address at that point.
Reverse Geocoding on Click
Click the map to look up the address at that point.
Fetch a walking isochrone and draw it as a polygon on a Leaflet map.
Walking Area
Fetch a walking isochrone and draw it as a polygon on a Leaflet map.
5, 10 and 15 minutes on foot from one point, as shaded bands.
Travel Time Bands
5, 10 and 15 minutes on foot from one point, as shaded bands.
Drag the origin to see which places are within a 15 minute walk.
Locations Inside an Isochrone
Drag the origin to see which places are within a 15 minute walk.

Elevation

Show a route on a Leaflet map with an interactive elevation profile.
Elevation Profile
Show a route on a Leaflet map with an interactive elevation profile.
Ascent, descent and the steepest section of a hiking route.
Climb Statistics
Ascent, descent and the steepest section of a hiking route.
A hiking route colored from valley to summit, with arrows for the direction.
Route Colored by Elevation
A hiking route colored from valley to summit, with arrows for the direction.

Frameworks

Maptoolkit raster tiles in a React app with react-leaflet.
React Leaflet
Maptoolkit raster tiles in a React app with react-leaflet.
React Leaflet with Maptoolkit raster tiles in a Next.js app.
Next.js with Leaflet
React Leaflet with Maptoolkit raster tiles in a Next.js app.
Maptoolkit raster tiles in a Vue 3 app with vue-leaflet.
Vue Leaflet
Maptoolkit raster tiles in a Vue 3 app with vue-leaflet.
Maptoolkit raster tiles in an Angular app with ngx-leaflet.
Angular with ngx-leaflet
Maptoolkit raster tiles in an Angular app with ngx-leaflet.