---
title: "Leaflet built-in basemap styles | Leaflet"
description: "Change MapTiler basemap styles easily using Leaflet JS maps."
---
> 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 built-in basemap styles
This tutorial shows how to change the basemap (background map) style. Our built-in styles are designed to make it easier for you to create beautiful maps, without the need for extra coding or worrying about outdated versions. Check out the [list of built-in styles](https://github.com/maptiler/maptiler-sdk-js#many-styles-to-choose-from).
### NPM module setup
```bash
npm install --save @maptiler/leaflet-maptilersdk leaflet
```
#### main.js
```js
import { MaptilerLayer, MapStyle } from '@maptiler/leaflet-maptilersdk';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
const key = 'YOUR_MAPTILER_API_KEY_HERE';
const map = L.map('map').setView([50, 20], 4);
const mtLayer = new MaptilerLayer({
apiKey: key,
style: MapStyle.STREETS, // optional
}).addTo(map);
document.getElementById('buttons').addEventListener('click', function (event) {
let style = MapStyle.STREETS;
// Retrieve basemap style based on button id
switch (event.target.id) {
case "streets":
style = MapStyle.STREETS;
break;
case "outdoor":
style = MapStyle.OUTDOOR;
break;
case "dark":
style = MapStyle.DATAVIZ.DARK;
break;
case "light":
style = MapStyle.DATAVIZ.LIGHT;
break;
}
mtLayer.setStyle(style);
});
```
#### index.html
```html
Leaflet built-in basemap styles | NPM example
```
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.
## Related examples
### [Custom Map](https://docs.maptiler.com/leaflet/examples/custom-map/)
Tutorials
Display custom MapTiler maps on web pages with Leaflet JS.
### [Multi-lingual map](https://docs.maptiler.com/leaflet/examples/map-language/)
Examples
Change the default map label language in Leaflet JS.