Leaflet.js: Use ctrl + scroll to zoom the map and Move map - Javascript Leaflet

Javascript examples for Leaflet:Zoom

  1. HOME
  2. Javascript
  3. Leaflet
  4. Zoom

Description

Leaflet.js: Use ctrl + scroll to zoom the map and Move map

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Leaflet two fingers swipe</title> 
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" > 
      <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" ></script> 
      <style>

#map {// w w  w  .j a v  a2  s. c  o m
   height: 90vh;
   position: relative;
   z-index: 10;
}
#map.swiping::after {
   content: 'Use two fingers to move the map';
   color: #fff;
   font-family: 'Lato', sans-serif;
   font-size: 24px;
   font-weight: 300;
   justify-content: center;
   display: flex;
   align-items: center;
   padding: 15px;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 9999;
   pointer-events: none;
}


      </style> 
   </head> 
   <body translate="no"> 
      <div id="map"></div> 
      <script>
var pc = true;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  pc = false;
}
var map1 = L.map("map", {
  center: [54.687157, 25.279652],
  zoom: 10,
  dragging: pc,
  tap: pc
});
var OpenStreetMap_BlackAndWhite = L.tileLayer(
  "http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png",
  { maxZoom: 18,
    attribution:'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}).addTo(map1);
const mapEl = document.querySelector("#map");
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')
  }
}
      </script>  
   </body>
</html>

Related Tutorials