issue with react-map-gl

[Teyae]

Threebox version: 2.2.7

Question

When I use threebox-plugin with react-map-gl , I can't select object, it seem like mouse click event is prevented, does anyone encounter the same problem?

[Clamb94]

Hi, yes, I just encountered the same problem and can't tell why. As soon as I initialize a new threebox(...), I can't click my markes on the map anymore.

Were you able to solve it? I tried debugging a bit and see threebox fires e.preventDefault(); incorrectly at a onClick function, but that's not the case

[Clamb94]

Looks like I found a solution. Just add a high css z-index to the react-map-gl object you want to click on. Like this:

        <Marker
          key={`marker-1}`}
          longitude={8.5}
          latitude={50.032642}
          anchor="bottom"
          style={{ zIndex: 1000 }} // <- Add this
          onClick={(e) => {
            console.log('Clicked on event'); // Click works!
            e.originalEvent.stopPropagation();
          }}
        >
          {...}
        </Marker>

So far I haven't found any issues with this solution. Threebox still detects clicks on objects etc. just fine