An extension to Leaflet that contains configurations for various free1 tile providers.
Download leaflet-providers.js and include it in your page, e.g.:
<head>
...
<script src="js/leaflet-providers.js"></script>
</head>
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.
L.tileLayer.provider('Stamen.Watercolor').addTo(map);
Leaflet-providers tries to use https://
if the page uses https://
and the provider supports it.
You can force the use of http://
by passing force_http: true
in the options argument.
Some providers have retina tiles for which the URL only needs to be slightly adjusted, e.g. [email protected]
. For this, add the retina option in the URL, e.g. -----{retina}.png
, and set a retina value in the options, e.g. retina: '@2x'
. If Leaflet detects a retina screen (L.Browser.retina
), the retina option passed to the tileLayer is set to the value supplied, otherwise it's replaced by an empty string.
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.
In addition to the providers you are free1 to use, we support some layers which require registration.
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>'
}).addTo(map);
In order to use Mapbox maps, you must register. You can get map ID and ACCESS_TOKEN from Mapbox projects:
L.tileLayer.provider('MapBox', {id: 'ID', accessToken: 'ACCESS_TOKEN'}).addTo(map);
In order to use ArcGIS maps, you must register and abide by the terms of service. No special syntax is required.
This work was inspired from https://gist.github.com/1804938, and originally created by Stefan Seelmann.
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.