How to add and display the Context Menu in the Map

[alamenai]

I have a div element with a reference to the mapbox map:

I have this code :

   <>
      <ContextMenu>
        <ContextMenuTrigger>
          <div ref={mapContainer} className='w-screen h-screen z-40' />
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem>Profile</ContextMenuItem>
          <ContextMenuItem>Billing</ContextMenuItem>
          <ContextMenuItem>Team</ContextMenuItem>
          <ContextMenuItem>Subscription</ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
      <div className='absolute left-6 bottom-20 top-16 flex-1 flex gap-2 right-6'>
        <BuildingInformationView />
      </div>
      <div className='absolute right-20 bottom-20 z-40 w-64'>
        <MapViewerControls />
      </div>
      <div className='z-40 absolute bottom-20 right-2 flex flex-col gap-2 items-center'>
        <Zoom mapRef={mapRef} />
        <Separator className='w-6' />
        <Compass />
        <Layers zoom={currentZoom} />
      </div>
    </>

The problem is though I wrapped the map with the Context Menu but it's not triggered.

[Razz21]

Check out, if default contextmenu behaviour in your trigger component is not disabled.

 containerDiv.addEventListener("contextmenu", (e) => {
    e.preventDefault();  // <-- prevents from displaying browser context menu, but also may affect <ContextMenuTrigger> behaviour
    e.stopPropagation(); // <-- same
    //...
});

[alamenai]

Yes, as I could not trigger the the Map from the ContextMenu - I don't want to spend more time on it - I created a simple ContextMenu using the Card component and control the visibility with a local state position:

 map.on("contextmenu", (e) => {
      e.preventDefault()
      setPosition({
        x: e.point.x,
        y: e.point.y,
        lat: parseFloat(e.lngLat.lat.toFixed(5)),
        lng: parseFloat(e.lngLat.lng.toFixed(5)),
      })
    })