Fix map attribution

[kylebarron]

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 docs

Closes #13

[vgeorge]

@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.

[kylebarron]

@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)

[vgeorge]

@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?

[kylebarron]

But the Maplibre CSS module is not imported

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 _css in the anywidget object: https://anywidget.dev/en/getting-started/

[vgeorge]

@kylebarron I added the _css property linking to the css file and it seems to be working now 👍

[kylebarron]

Thanks @vgeorge for your help! 🙏

[kylebarron]

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