Experiencing excessively rapid zooming in JavaFX Leaflet on WebView

Incorporated a Leaflet map into my JavaFX project, but encountered a zoom speed issue. When I zoom in by one step, it zooms all the way to the size of Iceland: https://i.sstatic.net/BkReA.jpg

The expected behavior is for the map to zoom in just slightly: https://i.sstatic.net/RBQJD.jpg

Interestingly, when opening the same html/js file directly in a browser, the zoom works correctly. This suggests that the problem lies within the JavaFX import.

The Leaflet map was added to JavaFX using the following method: https://i.sstatic.net/veeGW.png

Any insights on why there is a discrepancy in the zoom level? Is it possible to adjust the wheel delta settings?

javascriptjavawebviewleaflet

Answer №1

My solution involved manually adjusting the zoom level based on user interaction with the mouse scroll:

var handleScrollEvent = function(evt){
            if (!evt) evt = event;
            var direction = (evt.detail<0 || evt.wheelDelta>0) ? 1 : -1;
            
            if(direction > 0) map.zoomIn(1);
            else map.zoomIn(-1);


        };

document.getElementById("map").addEventListener('DOMMouseScroll',handleScrollEvent,false); // for Firefox
document.getElementById("map").addEventListener('mousewheel',    handleScrollEvent,false); // for other browsers

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 Vue.js 2 to fetch a prop value from an API using http.get prior to the component being mounted

My goal is to fetch data from my server and use that data to populate a prop or data in vuejs. Essentially, I am looking to pass the fetched data as a parameter of my component. data() { return { resources_data : [ { id: 'a& ...

javascriptvue.jsvuejs2vue-component

Using Angular.js to fetch information from a MySQL database

I'm currently trying to retrieve data from a MySQL database in an Angular.js application. I have gone through multiple tutorials, but unfortunately, none of them have been successful for me. I have a PHP script that returns a JSON array with example ...

javascriptphpmysqlangularjs

Issue with require in Three.js

I am delving into the world of Three.js and Require.js for the first time. My objective is to load an Obj and Mtl file using the OBJMTLoader. However, I have encountered timeout errors in the console with my current setup: require({ baseUrl: 'js& ...

javascriptthree.jsrequirejs

Is there a way to efficiently create an ng-repeat for multiple divs?

I am looking to iterate through a collection of divs, as mentioned below. Each object in the list will have content-data and a link to an image. The code provided shows individual entries for each list item, but I would like to retrieve it from the angular ...

javascriptcssangularjsangularjs-ng-repeat

Tips for properly closing the cursor in Android using Java

When attempting to close the cursor using onSets.close(); in the getData() method, the data does not display as expected. If I don't close the cursor, Eclipse gives an error message stating that the base or cursor is not closed. However, if I include ...

javaandroid

After removing the timezone from the timestamp log, why is it now showing as one day behind?

Within my programming, I store a timestamp in the variable 'var timeStamp = finalData.obj.followers[0].timestp;', which currently outputs '2020-04-15T00:00:00.000Z.' To extract only the date and remove the time zone information, I util ...

javascriptdatetimegoogle-apps-scripttimezonegoogle-apps-script-editor

Three.js: Troubleshooting a Black Screen Issue During Rendering

Despite setting the body background color to #135462, the code below is displaying a black screen. It seems like there might be an issue with the rendering code preventing the background color from showing up properly. Additionally, the object is not appe ...

javascriptthree.js

Ways to customize the hover effect for react-bootstrap navbar link

I'm looking to update the hover effect color from white to green, but I'm having trouble finding the correct CSS code for it. <Navbar fixed='top' collapseOnSelect expand="md" variant="dark" className="animate ...

javascriptcssreactjsreact-bootstrap

Deactivating AngularJS debug information in a gulp / typescript production compilation

What is the most effective approach to disabling debug data in a gulp production build? The recommended method for disabling debug data is: myApp.config(['$compileProvider', function ($compileProvider) { $compileProvider.debugInfoEnabled(false ...

javascriptangularjstypescriptgulp

Steps to activate checkbox upon hyperlink visitation

Hey there, I'm having a bit of trouble with enabling my checkbox once the hyperlink has been visited. Despite clicking the link, the checkbox remains disabled. Can anyone provide some guidance on how to get this working correctly? <script src=" ...

javascripthtmlasp.net

Unable to change the variable for the quiz

Currently, I am in the process of developing a quiz app and I am facing an issue with my correct variable not updating. Whenever I trigger the function correctTest() by clicking on the radio button that corresponds to the correct answer, it does get execut ...

javascripthtmlangularjsnode.jsmongodb

"Looking to navigate to the bottom or shift focus to the bottom in an Angular application? Here's

In the div, I have added an element and I am looking to automatically scroll to the bottom of the div every time a new element is added. While I know how to achieve this using jQuery, I am unsure of how to do it using AngularJS. The id of the div is testC ...

javascriptjqueryangularjsangularjs-directive

What is the best way to utilize "exports" in package.json for TypeScript and nested submodules?

Looking to leverage the relatively new "exports" functionality in Node.js/package.json for the following setup: "exports": { ".": "./dist/index.js", "./foo": "./dist/path/to/foo.js" } so that ...

javascriptnode.jstypescriptnpm

What is the process for specifying a dependency on an ng-metadata module?

I am currently working on a project that is utilizing ng-metadata for creating a few Angular 1.5 modules. One of the test modules/components in this project has the following structure: import { NgModule, Component, Inject, Input, Output, EventEmitter } f ...

javascriptangularjstypescriptangular-decorator

How can I dynamically access the value of theme.mixins.toolbar.minHeight in MUI?

How can I effectively utilize MUI's theme.mixins.toolbar to calculate the height using height: calc(100vh - toolbar)? I am currently experimenting with this approach: function SwipeCard() { return ( <Box sx={{ height: (theme) = ...

javascriptcssreactjsmaterial-uitoolbar

Fetching the Key-Value pairs from a HashMap in JavaScript/AngularJS

I am currently working with a HashMap in the Frontend that is being retrieved from the Backend: var myVar = {"24":{"amount":2,"minutes":30},"32":{"amount":3,"minutes":30}} Can anyone offer guidance on how to access both the keys and values in Javascript ...

javascriptangularjshashmap

What is the best way to utilize a forEach method or other array methods on arrays within objects in Javascript?

I'm currently exploring the use of modern array methods on arrays, but I'm curious if there's a way to apply these methods to objects that contain arrays? If not, would it be more efficient to store the entire object as an array instead? va ...

javascriptarraysnode.jsobject

Dealing with Express.js: Handling multiple responses using a single response object

I am dealing with a lengthy process that requires sending data back at different stages. Is there a way to send multiple responses using express.js res.send(200, 'hello') res.send(200, 'world') res.end() However, when I use curl -X PO ...

javascriptnode.jsexpress

js an asynchronous function that runs upon being called

I am facing an issue where I am trying to reference an async function but it ends up executing instead. const Payment = props => { const [buttonAction, setButtonAction] = useState(null); useEffect(() => { if(some true stuff){ ...

javascriptreactjsasynchronous

When using Selenium WebDriver to locate an object, an error may occur stating that the result of the xpath expression is "[object Text]" instead of an element as expected

I am currently utilizing Selenium to validate the existence of specific text within a web page. Here is an example of how the HTML appears. <html> <div class="a-content"> <!--!-->==$0 " Text to Locate" <b ...

javascriptseleniumselenium-webdriverxpath