Leaflet Examples

Get started with Leaflet

Get started

Tutorials

Quickly get started with Leaflet JS web mapping library.
How to use Leaflet

How to use Leaflet

Tutorials

Create and display Leaflet maps on web pages with MapTiler.
Use Leaflet JS with Vector Tiles

Vector Tiles in Leaflet

Tutorials

Display MapTiler vector tiles in Leaflet using maptilersdk plugin.
Display a Marker on the map using Leaflet

Display Marker

Tutorials

Add default map markers using Leaflet JS web mapping library.
How to use Leaflet with React and Vector Tiles.

Leaflet with React

Tutorials

Integrate Leaflet and MapTiler Vector Tiles in React applications.
How to use Leaflet with TypeScript

Leaflet with TypeScript

Tutorials

Install Leaflet via NPM to display maps in TypeScript apps.
How to use Leaflet with NPM

Leaflet with NPM

Tutorials

Install Leaflet via NPM to create and display web maps.
How to search places using Leaflet geocoding control

Geocoding control

Tutorials Geocoding

Search places with MapTiler geocoding control in Leaflet JS.
How to create a choropleth Map from GeoJSON using Leaflet

Choropleth GeoJSON

Tutorials

Create a styled choropleth map using GeoJSON and Leaflet.
Show Polygon Data from GeoJSON on the Map

GeoJSON Layer

Tutorials

Add GeoJSON polygon overlays to Leaflet JS maps.
Raster tiles in Leaflet JS

Raster tiles

Tutorials

Display MapTiler raster tiles in Leaflet JS.
Show Raster Image on the Map using Leaflet

Raster Layer

Tutorials

Add raster image overlays to Leaflet JS maps.
How to display a custom map on a web with Leaflet

Custom Map

Tutorials

Display custom MapTiler maps on web pages with Leaflet JS.
Leaflet with Vite and MapTiler Vector Tiles in vanilla JS (named import)

Leaflet with Vite (named import)

Tutorials

Integrate Leaflet vector tiles in Vite vanilla JS apps (named).
How to use Leaflet with Vite and MapTiler Vector Tiles in vanilla JS

Leaflet with Vite (vanilla JS)

Tutorials

Integrate Leaflet and MapTiler Vector Tiles in Vite vanilla JS.
How to use Leaflet with Next.js and Vector Tiles.

Leaflet with Next.js

Tutorials

Integrate Leaflet and MapTiler Vector Tiles in Next.js applications.
Display thousands of lines in Leaflet

Display thousands of lines in Leaflet

Examples

Display thousands of lines efficiently in Leaflet using maptilersdk.
Display thousands of polygons in Leaflet

Display thousands of polygons in Leaflet

Examples

Display thousands of polygons efficiently in Leaflet using maptilersdk.
How to create a heatmap layer in Leaflet

How to create a heatmap layer in Leaflet

Examples

Create heatmap layers in Leaflet using the maptilersdk plugin.
Plotting thousands or millions of points in Leaflet

Plotting millions of points in Leaflet

Examples

Display millions of points efficiently in Leaflet using maptilersdk.
Get the user's location using the GPS with Leaflet geolocate control

Geolocate control

Examples

Get user location using GPS and Leaflet geolocate control.
Map events in Leaflet

Map events

Examples

Handle map events in Leaflet for interactive and responsive applications.
Leaflet multi-lingual map

Multi-lingual map

Examples

Change the default map label language in Leaflet JS.
Leaflet built-in basemap styles

Built-in basemap styles

Examples

Change MapTiler basemap styles easily using Leaflet JS maps.
Visualize points as cluster maps in Leaflet

Points as cluster

Examples

Visualize data points as cluster maps using Leaflet JS.
Leaflet marker with a custom icon

Custom icon marker

Examples

Define and use custom marker icons in Leaflet JS maps.
Leaflet detect retina/HiDPI display

Detect retina/HiDPI

Examples

Detect retina/HiDPI displays for high-resolution Leaflet JS map images.
How to make a map with pins using Leaflet

Make a map with pins

Examples

Create maps with custom pins and markers in Leaflet JS.