0

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.

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

  • OK, so then I style it using Mapbox Studio and upload that to the Style section of mapbox.com. Then do I use the map id from the Style section in my javascript? (ex. var myTileLayer = L.mapbox.tileLayer('<map-id-style>') Do I then have to reference both the map-id from the Data section and the map-id from the Style section? ... How would that look? Any chance you could please provide a quick example? – mycrazydog Jun 18 '15 at 19:13
  • Exactly, reference the id of the style project. No need to reference the id of the data project anywhere in your js code. I'll update my answer with a quick description. – James Conkling Jun 18 '15 at 20:44
  • Also, check out mapbox-gl for a more advanced, still-very-much beta method of styling MapBox Studio Source Project vector tilesets: mapbox.com/mapbox-gl-js/api .Rather than styling the vector tileset w/i MapBox Studio as a Style Project and serving it to your site, you pass just the vector tileset and style it w/i the browser using a new set of json-based style definitions. – James Conkling Jun 18 '15 at 21:10
  • Wow! Thank you so much for taking the time to answer my questions. This has been incredibly helpful! – mycrazydog Jun 18 '15 at 22:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.