React-Map-GL: How can i see the icons which i can use by default mapbox - map sprite?

Question

I have the following geojson of points, which are going to be buses on the map:

  const features = buses.map((el) => ({
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: el.state.position.coordinates.map((coordinate) => +coordinate),
    },
    properties: {
      reg_number: el.reg_number,
      object_id: el.object_id,
      route: el.route,
      fuel: +el.state.fuel,
      speed: +el.state.speed,
    },

  }));
  return features;
}

and it's layer is as follows:

  id: 'Point-data',
  type: 'circle',
  paint: {
    'circle-color': {
      property: 'percentile',
      stops: [
        [10, "#ff0000"],
        [20, '#ff3300'],
        [30, "#ff6600"],
        [40, "#ff9100"],
        [50, '#ffd000'],
        [60, '#bbff00'],
        [70, '#b3ff00'],
        [80, '#91ff00'],
        [90, '#7bff00'],
        [100, '#1eff00']
      ],
    },
    'circle-radius': 7,
  },
};

instead of 'circle' i want to use 'symbol' type and set an icon. As far as i know, it needs a name from map style sprite icon collection. I don't need to make a custom sprite right now, i think i will be satisfied with default bus icon, which dark mapbox map for sure has in sprite, but i don't know how to find it. Where can i see the list of icons and their names of sprite? and the png and json files it consist of.example of sprite from Uber Open Source

Artem Vokov Artem Vokov · Accepted Answer · 2020-03-16T19:59:24

For the others i would like to share the solution i found by myself: i created a map in https://studio.mapbox.com and then followed documentation: https://docs.mapbox.com/api/maps/#sprites Particulary this:

curl "https://api.mapbox.com/styles/v1/{username}/{style_id(take it from the url of the map u created)}/sprite.{format(png or json)}?access_token=pk.eyJ1IjoiYXJ0dm9sY2hhcmEiLCJhIjoiY2s3bHJ2NjU4MGFjbDNtczJnam10aDU1aSJ9.oH_RWYjKfrKGC77m

There i found bus icon. I made a symbol layer, where i put the name of the icon in the 'icon-image'. I hope it will help smb.

React-Map-GL: How can i see the icons which i can use by default mapbox - map sprite?

1 Answers