Prevent scroll position of window when focus on LeafLet Map - Mouse wheel zoom on leaflet map only after click - Leaflet map scrolls top on focus on Browsers

I have a leaflet map on an HTML page. When the map is focused the map jumps so that it's completely visible in the viewport. If the whole map doesn't fit, then the top of the map becomes aligned with the top of the viewport and the bottom just hangs off the end.

This is annoying, because then the whole page area jumped to top.

We need to add the listener immediately after the map initialized. So the whole thing becomes normal as we want like no scroll on focus.

const map = L.map('leaflet-js-map').setView([latLng[0].Longitude, latLng[0].Latitude], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { minZoom: 10, maxZoom: 18, attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors' }).addTo(map); map.once('focus', function(e) { console.log(e); if (map.scrollWheelZoom.enabled()) { map.scrollWheelZoom.disable(); } else { map.scrollWheelZoom.enable(); } });

Free Map Integration - Leaflet.js with OpenStreetMap tiles - Display multiple point locations as map markers - Plot multiple points on Map view - Display multiple point locations as map markers

Here is the documantation https://leafletjs.com/examples/quick-start/

Code snippet (Download full code from here):

<script src="//code.jquery.com/jquery-3.6.1.min.js"></script> <link rel="stylesheet" href="leaflet.css" /> <script src="leaflet.js"></script> <!-- https://leafletjs.com --> <div id="leaflet-js-map"></div> <div> <button id="moveToPoint">Move to specific point</button> </div> <script type="text/javascript"> const map = L.map('leaflet-js-map').setView([46.241226, 6.051737], 14); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { minZoom: 0, maxZoom: 18, attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors' }).addTo(map); const leafletMarkers = L.layerGroup([ new L.marker([46.233226, 6.055737]), new L.marker([46.2278, 6.0510]), new L.marker([46.23336, 6.0471]) ]); leafletMarkers.addTo(map); var LeafIcon = L.Icon.extend({ options: { shadowUrl: 'images/leaf-shadow.png', iconSize: [38, 95], shadowSize: [50, 64], iconAnchor: [22, 94], shadowAnchor: [4, 62], popupAnchor: [-3, -76] } }); var greenIcon = new LeafIcon({iconUrl: 'images/leaf-green.png'}), redIcon = new LeafIcon({iconUrl: 'images/leaf-red.png'}), orangeIcon = new LeafIcon({iconUrl: 'images/leaf-orange.png'}); L.icon = function (options) { return new L.Icon(options); }; L.marker([46.234226, 6.055737], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf."); L.marker([46.237226, 6.052737], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf."); L.marker([46.240226, 6.065737], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf."); [{T: 46.249226, N: 6.056937, D: '1'}, {T: 46.250226, N: 6.066937, D: '2'}].forEach(function (t) { const el = document.createElement('div'); L.marker([t.T, t.N]).addTo(map).on("click", function () { console.log(this); var popup = L.popup() .setLatLng(this._latlng) .setContent('<p>Hello world!<br />This is a nice popup-' + t.D + '</p>') .openOn(map); }) }); $("#moveToPoint").on("click", function () { map.flyTo(L.latLng(46.249226, 6.056937), 15); const popUps = document.getElementsByClassName('leaflet-popup'); if (popUps[0]) popUps[0].remove(); L.popup() .setLatLng(L.latLng(46.250226, 6.056937)) .setContent('<p>Hello world!<br />This is a nice popup-Self</p>') .openOn(map); }); </script> <style type="text/css"> #leaflet-js-map { width: 100%; height: 500px; } </style>

Output is as below: