mapbox overlay data

Question

I have loaded my geojson into Mapbox Studio sources and then uploaded it to Mapbox. Now I see my upload under my Data tab on mapbox.com.

How do I overlay that Data on my map using the Mapbox Javascript library.

These are the two versions I have tried ....

L.mapbox.accessToken = '<my-key>';

var map = L.mapbox.map('map', 'mapbox.streets')
.setView([35.2269, -80.8433], 12);    

var featureLayer = L.mapbox.featureLayer('mycrazydog.hz88h0k9')
.setZIndex(100)
.addTo(map); 

AND

L.mapbox.accessToken = '<my-key>';

var map = L.mapbox.map('map', 'mapbox.streets')
.setView([35.2269, -80.8433], 12);    

var myTileLayer = L.mapbox.tileLayer('mycrazydog.hz88h0k9')
.setZIndex(100)
.addTo(map); 

I have also tried to import the geojson directly into a mapbox.com Project, but it has too many features and crashes.

Answer 1

You need to style your data in MapBox Studio as a Style Project, rather than pulling it into mapbox.js.

L.mapbox.featureLayer('mycrazydog.hz88h0k9') is for loading data uploaded in the mapbox editor, which is a different workflow entirely from MapBox Studio Source Projects.

The distinction between the two is not as straightforward as it could be:

• use MapBox Studio Source Projects and Style Projects to create vector tilesets
• use the MapBox Editor (under the Project tab on MapBox.com) to add vector data on top of tilesets (though it sounds like in your case your geojson is too large to upload to the MapBox Editor.

It sounds like in your case--where the data is too large to host on the MapBox Editor--you need to create a Style Project. Checkout the Getting Started and Map Design Guides on this page.

update

So, assuming you create a new Style Project, add the style project to your map as a tileLayer, rather than featureLayer. Something like:

// if your style project layer has a transparent background and should be overlayed over the mapbox-streets baselayer
var map = L.mapbox.map('map', 'mapbox.streets')
            .setView([35.2269, -80.8433], 12);

var tileLayer = L.mapbox.tileLayer('<mapbox_styleproject_id>')
                     .setZIndex(100)
                     .addTo(map);


//or, shortened to
var map = L.mapbox.map('map', 'mapbox.streets', {
  layers: L.mapbox.tileLayer('<mapbox_styleproject_id>'),
  center: [35.2269, -80.8433],
  zoom: 12
});

Also see this GIS.StackExchange post on vector tiles and geojsons