Leaflet-providers

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

Usage

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

Providers

Leaflet-providers provides tile layers from different providers, including OpenStreetMap, MapQuestOpen, 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 free to use, we support some layers which require registration.

HERE (formerly Nokia).

In order to use HERE basemaps, you must register. With your devID and appID specified in the options. the available layers are:

• HERE.normalDay
• HERE.normalGreyDay
• HERE.satelliteNoLabelsDay
• HERE.satelliteYesLabelsDay
• HERE.terrainDay

For example:

L.tileLayer.provider('HERE.terrainDay', {
    devID: 'insert ID here',
    appId: 'insert ID here'
}).addTo(map);

Mapbox

In order to use Mapbox maps, you must register. If your user name is YourName and your map is called MyMap you can add it with

L.tileLayer.provider('MapBox.YourName.MyMap');

Esri/ArcGIS

In order to use ArcGIS maps, you must register and abide by the terms of service. Available layers are...

• Esri.WorldStreetMap
• Esri.DeLorme
• Esri.WorldTopoMap
• Esri.WorldImagery
• Esri.WorldTerrain
• Esri.WorldShadedRelief
• Esri.WorldPhysical
• Esri.OceanBasemap
• Esri.NatGeoWorldMap
• Esri.WorldGrayCanvas

Goodies

An other little goodie this library provides is a prefilled layer control, so you can just provide an array of strings:

var baseLayers = ['Stamen.Watercolor', 'OpenStreetMap.Mapnik'],
	overlays = ['OpenWeatherMap.Clouds'];

var layerControl = L.control.layers.provided(baseLayers, overlays).addTo(map);

// you can still add your own afterwards with
layerControl.addBaseLayer(layer, name);

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