brunob authored on 28 Mar
css updated demo 6 years ago
preview Disable HERE in preview 9 months ago
tests upgrade leaflet and extract valid TileLayer options from Leaflet instead of keeping a hardcoded list 1 year ago
.eslintrc Be more strict about keys in providers (fixes #268) 1 year ago
.gitignore Tile attribution improvements (#309) 6 months ago
.mversionrc Adding mversion for release 4 years ago
.travis.yml use more modern node version 2 years ago changelog for 1.6.0 4 months ago fix typo 1 year ago Fix #301 10 months ago
bower.json Bumped version to 1.6.0 4 months ago
index.html adopt camelCase convention 1 year ago
leaflet-providers.js RIP OpenStreetMap Black and white 5 months ago (#33) credited to Leaflet Provider contributors 6 years ago
package.json Bumped version to 1.6.0 4 months ago


An extension to Leaflet that contains configurations for various free1 tile providers.


Download leaflet-providers.js and include it in your page after including Leaflet, e.g.:

  <script src=""></script>
  <script src="js/leaflet-providers.js"></script>


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

// add Stamen Watercolor to map.


Leaflet-providers provides tile layers from different providers, including OpenStreetMap, Stamen, 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 (formerly Nokia).

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

L.tileLayer.provider('HERE.terrainDay', {
    app_id: '<insert ID here>',
    app_code: '<insert ID here>'

Available HERE layers


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

L.tileLayer.provider('MapBox', {
    id: '<insert map_ID here>',
    accessToken: '<insert ACCESS_TOKEN here>'


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);


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

Available Esri layers

Geoportail France

In order to use Geoportail France resources, you need to obtain an api key that allows you to access the resources you need. Pass this api key and the ID of the resource to display to L.tileLayer.provider in the options:

L.tileLayer.provider('GeoportailFrance', {
    variant: '<insert resource ID here>',
    apikey: '<insert api key here>'

Please note that a public api key (choisirgeoportail) is used by default and comes with no guarantee.

4 aliases are also provided for common Geoportail resources : GeoportailFrance, GeoportailFrance.orthos, GeoportailFrance.ignMaps and GeoportailFrance.parcels (See index.html demo).


This work was inspired from, 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.