Turn off the feature of map scrolling on OpenStreetMaps

Is there a way to prevent mouse interactions and scrolling in an open maps iframe? I have already tried adding the attribute scrollwheel="false" to no avail. Are there any CSS methods to achieve this?

<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>

If not, I am also considering alternatives such as using javascript to disable scrolling. Any suggestions would be appreciated.

javascripthtmlcssmaps

Answer №1

One solution could be to use the CSS property 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>

Answer №2

If having control buttons like zoom in and zoom out is essential for your needs, you can implement the following solution:

# Disabling scroll functionality on the map while keeping the control buttons operational with Leaflet API
<style>
    #map {
        width: 100%;
        height: 300px;
        pointer-events: none;
    }
</style>

# The map element
<div id="map"></div>

# Include Leaflet CSS stylesheet
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf7fefafdf7feefdbaab5afb5ab">[email protected]</a>/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
# Include Leaflet JavaScript
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e525b5f58525b4a7e0f100a100e">[email protected]</a>/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

# Custom 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>

Answer №3

I was looking to achieve the same goal of disabling mouse scroll while keeping all other functionalities intact. However, the options available either disabled the map completely or didn't work at all.

In the end, I opted to use Leaflet, a lightweight library that works seamlessly with Open Street Maps. You can easily set up your map by following their informative Quick Start guide.

To deactivate scroll functionality, simply include the Option argument {scrollWheelZoom:false} when initializing the map, as shown below:

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

Answer №4

If you are looking to disable zoom wheel scroll functionality, check out this method - here

map.scrollWheelZoom.disable();

While the above implementation works perfectly fine, the first example allows for conditional use.

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);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble removing a cookie in express?

Seems pretty straightforward. In the /user/login route, I set a cookie as shown below: if (rememberMe) { console.log('Login will be remembered.'); res.cookie('user', userObj, { signed: true, httpOnly: true, path: '/' ...

javascriptnode.jsexpresscookies

Express.js Res redirection problem occurring with Backbone.js due to failure in redirecting hashtag URLs

Issue Summary: Having trouble with Express.js redirect functionality. The problem occurs when trying to redirect after entering /#impulse, but works fine with /impulse/. Server processes the request for /#impulse before applying redirect checks, which re ...

javascriptnode.jsbackbone.jsexpress

Exploring Amcharts using detailed JSON data

[{"SUM_PTS":{"datatype":"INTEGER","length":"8","value":"29903727","obfuscated":"false"},"SUM_TOTAL":{"datatype":"INTEGER","length":"10","value":"1644704985","obfuscated":"false"},"MID":{"datatype":"ALPHANUMERIC","length":"27","value":"Vendor 1","obfuscated ...

javascriptjsonamcharts

Issue: There is no specified method of transportation established

I'm facing an issue while trying to create an Outlook calendar event from my application using Express.js. The error message I am receiving is [Error:No transport method defined], and eventually, the response returns as 200 success after approximately ...

javascriptnode.jsexpress

Instructions for creating scrollable MaterializeCSS tabs when there are too many tabs to fit within the width of the container without scrolling

Here is an example code (SSCCE) that showcases the issue I am facing. The MaterializeCSS frontend framework documentation states: Scrollable Tabs Tabs automatically become scrollable Source However, when I attempt to use more tabs than can fit on the ...

jqueryhtmlcssmaterial-designmaterialize

Extracting information from JSON using jQuery

this is a sample json object: { "box 1": [{ "difficulty_grade": "5a+" }, { "gym": "New_gym" }, { "route_author": "some author" },]} https://i.sstatic.net/UJodJ.png Here is the code snippet: variable groups contains JSON data as shown in the ...

javascriptjqueryjson

Steps for setting up and shutting down the server during integration testing with Express and Supertest on NodeJS

One issue that continues to plague me is the "Address already in use::3000" error which pops up whenever I run my tests. This is what I currently have set up: package.json "scripts": { "test": "jest --watchAll --verbose --runInBand --maxWorkers=1" ...

javascriptnode.jsexpresssupertest

Which symbol or character corresponds to the public "get symbol" method?

While going through some Typescript code, I came across a line that is giving me trouble to understand. const symbol = Symbol.for('symbolname'); class Something { public get [symbol]() { return true; } ... } I am confused abou ...

javascripttypescript

How can a callback be properly passed in programming?

My coding approach is outlined below: var CustomLibrary = (function (window, $, undefined) { return { URI: 'http://testpage/API/', OnSuccess: function (data, status) { }, OnError: function (request, status, error) { } ...

javascriptjquerycallback

Customize Material-UI FAB Hover Color

While working on my project, I encountered an issue with a floating action button that contains an SVG icon nested underneath it. Even though the SVG icon is not in the children prop of the FAB, hovering over the FAB or the SVG icon causes the FAB to chang ...

javascriptreactjsmaterial-designmaterial-ui

Tips for updating multiple documents in a MongoDB database using an array of values

I have a range of Product items in my inventory and when a client places an Order, they submit an array of objects. Each object in the array includes the _id product (objectId) and the quantity they purchased. [ {producId: "dshsdsdh72382377923", quantity: ...

javascriptmongodbmongoose

A website with two distinct pages, where only the first page is refreshed

I have split the content of my HTML page into 2 separate subpages, based on the references provided below: Multiple distinct pages in one HTML file This is how my code is structured: ... <script> function show(shown, hidden) { document.getEle ...

htmlcss

Validating emails using angular material chips

I'm currently working on implementing a form that utilizes input chips to facilitate sending messages to multiple email addresses. While I've made progress in making the form functional, I'm facing difficulties in displaying error messages w ...

htmlangulartypescriptformsvalidation

Having trouble establishing an HTTPS connection with a Node.js server

After connecting to my server through the console without any errors, I encountered an issue in Chrome where it displayed a message stating This site can’t provide a secure connection local host uses an unsupported protocol. Here is the code snippet: im ...

javascriptnode.jssslopenssl

Observing changes in the height of an Angular directive

I've encountered an issue where I can't seem to get the code working properly even though the question has been asked before. Within my directive, I have found that the following piece of code functions correctly when the element's height i ...

javascriptangularjsangularjs-directive

"Bootstrap4 - Troubleshooting the Issue of Multiple Carousels Not Function

I attempted to incorporate 2 Bootstrap 4 carousels onto a single page, but encountered issues with the functionality. I utilized this code on my page, however, the last element in the carousel does not cycle correctly. There is a delay of 3 transactions be ...

htmlcsstwitter-bootstrapbootstrap-4

Mongoose and MongoDB in Node.js fail to deliver results for Geospatial Box query

I am struggling to execute a Geo Box query using Mongoose and not getting any results. Here is a simplified test case I have put together: var mongoose = require('mongoose'); // Schema definition var locationSchema = mongoose.Schema({ useri ...

javascriptnode.jsmongodbmongoosegeospatial

Changing the ng-include and ng-controller dynamically in your AngularJS project

I'm working on a section of my webpage that features multiple tabs, each requiring a partial and controller to function properly. My goal is to dynamically switch the ng-include and ng-controller based on the currently selected tab. One challenge I&a ...

javascriptangularjsmodel-view-controllerangularjs-ng-include

Issue: parsing error, only 0 bytes out of 4344 have been successfully parsed on Node.js platform

I've been attempting to utilize an upload program to transfer my files. The specific code I'm using is as follows: app.post('/photos',loadUser, function(req, res) { var post = new Post(); req.form.complete(function(err, fields, fil ...

javascriptnode.jsmongodbexpressmongoose

Utilizing React's multiple states for enhancing click event functionality

Here's the scenario: I am currently developing a Simon-Says game app using React Native. In this game, the user is shown a sequence of flashing buttons and must press them in the correct order. My main concern is figuring out how to utilize two diffe ...

javascriptreactjsreact-nativestate