Mapbox.js: Accessing data markers created in Mapbox Studio

Question

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).

Answer 1

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.