Unable to zoom the map when pinching with multitouch on top of a marker (both fingers on top of the marker) #9258

fwzac · 2024-02-13T15:37:53Z

Checklist

I've looked at the documentation to make sure the behavior isn't documented and expected.
I'm sure this is an issue with Leaflet, not with my app or other dependencies (Angular, Cordova, React, etc.).
I've searched through the current issues to make sure this hasn't been reported yet.
I agree to follow the Code of Conduct that this project adheres to.

Steps to reproduce

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Leaflet Map with Markers</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    #map { height: 400px; }
  </style>
</head>
<body>
  <div id="map"></div>

  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script>
    // Sample data for markers
    var markersData = [
      {
        lat: 51.505,
        lng: -0.09,
        title: 'Marker 1',
        description: 'This is the first marker. It can contain any details you want to show in the popup.'
      },
      {
        lat: 51.51,
        lng: -0.1,
        title: 'Marker 2',
        description: 'This is the second marker. You can customize the content here as per your requirements.'
      }
    ];

    // Initialize the map
    var map = L.map('map').setView([51.505, -0.09], 13);

    // Add the base OpenStreetMap layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // Add markers with custom popups
    markersData.forEach(function(marker) {
      L.marker([marker.lat, marker.lng]).addTo(map)
        .bindPopup("<b>" + marker.title + "</b><br>" + marker.description);
    });
  </script>
</body>
</html>

Expected behavior

Upon zooming with touch (two fingers or pinching) from mobile it suppose to zoom like the map because i can see that the event is captured from the Map as you can see below for the marker

and the map:

Current behavior

the current behaviout is that everytime i tried to pinch on top of the marker it wont let me zoom the map. is there any way to do that ? like maybe passing the event to the map by creating new TouchEvent, i've tried that but it doesn't work and maybe i've missed some crucial information here. Your help would be much appreciated

Minimal example reproducing the issue

No response

Environment

Leaflet version: 1.7.1
Browser (with version): Chrome DevTools mobile
OS/Platform (with version): Android

fwzac added bug needs triage Triage pending labels Feb 13, 2024

fwzac changed the title ~~Unable to zoom the map when on top of a marker~~ Unable to zoom the map when pinching with multitouch on top of a marker (both fingers on top of the marker) Feb 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to zoom the map when pinching with multitouch on top of a marker (both fingers on top of the marker) #9258

Unable to zoom the map when pinching with multitouch on top of a marker (both fingers on top of the marker) #9258

fwzac commented Feb 13, 2024 •

edited

Unable to zoom the map when pinching with multitouch on top of a marker (both fingers on top of the marker) #9258

Unable to zoom the map when pinching with multitouch on top of a marker (both fingers on top of the marker) #9258

Comments

fwzac commented Feb 13, 2024 • edited

Checklist

Steps to reproduce

Expected behavior

Current behavior

Minimal example reproducing the issue

Environment

fwzac commented Feb 13, 2024 •

edited