<head>
  <script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet-providers@latest/leaflet-providers.js"></script>
</head>

Usage

Leaflet-providers providers are referred to with a provider[.<variant>]-string. Let's say you want to add the nice Watercolor style from Stamen to your map, you pass Stadia.StamenWatercolor to the L.tileLayer.provider-constructor, which will return a L.TileLayer instance for Stamens Watercolor tile layer.

// add Stamen Watercolor to map.
L.tileLayer.provider('Stadia.StamenWatercolor').addTo(map);

Providers

Leaflet-providers provides tile layers from different providers, including OpenStreetMap, Esri and OpenWeatherMap. The full listing of free to use layers can be previewed. The page will show you the name to use with leaflet-providers.js and the code to use it without dependencies.

Providers requiring registration

In addition to the providers you are free1 to use, we support some layers which require registration.

HERE

In order to use HERE layers, you must register. Once registered, you can create an apiKey which you have to pass to L.tileLayer.provider in the options:

L.tileLayer.provider('HERE.liteDay', {
    apiKey: '<insert apiKey here>'
}).addTo(map);

You can still pass app_id and app_code in legacy projects:

L.tileLayer.provider('HERE.terrainDay', {
    app_id: '<insert ID here>',
    app_code: '<insert ID here>'
}).addTo(map);

Jawg Maps

In order to use Jawg Maps, you must register. Once registered, your access token will be located here and you will access to all Jawg default maps (variants) and your own customized maps :

L.tileLayer.provider('Jawg.Streets', {
    variant: '<insert map id here or blank for default variant>',
    accessToken: '<insert access token here>'
}).addTo(map);

Mapbox

In order to use Mapbox maps, you must register. You can get map_ID (e.g. "mapbox/satellite-v9") and ACCESS_TOKEN from Mapbox projects:

L.tileLayer.provider('MapBox', {
    id: '<insert map_ID here>',
    accessToken: '<insert ACCESS_TOKEN here>'
}).addTo(map);

The currently-valid Mapbox map styles, to use for map_IDs, are listed in the Mapbox documentation - only the final part of each is required, e.g. "mapbox/light-v10".

MapTiler Cloud

In order to use MapTiler maps, you must register. Once registered, get your API key from Account->Keys, which you have to pass to L.tileLayer.provider in the options:

L.tileLayer.provider('MapTiler.Streets', {
    key: '<insert key here>'
}).addTo(map);

MapTiles API

In order to use OpenStreetMap in English, French or Spanish provided by MapTiles API, you must register. Once registered, you have to add your key to L.tileLayer.provider in the options:

L.tileLayer.provider('MapTilesAPI.OSMEnglish', {
    apikey: '<insert key here>'
}).addTo(map);

Thunderforest

In order to use Thunderforest maps, you must register. Once registered, you have an api_key which you have to pass to L.tileLayer.provider in the options:

L.tileLayer.provider('Thunderforest.Landscape', {apikey: '<insert api_key here>'}).addTo(map);

Esri/ArcGIS

In order to use ArcGIS maps, you must register and abide by the terms of service. No special syntax is required.

Available Esri layers

TomTom

In order to use TomTom layers, you must register. Once registered, you can create an apikey which you have to pass to L.tileLayer.provider in the options:

L.tileLayer.provider('TomTom', {
    apikey: '<insert your API key here>'
}).addTo(map);

Stadia Maps

In order to use Stadia maps, you must register. Once registered, you can whitelist your domain within your account settings.

Stamen Design

As of July 31, 2023, Stamen's map styles are now hosted by Stadia Maps. You can read the full announcement from Stamen here. No code changes are required to continue using Stamen map styles hosted by Stadia Maps. Simply register and whitelist your domain.

Attribution

This work was inspired from https://gist.github.com/1804938, and originally created by Stefan Seelmann.

What do we mean by free?

1 We try to maintain leaflet-providers in such a way that you'll be able to use the layers we include without paying money. This doesn't mean no limits apply, you should always check before using these layers for anything serious.

FAQs

What is leaflet-providers?

Is leaflet-providers popular?

Is leaflet-providers well maintained?

Package last updated on 30 Oct 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

leaflet-providers