Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Leaflet shortcuts for common tile providers

View TileLayer.Common.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
// 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) {
L.TileLayer.prototype.initialize.call(this, this.url, options);
}
});
 
(function () {
var osmAttr = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
 
L.TileLayer.CloudMade = L.TileLayer.Common.extend({
url: 'http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png',
options: {
attribution: 'Map data ' + osmAttr + ', Imagery &copy; <a href="http://cloudmade.com">CloudMade</a>',
styleId: 997
}
});
 
L.TileLayer.OpenStreetMap = L.TileLayer.Common.extend({
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
options: {attribution: osmAttr}
});
 
L.TileLayer.OpenCycleMap = L.TileLayer.Common.extend({
url: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
options: {
attribution: '&copy; OpenCycleMap, ' + 'Map data ' + osm
}
});
 
var mqTilesAttr = 'Tiles &copy; <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" />';
 
L.TileLayer.MapQuestOpen.OSM = L.TileLayer.Common.extend({
url: 'http://otile{s}.mqcdn.com/tiles/1.0.0/{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}.tiles.mapbox.com/v3/{user}.{map}/{z}/{x}/{y}.png'
});
 
}());
View TileLayer.Common.js
1 2 3 4 5 6
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'});

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

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

thank you very much for this!!

like it, great work!

Really useful. Thank you! :D

Very nice, thank you.

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?

Here's a suggested update to include some NASA imagery: https://gist.github.com/mcechini/a814f36c7d1612e84c18

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.