[Feature] Full control over blocking click, drag and zoom

Right now you can add classes to markers no prevent clicking and dragging over them but this insufficient for my use case. I have two cases where I need to set globally if the map should be clickable, draggable and zoomable. The first one is when the map has an overlay over it, something like a modal or popup. The second use case is displaying static but dynamic-generated maps.

@mariusandra would you mind adding these 3 props to the API? I’ll come up with a PR for this ASAP if so.

I’m thinking about using something like

<Map
  blockClick={true}
  blockDrag={true}
  blockZoom={true}
/>

[mariusandra]

Hey, in my example all those flags would be true by default and it would be up to the user to set them to false to disable them. So nothing breaks with the current API.

I think clickable={false} reads better than blockClick={true}, but of course just <Map blockClick /> is clear as well. The problem comes when you have a dynamic variable setting the state, as in: <Map blockClick={!clicksEnabled} />. In that case it becomes hard to intuitively grasp the code due to the double negative.

Looking at what others (google maps, leaflet) do, it appears the convention is to specify things like scrollWheel: true, draggable: true, keyboard: true, touchZoom: true, etc.

So I would go for this way.

[lucasavila00]

I’m sorry for the delay. I ended up getting lost on this and using a transparent overlay over the map solves the issue. If this is requested by more use cases then I’ll work on a pr. I’m closing this.