search

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
10.95k stars 2.2k forks source link

Alternative AttributionControl for use with deck.gl #9205

Closed kylebarron closed 3 years ago

kylebarron commented 4 years ago

Question

When using deck.gl to display a Mapbox map, it currently isn't possible to click on the hyperlinks in the AttributionControl. The attribution is showing but not clickable. I raised this issue in https://github.com/uber/deck.gl/issues/4165, but was told that changes would need to be made in mapbox-gl-js to allow it to work with deck.gl. I'm not great at web dev, but I wanted to create this issue in case it was an easy fix, so that we're in line with attribution guidelines.

From https://github.com/uber/deck.gl/issues/4165:

Yes, I think we need Mapbox's help to fix this. There are two possible solutions:

Instead of hyperlinks, use the click listener. That way if we disable pointer-events on the canvas, clicking on the links will still open the attribution page. Allow its attribution control to be rendered into a user-provided container. Then you can position a div above the canvas for the links to go in.

riazjahangir commented 4 years ago

This may be a broader issue than just deck.gl compatibility, since even the Mapbox demo here has an attribution that is visible but not clickable: https://demos.mapbox.com/scrollytelling/

andrewharvey commented 4 years ago

This may be a broader issue than just deck.gl compatibility, since even the Mapbox demo here has an attribution that is visible but not clickable: https://demos.mapbox.com/scrollytelling/

I raised that at https://github.com/mapbox/storytelling/issues/34

kylebarron commented 3 years ago

Closing:

react-map-gl is adding a new AttributionControl in v5.3/v6.1. It is currently available in 6.1.0-beta.1.

See usage example with DeckGL here: https://github.com/visgl/react-map-gl/blob/master/examples/deckgl-overlay/src/app.js