Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Leaflet shortcuts for common tile providers
var cloudmade = new L.TileLayer.CloudMade({key: 'API-KEY', styleId: 997}),
openStreetMap = new L.TileLayer.OpenStreetMap(),
openCycleMap = new L.TileLayer.OpenCycleMap(),
mapquestOsm = new L.TileLayer.MapQuestOpen.OSM(),
mapquestAerial = new L.TileLayer.MapQuestOpen.Aerial(),
mapbox = new L.TileLayer.MapBox({user: 'kkaefer', map: 'island'});
// Lefalet shortcuts for common tile providers - is it worth adding such 1.5kb to Leaflet core?
L.TileLayer.Common = L.TileLayer.extend({
initialize: function (options) {, this.url, options);
(function () {
var osmAttr = '&copy; <a href="">OpenStreetMap</a> contributors, <a href="">CC-BY-SA</a>';
L.TileLayer.CloudMade = L.TileLayer.Common.extend({
url: 'http://{s}{key}/{styleId}/256/{z}/{x}/{y}.png',
options: {
attribution: 'Map data ' + osmAttr + ', Imagery &copy; <a href="">CloudMade</a>',
styleId: 997
L.TileLayer.OpenStreetMap = L.TileLayer.Common.extend({
url: 'http://{s}{z}/{x}/{y}.png',
options: {attribution: osmAttr}
L.TileLayer.OpenCycleMap = L.TileLayer.Common.extend({
url: 'http://{s}{z}/{x}/{y}.png',
options: {
attribution: '&copy; OpenCycleMap, ' + 'Map data ' + osm
var mqTilesAttr = 'Tiles &copy; <a href="" target="_blank">MapQuest</a> <img src="" />';
L.TileLayer.MapQuestOpen.OSM = L.TileLayer.Common.extend({
url: 'http://otile{s}{type}/{z}/{x}/{y}.png',
options: {
subdomains: '1234',
type: 'osm',
attribution: 'Map data ' + L.TileLayer.OSM_ATTR + ', ' + mqTilesAttr
L.TileLayer.MapQuestOpen.Aerial = L.TileLayer.MapQuestOpen.OSM.extend({
options: {
type: 'sat',
attribution: 'Imagery &copy; NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency, ' + mqTilesAttr
L.TileLayer.MapBox = L.TileLayer.Common.extend({
url: 'http://{s}{user}.{map}/{z}/{x}/{y}.png'
Copy link

beugenio commented Feb 13, 2013

Very (VERY) good! I was looking for this during hours... Where do you found the MapBox's png url?
Thank you!

Copy link

pkorac commented Mar 18, 2013

Fantastic! Thank you soo much.
Same question out of curiosity where did you find MapBox's png url?

Copy link

benjovenjo commented Mar 24, 2013

thank you very much for this!!

Copy link

huangsong commented May 9, 2013

like it, great work!

Copy link

sentenza commented Aug 24, 2013

Really useful. Thank you! :D

Copy link

jieter commented Oct 7, 2013

Copy link

ghost commented Oct 28, 2013

Very nice, thank you.

Copy link

joliesky commented Mar 5, 2014

This is really useful. It seems like from this then that only CloudMade and MapBox let you actually customize the map tiles? Does anyone know if that's correct?

Copy link

mcechini commented Feb 19, 2015

Here's a suggested update to include some NASA imagery:

Copy link

joonas-fi commented Jul 13, 2016

MapQuest just ended support for their open tile service.

I signed up to get an API key, just to find out that now I need to get their Leaflet plugin to use MapQuest:

  • The plugin weighs 26 KB (why not embrace the easy config of just being able to change URL to change providers??!)
  • Needs to be loaded from their CDN (= doesn't support closed intranets)

I just cannot justify adding 26 KB more of JavaScript libraries to my application and adding one more single point of failure FOR NO APPARENT REASON WHATSOEVER (better behaviour: change URL -> change provider).

MapQuest just lost a user. I liked their map colors more (compared to OpenStreetMap), but upon learning about the bad choices they made, I'll revert back to using OpenStreetMap. :)

Copy link

hoangv2 commented Jul 14, 2016

joonas-fi - how do you deal with OSM where local languages are displayed on the map?

Copy link

paradise728 commented Dec 15, 2017

Has anyone figured out the issue with the local language on openstreetmap?

Copy link

upadhyay-shubham commented Apr 13, 2021

There are lots of tile servers available based on OSM, you can choose the one that fits your requirement.
Visit :

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment