I want to subdivde the number of scrolling wheels it takes to reach max zoom.. but zoomDelta not working. No matter what zoomDelta value is, it zooms by 1 always.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Zoom Control</title>
<!-- Include Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<!-- Include Leaflet JavaScript -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
<!-- Create a div element with ID 'map' to contain the map -->
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
// Initialize the map with a center, zoom level, and other options
var map = L.map('map', {
center: [500, 500], // Initial center latitude and longitude
zoom: 1, // Initial zoom level
minZoom: 1, // Minimum zoom level
maxZoom: 3, // Maximum zoom level
crs: L.CRS.Simple // Use Simple CRS for image overlay
});
// Define bounds for the image overlay
var bounds = [[0,0], [1000,1000]];
// Add an image overlay using your image
var image = L.imageOverlay('Texture/test map.png', bounds).addTo(map);
// Remove the default zoom control
map.zoomControl.remove();
// Add event listener for zoomstart event
map.on('zoom', function(event) {
console.log('Current Zoom Level: ' + map.getZoom());
});
</script>
</body>
</html>
Console log:
Current Zoom Level: 2 Text6.html:37 Current Zoom Level: 3 Text6.html:37 Current Zoom Level: 2 Text6.html:37 Current Zoom Level: 1 Text6.html:37