--- title: "Leaflet Examples | Leaflet" description: "Explore interactive Leaflet JS examples to inspire your map projects." --- > For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL. # Leaflet Examples [![Get started with Leaflet](https://docs.maptiler.com/assets/img/example-card.webp) ## Get started Tutorials Quickly get started with Leaflet JS web mapping library.](https://docs.maptiler.com/leaflet/examples/get-started/) [![How to use Leaflet](https://docs.maptiler.com/assets/img/example-card.webp) ## How to use Leaflet Tutorials Create and display Leaflet maps on web pages with MapTiler.](https://docs.maptiler.com/leaflet/examples/how-to-use-leaflet/) [![Use Leaflet JS with Vector Tiles](https://docs.maptiler.com/assets/img/example-card.webp) ## Vector Tiles in Leaflet Tutorials Display MapTiler vector tiles in Leaflet using maptilersdk plugin.](https://docs.maptiler.com/leaflet/examples/vector-tiles-in-leaflet-js/) [![Display a Marker on the map using Leaflet](https://docs.maptiler.com/assets/img/example-card.webp) ## Display Marker Tutorials Add default map markers using Leaflet JS web mapping library.](https://docs.maptiler.com/leaflet/examples/default-marker/) [![How to use Leaflet with React and Vector Tiles.](https://docs.maptiler.com/assets/img/example-card.webp) ## Leaflet with React Tutorials Integrate Leaflet and MapTiler Vector Tiles in React applications.](https://docs.maptiler.com/leaflet/examples/react/) [![How to use Leaflet with TypeScript](https://docs.maptiler.com/assets/img/example-card.webp) ## Leaflet with TypeScript Tutorials Install Leaflet via NPM to display maps in TypeScript apps.](https://docs.maptiler.com/leaflet/examples/ts-get-started/) [![How to use Leaflet with NPM](https://docs.maptiler.com/assets/img/example-card.webp) ## Leaflet with NPM Tutorials Install Leaflet via NPM to create and display web maps.](https://docs.maptiler.com/leaflet/examples/npm-get-started/) [![How to search places using Leaflet geocoding control](https://docs.maptiler.com/assets/img/example-card.webp) ## Geocoding control Tutorials Geocoding Search places with MapTiler geocoding control in Leaflet JS.](https://docs.maptiler.com/leaflet/examples/geocoding-control/) [![How to create a choropleth Map from GeoJSON using Leaflet](https://docs.maptiler.com/assets/img/example-card.webp) ## Choropleth GeoJSON Tutorials Create a styled choropleth map using GeoJSON and Leaflet.](https://docs.maptiler.com/leaflet/examples/choropleth-geojson/) [![Show Polygon Data from GeoJSON on the Map](https://docs.maptiler.com/assets/img/example-card.webp) ## GeoJSON Layer Tutorials Add GeoJSON polygon overlays to Leaflet JS maps.](https://docs.maptiler.com/leaflet/examples/geojson-polygon/) [![Raster tiles in Leaflet JS](https://docs.maptiler.com/assets/img/example-card.webp) ## Raster tiles Tutorials Display MapTiler raster tiles in Leaflet JS.](https://docs.maptiler.com/leaflet/examples/raster-tiles-in-leaflet-js/) [![Show Raster Image on the Map using Leaflet](https://docs.maptiler.com/assets/img/example-card.webp) ## Raster Layer Tutorials Add raster image overlays to Leaflet JS maps.](https://docs.maptiler.com/leaflet/examples/raster-layer/) [![How to display a custom map on a web with Leaflet](https://docs.maptiler.com/assets/img/example-card.webp) ## Custom Map Tutorials Display custom MapTiler maps on web pages with Leaflet JS.](https://docs.maptiler.com/leaflet/examples/custom-map/) [![Leaflet with Vite and MapTiler Vector Tiles in vanilla JS (named import)](https://docs.maptiler.com/assets/img/example-card.webp) ## Leaflet with Vite (named import) Tutorials Integrate Leaflet vector tiles in Vite vanilla JS apps (named).](https://docs.maptiler.com/leaflet/examples/vite-vanilla-js-named/) [![How to use Leaflet with Vite and MapTiler Vector Tiles in vanilla JS](https://docs.maptiler.com/assets/img/example-card.webp) ## Leaflet with Vite (vanilla JS) Tutorials Integrate Leaflet and MapTiler Vector Tiles in Vite vanilla JS.](https://docs.maptiler.com/leaflet/examples/vite-vanilla-js-default/) [![How to use Leaflet with Next.js and Vector Tiles.](https://docs.maptiler.com/assets/img/example-card.webp) ## Leaflet with Next.js Tutorials Integrate Leaflet and MapTiler Vector Tiles in Next.js applications.](https://docs.maptiler.com/leaflet/examples/nextjs/) [![Display thousands of lines in Leaflet](https://docs.maptiler.com/assets/img/example-card.webp) ## Display thousands of lines in Leaflet Examples Display thousands of lines efficiently in Leaflet using maptilersdk.](https://docs.maptiler.com/leaflet/examples/helpers-polyline/) [![Display thousands of polygons in Leaflet](https://docs.maptiler.com/assets/img/example-card.webp) ## Display thousands of polygons in Leaflet Examples Display thousands of polygons efficiently in Leaflet using maptilersdk.](https://docs.maptiler.com/leaflet/examples/helpers-polygon/) [![How to create a heatmap layer in Leaflet](https://docs.maptiler.com/assets/img/example-card.webp) ## How to create a heatmap layer in Leaflet Examples Create heatmap layers in Leaflet using the maptilersdk plugin.](https://docs.maptiler.com/leaflet/examples/helpers-heatmap/) [![Plotting thousands or millions of points in Leaflet](https://docs.maptiler.com/assets/img/example-card.webp) ## Plotting millions of points in Leaflet Examples Display millions of points efficiently in Leaflet using maptilersdk.](https://docs.maptiler.com/leaflet/examples/helpers-point/) [![Get the user's location using the GPS with Leaflet geolocate control](https://docs.maptiler.com/assets/img/example-card.webp) ## Geolocate control Examples Get user location using GPS and Leaflet geolocate control.](https://docs.maptiler.com/leaflet/examples/geolocate-user/) [![Map events in Leaflet](https://docs.maptiler.com/assets/img/example-card.webp) ## Map events Examples Handle map events in Leaflet for interactive and responsive applications.](https://docs.maptiler.com/leaflet/examples/map-events/) [![Leaflet multi-lingual map](https://docs.maptiler.com/assets/img/example-card.webp) ## Multi-lingual map Examples Change the default map label language in Leaflet JS.](https://docs.maptiler.com/leaflet/examples/map-language/) [![Leaflet built-in basemap styles](https://docs.maptiler.com/assets/img/example-card.webp) ## Built-in basemap styles Examples Change MapTiler basemap styles easily using Leaflet JS maps.](https://docs.maptiler.com/leaflet/examples/map-style/) [![Visualize points as cluster maps in Leaflet](https://docs.maptiler.com/assets/img/example-card.webp) ## Points as cluster Examples Visualize data points as cluster maps using Leaflet JS.](https://docs.maptiler.com/leaflet/examples/cluster/) [![Leaflet marker with a custom icon](https://docs.maptiler.com/assets/img/example-card.webp) ## Custom icon marker Examples Define and use custom marker icons in Leaflet JS maps.](https://docs.maptiler.com/leaflet/examples/custom-marker/) [![Leaflet detect retina/HiDPI display](https://docs.maptiler.com/assets/img/example-card.webp) ## Detect retina/HiDPI Examples Detect retina/HiDPI displays for high-resolution Leaflet JS map images.](https://docs.maptiler.com/leaflet/examples/detect-retina/) [![How to make a map with pins using Leaflet](https://docs.maptiler.com/assets/img/example-card.webp) ## Make a map with pins Examples Create maps with custom pins and markers in Leaflet JS.](https://docs.maptiler.com/leaflet/examples/map-with-pins/) Reset filter Founds X results.