How to forward events from another element to the map?

[snuup]

I write an SVG Layer that shows points and lines inside an element on top of the maplibre canvas. How can I forward events to the map so that I still can zoom, pan, ... it?

I turned pointer-events off in css and on for the element. No the problem is mitigated, but i would like to use map events even when on the svg elements.

I managed to forward the wheel event sucessfullt but am stuck with the other events. My code for mouse events looks like

forwardMouseEvents(svg, mapelement, ['click', 'mousedown', 'mousemove', 'mouseout', 'mouseover'])

function forwardMouseEvents(src, target, events) {
    events.forEach(eventType => {
        // target.addEventListener(eventType, console.log)
        src.addEventListener(eventType, (ev) => {
        //    console.log(ev);

            // Clone the event with critical mouse properties
            const clonedEvent = new MouseEvent(eventType, {
                bubbles: true,
                cancelable: true,
                view: ev.view,
                detail: ev.detail,
                screenX: ev.screenX,
                screenY: ev.screenY,
                clientX: ev.clientX,
                clientY: ev.clientY,
                ctrlKey: ev.ctrlKey,
                altKey: ev.altKey,
                shiftKey: ev.shiftKey,
                metaKey: ev.metaKey,
                button: ev.button,
                relatedTarget: target.querySelector("canvas")
            })

            // Dispatch to target
            target.dispatchEvent(clonedEvent)

            // Optional: Stop original event
            // originalEvent.stopPropagation();
            // originalEvent.preventDefault();
        })
    })
}

[HarelM]

Doesn't the events automatically pass through? Wouldn't you need to call stopPropagation for them not to pass?

[snuup]

Thought like the same but actually events do not pass through. I have

<svg> with pointer-events: none, so no pass through necessary or happens
<circle> with pointer-events: auto; event forwarding needed to allow zoom, pan,.. while on element

I fixed my code, the missing thing was

buttons: ev.buttons,

Thanks for your immediate reply.

attachment:

Why Mouse Events Don’t Automatically Pass Through Your SVG to the Map

When you place an SVG element on top of a MapLibre (or Mapbox GL) map, the mouse events (clicks, drags, etc.) are blocked by the SVG and don’t reach the map underneath. This happens due to:

1. Event Bubbling & Default Behavior

   • By default, mouse events fire on the topmost element (your SVG) and don’t automatically "pass through" to elements below.
   • MapLibre relies on pointer events (like mousedown, mousemove) for panning/zooming, but your SVG intercepts them.

2. SVG’s pointer-events Property

   • SVG elements have a CSS property called pointer-events, which controls how they interact with mouse/touch events.
   • Default value: auto (blocks events unless handled).

---

Solutions to Forward Events to the Map

1. Make the SVG "Transparent" to Events (Best for Overlays)

svg {
  pointer-events: none; /* Lets clicks pass through to the map */
}

• ✅ Pros: Simple, no JS needed.
• ❌ Cons: SVG won’t respond to any events (if you need interactivity, use Solution 2).

2. Forward Specific Events Manually (If SVG Needs Interactivity)

const svgElement = document.querySelector('svg');
const map = /* Your MapLibre instance */;

svgElement.addEventListener('mousedown', (e) => {
  // 1. Handle SVG logic (if needed)
  console.log('SVG clicked, but forwarding to map');

  // 2. Clone and dispatch the event on the map’s canvas
  const mapCanvas = map.getCanvas();
  const clonedEvent = new MouseEvent(e.type, {
    bubbles: true,
    clientX: e.clientX,
    clientY: e.clientY,
    // Include other props (button, shiftKey, etc.)
  });
  mapCanvas.dispatchEvent(clonedEvent);
});

• ✅ Pros: SVG can still handle events before forwarding.
• ❌ Cons: Requires manual event forwarding for each event type (mousemove, mouseup, etc.).

3. Hybrid Approach (Conditional Passthrough)

svg.click-through {
  pointer-events: none;
}

// Enable/disable passthrough dynamically
svgElement.classList.toggle('click-through', true);

• Useful if you want to toggle interactivity.

---

Why This Happens in MapLibre/Mapbox GL

• The map renders in a WebGL canvas, which doesn’t naturally allow events to "pass through" overlays.
• Unlike DOM elements, WebGL lacks built-in event bubbling between layers.

Final Recommendation

• For non-interactive SVGs (e.g., static overlays): Use pointer-events: none.
• For interactive SVGs: Forward events manually (Solution 2).