If there are no visible layers, OpenLayers will not recognize zoom scroll events

I have observed that when all OpenLayers.Layers are set to invisible, I lose the ability to zoom in and out using the mousewheel. Although I can still use the OpenLayers.Control.Zoom buttons, the mouse wheel functionality is disabled.

Is there a way to deactivate this 'feature'?

Edit:

Check out this jsfiddle link. Set the layer to invisible, try scrolling, then make it visible again. It doesn't work. But if you set it invisible, use the zoom control button, and then make it visible again.

http://jsfiddle.net/a8kK4/56/

Here is some code showing how the map is initialized because SO requires it in order to post jsfiddle:

var map = new OpenLayers.Map({
        div: "map",
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        layers: [ new OpenLayers.Layer.OSM() ]
    });
javascriptopenlayers

Answer №1

It seems that the issue lies within the onWheelEvent of the MouseWheel handler. You can find the code snippet here on github. The problem arises with the following lines:

if (!overScrollableDiv && overMapDiv) {
    if (allowScroll) {

When the map is hidden, it's impossible for all these conditions to be met, resulting in the call to this.wheelZoom(e) not being executed, which is intentional behavior.

A temporary solution would be to override the entire function and simply set allowScroll to true when initializing it. Essentially, you would copy the entire function into your code after downloading the main OpenLayers.js file and make this specific change:

  OpenLayers.Handler.MouseWheel.prototype.onWheelEvent= function(e){        

    if (!this.map || !this.checkModifiers(e)) {
        return;
    }

    var overScrollableDiv = false;
    //CHANGE THIS LINE TO TRUE
    var allowScroll = true;
    var overMapDiv = false;

   //rest of function .......
   };

An issue with this approach is that scrolling will occur whenever the mouse wheel is used anywhere. It may be more efficient to adjust the conditions under which overMapDiv, allowScroll, and overScrollableDiv are set. While I couldn't get this to work on jsFiddle due to version conflicts, it worked correctly when tested locally. Hopefully, this provides some insight.

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

Using Vuex as a global event bus ensures that all subscribers will always receive notifications for

For a while now, I have relied on a global event bus in Vue - creating it as const bus = new Vue(). It works well, but managing subscriptions can get tedious at times. Imagine subscribing to an event in a component: mounted() { bus.$on('some.event ...

javascriptvue.jsvuex

What causes the React app to fail in maintaining the login session with the Node.js server?

Greetings, I have a NodeJS server set up in two separate files: app.js and routes.js. The app.js file includes code for setting up the server, error handling, middleware configuration, and routing logic. The routes.js file contains specific route configu ...

javascriptnode.jsreactjsaxiossaml-2.0

What steps should I follow to create a JavaScript file incorporating jQuery?

As a newcomer to JavaScript and JQuery, I come from a background in basic C++ where I enjoy including header files and calling functions from there to maintain clean code. Now that I want to create a new JavaScript file, how can I ensure that I am able to ...

javascriptjquery

Material-inspired Design Device Compatible DIV slide with JS, JQuery, and CSS

My goal is to achieve something similar to this: Desired Live Website I am looking for a feature where clicking on the div will slide in content from the right, load an external page inside it, and close when prompted. The slider div should be device c ...

javascriptjquerycssfluid-layoutmaterial-design

A Step-by-Step Guide to Clearing JSON Cache

I'm currently utilizing jQuery to read a JSON file. However, I've encountered an issue where the old values are still being retrieved by the .get() function even after updating the file. As I continuously write and read from this file every secon ...

javascriptjqueryjson

Adjust the marginLeft and marginRight values in a JavaScript statement within a Highcharts configuration

Is there a way to adjust the chart marginLeft and marginRight using Highcharts, and then redraw it in JavaScript? I am looking to change the chart margin dynamically at different points in my code. http://jsfiddle.net/ovh9dwqc/ I attempted to do this wit ...

javascriptjqueryhighcharts

Modifying Bracket Shell Name leads to WebSocket Connection Failure

I have been working on developing an application using the Brackets shell. Specifically, I am in the process of creating a customized code editor for a project rather than starting from scratch by modifying Brackets. Up until now, I have managed to addres ...

javascriptnode.jsadobe-bracketsbrackets-shell

Showcasing articles in an XML feed according to specific keywords found in the headline

I'm currently working on designing a website for a client and I want to minimize my involvement in its maintenance. I am considering using RSS feeds to automate the process by having content posted on Blogger and then feeding it to the site. However, ...

javascripthtmlwebrssfeed

The icons from FontAwesome in Vue do not update when computed

I am seeking a way to dynamically change the header icon based on a conversation property. <a class="navbar-item" :title="$t('header.lock')" @click="makePrivate"> <i class="fas" :class="getLockClass"></i> </a> These ...

javascriptvue.js

Tips on Avoiding Initial Click Activation

I've been working on a JavaScript function that dynamically generates an iframe with a button that, when clicked, deletes the iframe itself. Here are the functions I've written: function createIframe (iframeName, width, height) { var ifram ...

javascript

Creating a group object based on ID using react-native and JavaScript - a step-by-step guide

I have an array of objects that I need to reorganize so that each object with the same guid is grouped together. For instance, given this array; [ {"guid":"3a03a0a3-ddad-4607-9464-9d139d9989bf","comment":"text&quo ...

javascriptarraysreactjsreact-nativeobject

The absence of a React JS button on the page

I'm in the process of creating a React demo application and I've come across this component: var MediaList = React.createClass({ displayName: 'MediaList', getInitialState: function() { return { tweets: getTweets(numTweets) ...

javascriptreactjs

The React material-table only updates and rerenders the table when the data is updated twice

Currently, I am utilizing a tool called material-table (check it out here: https://material-table.com/#/) which has been developed using React. The issue I am facing is that the data passed as a prop to material-table doesn't seem to update correctly ...

javascriptreactjsreact-nativematerial-uimaterial-table

What is the best way in jQuery to display a particular div with a unique id when a link is clicked?

I have a div with the following structure: <article id="#pippo">blablabla</article> which I have hidden using jQuery $('article').hide(); Now, I want to create a link menu that displays a specific article id when it's clicked ...

javascriptjqueryhtmlhyperlinkcss-selectors

Tips for preventing duplicate entries in an AG Grid component within an Angular application

In an attempt to showcase the child as only 3 columns based on assetCode, I want to display PRN, PRN1, and PRN2. Below is the code for the list component: list.component.ts this.rowData.push( { 'code': 'Machine 1', &apo ...

javascriptangulartypescriptag-grid

jQuery event triggers upon completion of execution

A custom code has been integrated into my project using jQuery. Check out the code snippet below: <script> $("#startProgressTimer").click(function() { $("#progressTimer").progressTimer({ timeLimit: $("#restTime").val(), onFinish ...

javascriptphpjqueryhtmlcss

Determine the status of a checkbox in Protractor with JavaScript: Checked or Unchecked?

I'm currently facing a challenge while writing an end-to-end Protractor test. I need to verify whether a checkbox is enabled or not, but it doesn't have a 'checked' property. Is there a way in JavaScript to iterate through a list, check ...

javascriptprotractor

Using the ES6 filter method to iterate through a double nested array of objects

Struggling with filtering a nested array of objects and specifically stuck at the filter part. Any idea on how to eliminate one of the marks? this.state = { data: [ { id: 1, name: "Main", subs: [ { id: "jay", ...

javascriptreactjsecmascript-6

Tips for seamlessly incorporating advertisements into a mixed application

I am having trouble adding banner ads to my hybrid application developed with Telerik. Despite my extensive research, I have been unable to find a suitable solution. Is there any html5 or javascript banner advertising service/API that is compatible with ...

javascripthtmltelerikadsadsense

If there is a value in the array that falls below or exceeds a certain threshold

Imagine you have a set number of values stored in an array and you want to determine if any of them fall above a certain threshold while also being below another limit. How would you achieve this? Provide a solution without resorting to using a for loop o ...

javascriptarraysif-statement