Add image source and video source

[alex3165]

https://www.mapbox.com/mapbox-gl-js/api/#ImageSource https://www.mapbox.com/mapbox-gl-js/api/#VideoSource

[kitten]

Will do this as soon as I can :)

[kitten]

Little complication: These should maybe be converted into Layers, but what if there are a lot of videos to be added? Do we have to combine these layers? Or do we have to integrate sources and layers separately? That would make this library a lot more complicated...

So probably just simple Video and Image components that are picked up by the map component and combined into a single layer?

[Altiano]

should behave like GeoJSONSource

[benjaminhon]

is this working? i cant seem to add an image source, keeps saying that source id not found

[vjpr]

Me neither. There doesn't seem to be the ability to add a type: 'image' to source either.

[alex3165]

Sorry I closed this issue at the time because no one seemed really interested in those features. I will re-open it and try to find some time to work on it then.

[Altiano]

I really interested!

[alex3165]

Will try to get this done in v4

[valgussev]

I am interested as well

[Afbcary]

Any progress / workarounds here?

[agunescu]

Any progress / workarounds here?

[Georift]

For anyone coming across this issue these days, while react-mapbox-gl doesn't support images or videos. You can always grab the mapbox api directly and insert something by hand.

For example here is a small use effect that should get you moving:

	useEffect(() => {
		if (map && isImageSource && defaultSource) {
			const [sourceId, source] = defaultSource;

			if (!map.getSource(sourceId)) {
				map.addLayer({
					id: sourceId,
					type: "raster",
					source,
				});
			}
		}

		return () => {
			if (map && isImageSource && defaultSource) {
				const [sourceId] = defaultSource;

				if (map.getSource(sourceId)) {
					map.removeLayer(sourceId);
				}
			}
		};
	}, [map, defaultSource, isImageSource]);