How to display in Mapbox instead of image markers?

Question

Geolocation

I use Mapbox, instead of markers, each position should have its own picture
, that is, instead of

paint: {
    "circle-color": "#11b4da",
    "circle-radius": 4,
    "circle-stroke-width": 1,
    "circle-stroke-color": "#fff"
  }

you need to have an image taken from the geojson date

<div id='map-index'></div>

<script>
mapboxgl.accessToken = 'YourAccessToken';
var map = new mapboxgl.Map({
container: 'map-index',
style: 'mapbox://styles/mapbox/dark-v10',
center: [-103.59179687498357, 40.66995747013945],
zoom: 3
});
 
map.on('load', function() {
// Add a new source from our GeoJSON data and set the
// 'cluster' option to true. GL-JS will add the point_count property to your source data.
map.addSource("random", {
type: "geojson",
// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
data: "https://gist.githubusercontent.com/ipatovanton/5b4cd9dbf18f8f321512bea9ac49d534/raw/d67ea8584831fa61efd20e7ab8cbc58bfa8bfc76/random.geojson",
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});
...

map.addLayer({
  id: "unclustered-point",
  type: "circle",
  source: "random",
  filter: ["!", ["has", "point_count"]],
  paint: {
    "circle-color": "#11b4da",
    "circle-radius": 4,
    "circle-stroke-width": 1,
    "circle-stroke-color": "#fff"
  }
});

</script>

Answer 1

You make a symbolic style where you set up which icon to display for the object. Well, in the beginning, when there’s no boom, it’s better to start not with bare code, but twist mapbox studio in order to understand what possibilities there are and see how they are implemented inside the style.