Leaflet Examples

22

A lightweight, mobile-friendly 2D mapping library with a large plugin ecosystem. All examples use MapTiler Cloud tiles.

mapMap Display & Interaction

Satellite aerial view of Rome, Italy shown as a Leaflet tile layer with MapTiler imagery.

Satellite Basemap with LeafletDisplay MapTiler satellite imagery with an optional labels overlay toggle using Leaflet tile layer controls.

London map configured with custom Leaflet scroll and touch gesture controls.

Control Map Gestures in LeafletConfigure Leaflet map interactions including scroll wheel zoom, drag panning, double-click zoom, and touch gestures using L.map options.

Leaflet map centered on Paris with a marker and popup, loaded with MapTiler tiles.

Initialize a Leaflet Map with MapTiler TilesCreate and embed an interactive Leaflet map with MapTiler raster tiles, pan/zoom controls, and a marker in just a few lines of code.

Prague map with a layer switcher for changing MapTiler tile styles in Leaflet.

Switch Tile Layers in LeafletSwitch between MapTiler raster tile styles at runtime using Leaflet's built-in L.control.layers switcher.

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

Static Map Image with LeafletDisplay a non-interactive map image using the MapTiler Static Maps API: perfect for thumbnails, emails, and social previews.

pin_dropMarkers, Annotations & Overlays

Custom Marker Icons with LeafletReplace the default marker pin with custom PNG or SVG icons using L.icon() and L.divIcon().

Central Europe choropleth map coloring Germany, Poland, and France by value in Leaflet.

Choropleth Map with LeafletCreate a data-driven choropleth map that colors regions by value using inline GeoJSON and Leaflet.

Paris map with a blue polyline connecting the Eiffel Tower area to the city center.

Draw Polylines on a Leaflet MapDraw a styled L.polyline connecting multiple coordinates on a Leaflet map to visualize routes or paths.

Paris map with a filled red polygon drawn over the Louvre and Chatelet area.

Draw Polygons on a Leaflet MapDraw filled L.polygon areas on a Leaflet map with custom stroke and fill styles.

Paris map with two Leaflet markers and popups placed near the Seine.

Add Markers and Popups to a Leaflet MapPlace L.marker pins on a Leaflet map with interactive popups containing custom HTML content.

Wider Paris region set up for grouping nearby markers into clusters with Leaflet.markercluster.

Marker Clustering with LeafletGroup nearby markers into expandable clusters using the Leaflet.markercluster plugin for better performance with large datasets.

searchGeocoding & Search

Western Europe map with an address search box for forward geocoding in Leaflet.

Address Search with LeafletAdd an autocomplete address search dropdown to a Leaflet map using the MapTiler Geocoding API.

Paris map used to demonstrate click-to-reverse-geocode lookups with Leaflet.

Reverse Geocoding with LeafletClick anywhere on a Leaflet map to get the address at that location using MapTiler reverse geocoding.

routeRouting & Navigation

Paris map with a driving route drawn between two points using the OSRM API and Leaflet.

Route Between Two Points with LeafletDisplay a driving route between two points on a Leaflet map using the OSRM routing API and L.polyline.

my_locationLocation & Real-Time

Paris map with a red rectangular geofence boundary drawn around the city center.

Geofencing with LeafletDefine a polygon boundary and check whether a point is inside or outside the geofence.

Central Europe map used to demonstrate the browser Geolocation API in Leaflet.

Show User Location on a Leaflet MapDisplay the user's current GPS position on a Leaflet map using the browser Geolocation API with an accuracy circle.

London map with a blue fuzzy-radius circle standing in for an exact location, for privacy.

Fuzzy Location with LeafletDisplay an approximate location as a fuzzy L.circle area instead of an exact marker pin for privacy protection.

insightsAnalytics & Advanced

London map with Leaflet.draw controls ready for sketching shapes on the map.

Drawing Tools with LeafletAdd interactive drawing and editing tools to a Leaflet map using the Leaflet.draw plugin.

Paris map with a single marker, ready to be captured as a PNG with Leaflet and html2canvas.

Export Leaflet Map as PNGCapture the current Leaflet map view as a downloadable PNG image using the html2canvas library.

Paris map with a point-density heatmap overlay using the Leaflet.heat plugin.

Heatmap Visualization with LeafletVisualize point density as a heatmap on a Leaflet map using the leaflet.heat plugin.

Central Europe map with GeoJSON point markers loaded and styled in Leaflet.

Load GeoJSON Data in LeafletFetch a GeoJSON file and render its features on a Leaflet map with custom styling and interactive popups.

Paris store locator with a sidebar list of five shops and matching map markers in Leaflet.

Store Locator with LeafletBuild a store locator with a sidebar list and interactive map pins using Leaflet.

Compare Libraries Official Docs

auto_awesome

Build maps using Leaflet with AI

Install the Leaflet 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.