How do I disable mouse interactions or scrolling in an open maps iframe
?
I have the following and I put the attribute scrollwheel="false"
Is there a way via css that can disable scrolling or interactions via css?
<iframe id= "mapsource" scrollwheel="false" src="http://www.openstreetmap.org/export/embed.html?bbox=-123.21233510971068%2C49.260691198361066%2C-123.18484783172607%2C49.27329289319553&layer=mapquest&marker=49.26699244809891%2C-123.19858074188232"></iframe>
I am open to other options such as using javascript instead to disable scrolling?
Try pointer-events: none;
#mapsource {
pointer-events: none;
}
<iframe id= "mapsource" scrollwheel="false" src="http://www.openstreetmap.org/export/embed.html?bbox=-123.21233510971068%2C49.260691198361066%2C-123.18484783172607%2C49.27329289319553&layer=mapquest&marker=49.26699244809891%2C-123.19858074188232"></iframe>
If the controls (zoom in button, zoom out button etc) are important for you,you could use something like below.
# The magic - set the pointer-events to none to simply disable the
# scrolling on the map BUT NOT the functionality of the buttons!
# This happens only using leaflet api!
<style>
#map {
width: 100%;
height: 300px;
pointer-events: none;
}
</style>
# The map element
<div id="map"></div>
# The css link from leaflet
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
# The js link from leaflet
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
# Custom source code to initialize the map
<script>
var mymap = L.map("map").setView([37.980114, 23.729924], 17);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
L.marker([37.980114, 23.729924]).addTo(mymap);
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With