Mapbox gl js - How to add multiple photo sources on a single layer

Admin 1
Viewed 744

Every 2 seconds I create a new image source and a new layer for that source:

map.addSource("source_" + photo_id, {
    "type": "image",
    "url": photo_url,
    "coordinates": [... ]
})


map.addLayer({
    "id": "layer_" + photo_id,
    "source": "source_" + photo_id,
    "type": "raster",
    "paint": {"raster-opacity": 0.6}
})

That means for every photo, a new layer is created. I was wondering, is it possible to add multiple photo sources on the same layer in order to avoid this multiple layer creation?

map.getSource('photoSource').updateImage(...) won't work because I would like all the previous photos to also remain on the map

Basically my goal is to separate the photos on the map into groups, in order to be able later to remove a certain group of photos, and that would be possible with multiple sources in one layer.

mapbox-gl-js mapbox
1 Answers

This is 100% possible with the expression syntax.

                {
                'type': 'Feature',
                'geometry': {
                    'type': 'Point',
                    'coordinates': [this.long, this.lat]
                },
                'properties': {
                    'icon': 'bus-generic'
                }}

If you have a property, you can query it and use it in the layer definition to display different icons:


   map.addLayer({
       'id': 'bus-layer',
       'type': 'symbol',
       'source': 'bus-source', // reference the data source
       'layout': {
           'icon-image': ['get', 'icon'], // reference the icon in properties
           'icon-size': 0.2,
       }
   });

See this example over here! https://docs.mapbox.com/mapbox-gl-js/example/add-image-missing-generated/

user_12558250
Related