joshkautz
commented
1 year ago It appears that this does not happen when I use <Marker> with no children components.
If I replace ...
<Marker
key={coordinate[0] + coordinate[1]}
longitude={coordinate[0]}
latitude={coordinate[1]}
anchor="center"
>
<img
alt=""
src="https://hikers.social/icons/mapbox-marker-icon-20px-red.png"
/>
</Marker>... with ...
<Marker
key={coordinate[0] + coordinate[1]}
longitude={coordinate[0]}
latitude={coordinate[1]}
anchor="center"
/>... then I don't have this issue. Maybe that will be helpful in understanding what's going on under the hood. 🤷
Description
When I add Markers to a Map and have 3D Terrain enabled, I noticed that changing state in React causes the markers to render in their original location on the map, rather than their modified 3D Terrain location. I'm not sure the technical words to use for this.
I've created a Code Sandbox as basic as possible to show this behavior. It sounds like this is the preferred way of sharing/showing potential bugs.
I couldn't find any issues that were related to this, but perhaps this closed issue is along the same vein?
I'd be happy to help in however I can, but I'll wait to hear back! Thank you!
Expected Behavior
Changing state in React will still keep Markers in their existing position on the 3D Terrain.
Steps to Reproduce
react-map-gl | 3D Terrain with Locations as Markers
You can click the Second of the the two buttons in that Code Sandbox demo, which reads "Change State," to see the behavior. Then, if you click and drag to change the map's view state, you can see the Markers render to the correct location on what I assume is the next React state change.
I didn't use the boiler plate template, because it's configured for a very old version of React. I just used the most up-to-date Create React App template.
_Edit: I created this nearly identical demo, react-map-gl | 3D Terrain with Locations as Layer (Symbols), but with the differences indicated in its name. It uses a layer of symbols instead of markers. This is what I would hope that the Markers would do, but I'm guessing it has something to do with rendering on top of the canvas rather than inside of it? Just a little more investigating by me._
Environment
Logs
No response