Integration with existing mapbox applications

Great work with this library, I think it's a pretty neat tool. From my understanding looking at the codebase, you've implemented your own mapbox components which wraps up the custom funcitonality, and it's reliant on mapbox gl v1. Correct me if i'm wrong but I suspect this eliminates the possiblity of ingegrating this with an existing mapbox application? (For example one built with react-map-gl). But I wanted to raise this as a use-case regardless. Would be fantastic if the library could expose a component that could be rendered as an overlay or as layers that sync with an existing mapbox map, in a similar way that deckgl library integrates with mapbox gl.

👋 @lukecoursey, thanks for opening this issue (and apologies for the delay responding)! Your understanding is exactly right. This is something we've thought about before, but right now, the library depends on some fairly specific mapbox-gl-js v1 interfaces that hook into the map's rendering cycle [0].

In order to handle plugging in arbitrary map references from other applications, we would need to implement similar integrations for each additional supported application. We expect this work would be non-trivial and would require a major redesign of the library (e.g., removing the Map export?), so it's not currently on our development roadmap.

Hopefully this explanation helps to sketch out the work that a supporting a BYO-map integration would require. Happy to discuss the use-case in more detail if there's something I'm missing here!

[0] The Raster component only redraws the raster tile contents during the mapbox-gl-js map drawing cycle.

When the map renders (due to user interaction or any other reason), the tiles center + zoom are synced with the latest values from map, and the tiles are redrawn. Only redrawing as often as the map renders that Raster rendering maxes out at the same frequency as map rendering.

maps/src/raster.js

Lines 80 to 86 in 6e624d2

    
           const callback = () => { 
        
             if (Object.values(camera.current).some(Boolean)) { 
        
               tiles.current.updateCamera(camera.current) 
        
               tiles.current.draw() 
        
             } 
        
           } 
        
           map.on('render', callback)

When the tiles require redrawing (due to data loading/selection), triggerRepaint is used to force the map to rerender.

maps/src/raster.js

Lines 54 to 56 in 6e624d2

invalidate: () => {

map.triggerRepaint()

},

	const callback = () => {
	if (Object.values(camera.current).some(Boolean)) {
	tiles.current.updateCamera(camera.current)
	tiles.current.draw()
	}
	}
	map.on('render', callback)

	invalidate: () => {
	map.triggerRepaint()
	},