Check out this code sandbox example that demonstrates my attempt to display a map within a specific component. However, I'm facing an issue where the deck.gl and react-map-gl elements are overflowing outside their parent container and extending to the document body.
The structure of the example is as follows:
<Box id='mapcontainer'>
<DeckGL id="deck-gl">
<MapView id="map" >
<StaticMap/>
</MapView>
</DeckGL>
</Box>
It seems that Deck.gl is generating a <div> and a <canvas> element between the <Box id='mapcontainer'> div and the <DeckGL id='deck-gl'> div, causing them not to stay within the boundaries of their parent Box.
The id of the generated <div> and <canvas> elements appear to be based on the id passed into the DeckGL component, with values like "deck-gl-wrapper" and "deck-gl". The latter being the id I provided in the <deckGL> component.
While it's uncertain if this is the root cause, inspecting the elements using devtools indicates this might be the issue at hand.
https://i.sstatic.net/9ZD4n.png
I am seeking assistance in understanding why the deck.gl and react-map-gl components aren't contained within their parent's limits despite setting the parent and/or canvas props in the DeckGL component.
Read through the documentation here:
react-map-gl
deck.gl
You can find a functional example in the codesandbox linked above. I have also left comments detailing various attempts made so far, without any success.
Thank you for your help...
As a quick reference, here is what the app.js file looks like:
import Box from "@material-ui/core/Box";
import DeckGL from "@deck.gl/react";
import { MapView } from "@deck.gl/core";
import { LineLayer } from "@deck.gl/layers";
import { StaticMap } from "react-map-gl";
const MAPBOX_ACCESS_TOKEN = <tokenInCodeSandboxIfYouNeedIt>
const INITIAL_VIEW_STATE = {
longitude: -122.41669,
latitude: 37.7853,
zoom: 13,
pitch: 0,
bearing: 0
};
const data = [
{
sourcePosition: [-122.41669, 37.7853],
targetPosition: [-122.41669, 37.781]
}
];
function App() {
return (
// Code for rendering the map goes here...
);
}
export default App;