---
title: "Leaflet JS with MapTiler maps | Leaflet"
description: "Display MapTiler maps on websites with Leaflet JS web library."
---
> 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 JS with MapTiler maps
[Leaflet](https://www.leafletjs.com) is a lightweight open-source library for online maps. It works efficiently across all major desktop and mobile platforms and can be extended with lots of [plugins](#maptiler-leaflet-plugins).
You can use your MapTiler maps in Leaflet as vector tiles or the more traditional raster tiles. You can also add a geocoding control to your map with one line of code.
## Get started
This is the way to use your MapTiler maps in Leaflet JS. Simply use the code below the map.
1. Copy the following code, paste it into your favorite text editor, and save it as a `.html` file.
```html
Display a map
```
1. Install the npm package.
```bash
npm install --save leaflet
```
2. Include the CSS file.
If you have a bundler that can handle CSS, you can [`import`](#) the CSS or include it with a [``](#) in the head of the document via the CDN
```js
import "leaflet/dist/leaflet.css";
```
```html
```
3. Include the following code in your JavaScript file (Example: main.js).
```js
import L from 'leaflet';
const key = 'YOUR_MAPTILER_API_KEY_HERE';
const map = L.map('map').setView([49.2125578, 16.62662018], 14); //starting position
L.tileLayer(`https://api.maptiler.com/maps/streets-v4/{z}/{x}/{y}.png?key=${key}`,{ //style URL
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e",
crossOrigin: true
}).addTo(map);
```
1. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/credentials/api-key/#secure-key) before you publish it.
## Vector Tiles and Geocoding with MapTiler Leaflet plugins
Leaflet is meant to be as lightweight as possible and focuses on a core set of features. An easy way to extend its functionality is to use plugins.
- Check out the [**Use Leaflet JS with Vector Tiles**](https://docs.maptiler.com/leaflet/examples/vector-tiles-in-leaflet-js/) example.
- Check out the [**Leaflet geocoding control how to search places**](https://docs.maptiler.com/leaflet/examples/geocoding-control/) example.
### Maptiler SDK layer (Vector Tiles layer)
[Leaflet Vector Tiles basemap plugin](https://github.com/maptiler/leaflet-maptilersdk)
The [L.maptiler.maptilerLayer()](https://github.com/maptiler/leaflet-maptilersdk) plugin is how you display vector tiles in Leaflet JS.
Using the **L.maptiler.maptilerLayer** you have:
- All the power of [MapTiler SDK JS](https://docs.maptiler.com/sdk-js/) to use vector tile layers (for data overlays) in your applications without any kind of limitation (show millions of geometries, choropleth maps, etc).
- Multi-lingual vector tiles basemaps for Leaflet using the MapTiler SDK.
- Use any of the many [professional looking basemaps](https://docs.maptiler.com/sdk-js/api/map-styles/) created by MapTiler or use a map with your own custom basemap.
- Easily change the language of your map without having to create a new basemap.
- Locate the user and center the map accordingly.
```js
const mtLayer = L.maptiler.maptilerLayer({ apiKey: `YOUR_MAPTILER_API_KEY_HERE` }).addTo(map);
```
### Geocoding control
[Leaflet geocoding control](https://github.com/maptiler/maptiler-geocoding-control#example-for-leaflet-using-module-bundler)
The [L.control.maptilerGeocoding()](https://github.com/maptiler/maptiler-geocoding-control#example-for-leaflet-using-module-bundler) plugin for Leaflet utilizes [MapTiler Geocoding API](https://www.maptiler.com/cloud/geocoding/). With this control, users of your application can find any place on Earth (States, Cities, Streets, …) down to the address level, restrict the search area to a specific country, highlight search results on the map, autocomplete words while typing, and much more.
```js
L.control.maptilerGeocoding({ apiKey: `YOUR_MAPTILER_API_KEY_HERE` }).addTo(map);
```
## Learn more
If you want to learn how to initialize a map and load the style see the [Learn the basics - How to use Leaflet JS](./examples/how-to-use-leaflet/) tutorial.
Unlock your Leaflet mapping potential now! Look at the [Leaflet JS examples](https://docs.maptiler.com/leaflet/examples/) we have prepared, from a quick start with Leaflet to advanced examples of how to load millions of points or use vector tiles with Leaflet JS.
