I have a map for which I have to add a lot of (about 150) images on a map.
I've seen their example Add a raster image to a map layer, which shows that you need to add a source with coordinates, then add a layer to display your image on the map.
I made a loop to add all my images, but it makes my map really laggy when moving on it; see demo here. I was working with Leaflet before, and it was handling that nicely.
Is Mapbox supposed to work fine with a lot of images loaded, and is there strategies to make it render smoothly?
One attempt that I made is that I was wondering if this was due to a excessive amount of layers; and searched how to add multiple images on a same layer (same question here); but haven't found a way to do it: this does not work:
//add source
map.addSource("imagesSource", {
type: "geojson",
data: {
"type": "FeatureCollection",
"features": [
[
{
"type": "image",
"url": "http://url/image1.png",
"coordinates": [
[
4.3813338557822,
50.842573058675
],
[
4.418685805334,
50.842573058675
],
[
4.418685805334,
50.825893099756
],
[
4.3813338557822,
50.825893099756
]
]
},
{
"type": "image",
"url": "http://url/image2.png",
"coordinates": [
[
4.3981741530879,
50.835614531226
],
[
4.402177428321,
50.835614531226
],
[
4.402177428321,
50.833826839538
],
[
4.3981741530879,
50.833826839538
]
]
},
{
"type": "image",
"url": "http://url/image3.png",
"coordinates": [
[
4.3813338557822,
50.842573058675
],
[
4.418685805334,
50.842573058675
],
[
4.418685805334,
50.825893099756
],
[
4.3813338557822,
50.825893099756
]
]
}
]
]
}
});
//add layer
map.addLayer({
"id": 'imagesLayer',
"source": 'imagesSource',
"type": "raster",
"paint": {"raster-opacity": 0.85}
})
NB There is another example named Add a georeferenced image, which is confusing since this one is for adding a tileset; which is not my case: I want to be able to handle each image individually (toggle a selection, etc).
