Disable map scrolling open street maps

Question

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&amp;layer=mapquest&amp;marker=49.26699244809891%2C-123.19858074188232"></iframe>

I am open to other options such as using javascript instead to disable scrolling?

Nelda

The HTML attribute seems to have been working for you. You were just looking for a method using JavaScript? I am looking for a simple method for disabling scrolling and adding a HTML attribute would be the most trivial. The code copied from OSM includes a scrolling="no" attribute but neither no nor yes have any effect. Same with the scrollwheel attribute from your question. Where did you get that from? – Jurdi

Answer 1

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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymap);
    L.marker([37.980114, 23.729924]).addTo(mymap);

</script>

Guayule

Answer 2

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&amp;layer=mapquest&amp;marker=49.26699244809891%2C-123.19858074188232"></iframe>

Fusee

Unfortunately pointer-events: none disables all kind of mouse events alltogether. So that map behaves like a static image and there is no visual feedback. I am looking for the behavior like Google Maps: don’t zoom on scroll-wheel but show a hint to use the [+] [-] controls. – Jurdi

@DanielBöhmer If you add pointer-events: auto on control buttons([+][-]) then it should work fine in your case. – Fusee

Answer 3

I wanted to do the same. Disable mouse scroll but keep everything else functional. Options here either completely disabled map, or they didn't work at all.

I ended up having to use Leaflet, which is a library that integrates with Open Street Maps. It's light, quick and easy. Follow their Quick Start guide to set up your map.

To disable scroll, you must pass the Option argument {scrollWheelZoom:false} when you initialize the map, like so:

var mymap = L.map('mapid', {scrollWheelZoom:false}).setView([51.505, -0.09], 13);

Wurster

Answer 4

There is a method - https://venues.here.com/documentation/sdk/v1/example/disable-zoom-wheel-scroll

map.scrollWheelZoom.disable();

This implementation also works fine but with the first example you can use it conditionally

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        scrollWheelZoom: false,   
        maxZoom: 19,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymap);

Unconscionable

This is the documentation for Here Maps, not for OpenStreetMap – Jurdi

I agree, but this is the method. After this I saw it also in the OSM documentation. No need to use css pointer-event: none or whatever :) – Unconscionable

@Unconscionable there seems to be no method scrollWheelZoom – Lewls