I used Mapbox Studio to create some projects because my data set was too large to use Mapbox Editor. I loaded my data into a source project and then used that source as a layer in a style project, which I then uploaded to Mapbox here.

I used conditional formatting rules in CartoCSS to color-code the data markers based on the "species" represented (the map is created from migration data of large marine animals). I would like to create another map using Mapbox.js that allows me to change the marker color based on whether that species is selected or not, like this one.

If a species is not selected, the marker should be dull gray in color, if the species is selected, it will be its vibrant color.

My question is: how do I reference those individual species markers that have been cooked as a source project into a layer of the style project in Mapbox Studio? Can I use Mapbox.js to access the CartoCSS or will I need to access some GeoJSON? The data was originally uploaded as csv so I would need to understand the GeoJSON working behind the Mapbox scenes (if that is what is happening).


Some quick background on loading vector tiles using leaflet/mapbox.js might help. You are not actually loading geojson into the browser. Inspect your map tiles and you'll notice that you are still loading .pngs. So, there is no 'geojson working behind the MapBox scenes', and thus browser-side rendering is not actually possible.

So, your options are:

  • load the data on top of the basemap as a geojson and filter/render in the browser. You mentioned you didn't do this b/c of the size of the data set. If it's still an issue, you could:
    • convert the points to lines and optionally smooth the geometry
    • load points by species so you are making more requests for smaller amounts of data
  • check out mapbox-gl-js which uses web-gl to render vector tiles in the browser. There's a little more involved in getting everything up and running, and you style using a json-based language, rather than Carto, which can take some time to learn.

Also see this post, and search for other posts on client or browser rendering.

  • Sorry to nitpick, but it's "mapbox-gl-js" not "mapbox-gl". (The latter is the previous name of their mobile library I think.) – Steve Bennett Aug 30 '15 at 14:54
  • @SteveBennett edited – James Conkling Aug 30 '15 at 19:28

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.