How to add Mapbox json layers in Leaflet

Question

I have a leaflet basemap established:

var cloudmadeUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',

cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});
var map1 = new L.Map('map', {layers: [cloudmade], center: new L.LatLng(51.505, -0.04), zoom: 6});

Now I am trying to use HTML to toggle a few Mapbox json layers:

map1 .layers({ 
           1: { api: 'http://a.tiles.mapbox.com/v3/inosys.1cpsycqc.jsonp',   
              center: {  ease: 1000 }
              },

         2: { 
            api: 'http://a.tiles.mapbox.com/v3/mapster88.1.jsonp',
               center: {  ease: 1000 }
         },

         3: {                    
            api: 'http://a.tiles.mapbox.com/v3/mapster88.2.jsonp',
              center: {  ease: 1000 }   
        },

Here is the test map: http://erichsen-group.com/demoland/taylorpeterh/index19.html

How can I configure the map1 .layers to work with the leaflet L.Map?

tmcw tmcw · Accepted Answer · 2014-11-06T18:12:21

You can either:

Use Mapbox.js, which is a Leaflet plugin that adds TileJSON support and lets you include these layers like L.mapbox.tileLayer('inosys.1cpsycqc').addTo(map)
Add tiles using our XYZ API, as in this example

How to add Mapbox json layers in Leaflet

1 Answers