@openagenda/leaflet-gesture-handling
Version:
A Leaflet plugin that allows to prevent default map scroll/touch behaviours
69 lines (57 loc) • 2.71 kB
HTML
<html>
<head>
<title>leaflet-gesture-handling.js</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Leaflet (JS/CSS) -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet-src.js"></script>
<!-- leaflet-gesture-handling -->
<link rel="stylesheet" href="../dist/leaflet-gesture-handling.css">
<script src="../dist/leaflet-gesture-handling.js"></script>
<style>
html,
body,
.map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var map = new L.Map('map', {
center: [41.4583, 12.7059],
zoom: 5,
tap: false,
dragging: true,
scrollWheelZoom: true,
gestureHandling: true,
gestureHandlingOptions: { // OPTIONAL
// text: {
// touch: "Hey bro, use two fingers to move the map",
// scroll: "Hey bro, use ctrl + scroll to zoom the map",
// scrollMac: "Hey bro, use \u2318 + scroll to zoom the map"
// },
// locale: 'en', // set language of the warning message.
// duration: 6000 // set time in ms before the message should disappear.
// importLocale: (lang) => import(`../dist/locales/${lang}.js`)
}
});
var Basemap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', //, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
});
Basemap.addTo(map);
var popup = L.popup({ maxHeight: 150 })
.setLatLng(map.getCenter())
.setContent('<p>Hello world!<br />This is a nice popup.</p><p>Hello world!<br />This is a nice popup.</p><p>Hello world!<br />This is a nice popup.</p><p>Hello world!<br />This is a nice popup.</p><p>Hello world!<br />This is a nice popup.</p><p>Hello world!<br />This is a nice popup.</p><p>Hello world!<br />This is a nice popup.</p><p>Hello world!<br />This is a nice popup.</p>')
.openOn(map);
</script>
<a href="https://github.com/Raruto/leaflet-gesture-handling" class="view-on-github" style="position: fixed;bottom: 20px;left: calc(50% - 60px);z-index: 9999;" > <img alt="View on Github" src="https://raruto.github.io/img/view-on-github.png" title="View on Github" width="163"> </a>
</body>
</html>