Storing a Mapbox-hosted vector tileset in a variable (Mapbox-GL-JS)

Question

I'm trying to make a map using Mapbox GL that is basically identical to this example: https://www.mapbox.com/mapbox-gl-js/example/filter-markers/.

The main difference that source I'm using is a vector tileset (that I've uploaded to mapbox.com) with a specific source-layer that needs to be split up.

The problem is the first line of this part:

markers.features.forEach(function(feature) {
    var symbol = feature.properties['marker-symbol'];
    var layerID = 'poi-' + symbol;

    if (!map.getLayer(layerID)) {
        map.addLayer({

Since my data isn’t stored in a variable what do I put in place of markers.features?

Do I have to create a variable that references my source, source-layer, and map ID and use that? How would that be structured?

Apologies if this is a total noob question, I tend to over think these things.

Answer 1

All the MB example code is really doing is adding four layers to the map, filtered on the geoJSON on the fly features's marker-symbol property. Since your tile source is coming from MB servers, you'll have to hard code what layers you want to display.

E.g the example code could have been rewritten to hardcode the symbol type:

['theatre', 'bar', 'bicycle', 'music'].forEach(function(type){
  map.addLayer({
      "id": type,
      "type": "symbol",
      "source": "markers",
      "layout": {
          "icon-image": type + "-15",
          "icon-allow-overlap": true
      },
      "filter": ["==", "marker-symbol", type]
  });
});

To apply this to your use case, this assumes that you know all your possible filters ahead of time.