4

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.

LJᛃ
  • 7,655
  • 2
  • 24
  • 35
  • 1
    If you have different image's every time then combining multiple sources in one layer in mapbox, my guess is not possible. I believe you can use marker's just like https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/ in combination with https://stackoverflow.com/a/55917076/10102695 and maintaing different arrays to maintain the grouping and removing later when needed. Hope it helps – Dolly Feb 15 '21 at 18:24

1 Answers1

1

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/

JasonG
  • 5,794
  • 4
  • 39
  • 67