-
Notifications
You must be signed in to change notification settings - Fork 31
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix map attribution #76
Conversation
@kylebarron the attribution issue seems to be related to the missing Maplibre CSS styles file. When inspecting the page, it is possible to see the attribution elements in the DOM, but no styles are applied to them and they end up positioned outside the widget viewport. I tried to import the CSS like instructed in the docs, but it didn't work. I'll keep looking. |
@vgeorge it turns out that it's related to the heights of the multiple divs. So if I change to <DeckGL
initialViewState={
["longitude", "latitude", "zoom"].every((key) =>
Object.keys(viewState).includes(key)
)
? viewState
: DEFAULT_INITIAL_VIEW_STATE
}
controller={true}
layers={layers}
+ height={300}
// ContextProvider={MapContext.Provider}
> Then the map inside the main div is smaller and we can see the attribution below it (but weirdly in a drop down) (Note: I did also have to include import "maplibre-gl/dist/maplibre-gl.css"; for this to render) |
@kylebarron I was able to see the attribution elements after following your instruction of adding the height to the DeckGL component. But the Maplibre CSS module is not imported, it seems to me the dropdown is a result of missing CSS styles. Maybe something wrong in build.mjs? |
I'm not good at checking this from the browser console; 17dc037#diff-c2f8ec75103ae661341f239c22352142d1d5e965cad55b19cfb978902500106cR9 didn't fix it? Alternatively we could build our own CSS bundle that we dynamically load through the ESM endpoint. You can pass css either inline as a string or as a url in |
@kylebarron I added the |
Thanks @vgeorge for your help! 🙏 |
The map attribution still isn't clickable, but that's a separate longstanding deck/react-map-gl issue that I don't know what the current solution is visgl/deck.gl#4165 |
Really no idea why this isn't working. None of the deck.gl examples are up to date with the latest react-map-gl 😕
Ref:
AttributionControl
docsCloses #13