web-dev-qa-db-fra.com

Leaflet.js: utilisez ctrl + défilement pour agrandir la carte et déplacer la carte avec deux doigts sur mobile

J'utilise http://leafletjs.com/ ... est-il possible de:

  1. Utilisez ctrl + défilement pour agrandir la carte

  2. Déplacer la carte avec deux doigts sur mobile/tablette

... si similaire à ce que google maps fait? Avec les commentaires ...

Jusqu'à présent, c'est ma configuration:

// Leaflet Maps
var contactmap = L.map('contact-map', {
        center: [41.3947688, 2.0787279], 
        zoom: 15,
        scrollWheelZoom: false
    });
leaflet
15
Philipp M

zoomer la carte en utilisant ctrl + zoom. Je l'ai fait de façon personnalisée. le code html est ci-dessous

<div id="map"></div>

css

.map-scroll:before {
content: 'Use ctrl + scroll to zoom the map';
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
font-size: 34px;
 }
 .map-scroll:after {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
content: '';
background: #00000061;
z-index: 999;
}

jQuery

  //disable default scroll 
  map.scrollWheelZoom.disable();

  $("#map").bind('mousewheel DOMMouseScroll', function (event) {
    event.stopPropagation();
     if (event.ctrlKey == true) {
             event.preventDefault();
         map.scrollWheelZoom.enable();
           $('#map').removeClass('map-scroll');
         setTimeout(function(){
             map.scrollWheelZoom.disable();
         }, 1000);
     } else {
         map.scrollWheelZoom.disable();
         $('#map').addClass('map-scroll');
     }

 });

  $(window).bind('mousewheel DOMMouseScroll', function (event) {
       $('#map').removeClass('map-scroll');
  })

De manière simple lorsque l'utilisateur fait défiler sur la carte puis détecte que le bouton ctrl est enfoncé ou non, j'ajoute simplement une classe qui affichera un message sur la carte. et empêcher le zoom avant et arrière de l'écran en dehors de la carte.

7
Suresh Suthar

Il existe une bibliothèque incroyable qui fait exactement cela. Leaflet.GestureHandling

Il s'agit d'un complément à la brochure qui fonctionne à droite de la boîte, il est également modulaire et peut être installé à l'aide de npm.

Voici un exemple de travail utilisant la brochure et GestureHandling. Vous pouvez également l'essayer sur mobile.

P.S. Il a plusieurs langues intégrées :)

// Attach it as a handler to the map

const map = L.map('map', {
  gestureHandling: true
}).setView([51.505, -0.09], 13);

// Add tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
    #map {
      height: 400px;
      width: 400px;
    }
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
        crossorigin=""/>
  <link rel="stylesheet" href="//unpkg.com/leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css"
        type="text/css">
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
          integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
          crossorigin=""></script>
  <script src="//unpkg.com/leaflet-gesture-handling"></script>
  
  
  
  <div id="map"></div>
13
Shahar

J'ai réussi à résoudre votre deuxième problème.

J'ai utilisé css pour afficher le message à l'aide d'un ::after pseudo sélecteur.

#map { 
  &.swiping::after {
    content: 'Use two fingers to move the map';
  }
}

Et javascript pour capturer les événements tactiles.

mapEl.addEventListener("touchstart", onTwoFingerDrag);
mapEl.addEventListener("touchend", onTwoFingerDrag);

function onTwoFingerDrag (e) {
  if (e.type === 'touchstart' && e.touches.length === 1) {
    e.currentTarget.classList.add('swiping')
  } else {
    e.currentTarget.classList.remove('swiping')
  }
}

Il vérifie si le type est un touchevent et si vous utilisez 1 doigt, si c'est le cas, il ajoute la classe à la carte avec le message. Si vous utilisez plusieurs doigts, cela supprime la classe.

Démo de travail Je vous suggère d'utiliser un appareil mobile.

Code stylo de la démo

5
SurisDziugas