I am a user of mapbox () and I am looking to adjust the zoom speed of the map when scrolling with the mouse. It seems like the API documentation does not have an option to control the zoom speed directly, unless it is done through something like the flyTo() method.
I attempted to adjust the zoom speed during the event triggered by scrolling, but unfortunately that did not yield the desired results. Is there a way to effectively regulate the speed of the zoom function while using mouse scroll?
After some experimentation, I managed to find a solution on my own. The first step was disabling the scroll functionality in Mapbox using the following code:
map.scrollWheelZoom.disable();
Next, I implemented standard jQuery wheel event handling on the specific div ID containing the map:
$(document).on('wheel','#map', function(e){
e.preventDefault();
if(e.originalEvent.wheelDelta/120 > 0) {
scrollZoomMap('up')
}
else{
scrollZoomMap('down')
}
}
The scrollZoomMap function plays a crucial role in this setup and might look something like the following:
function scrollZoomMap(dir){
//console.log("dir : " + dir);
var newZoom = null;
var debounce;
var el = map; //the mapbox instance.
latLng = el.getCenter();
var latitude = latLng["lat"];
var longitude = latLng["lng"];
var currentZoom = el.getZoom();
if (debounce) clearTimeout(debounce);
debounce = setTimeout(function(){
debounce = null;
if(dir == "up"){
newZoom = currentZoom + 1;
}else{
newZoom = currentZoom - 1;
}
if( newZoom > 0 && newZoom < 22){
//console.log("newZoom : " + newZoom);
el.setView([latitude, longitude], newZoom);
}
}, 300);
}
Currently, I have a Node/Express backend that utilizes Pug.js to render various server-side routes for a basic, static website. In React.js, I have developed an interactive "builder" component through CRA, enabling visitors to configure products interacti ...
Recently, I've been researching efficient ways to store and retrieve data for my time management/project capturing application. I would greatly appreciate any insights on which storage strategy to utilize, or suggestions for alternative approaches, es ...
Can anyone provide guidance on integrating the Flipclock 24-hours feature into my Ionic 2 application? I'm unsure about the compatibility of the JavaScript library with Ionic 2 in typescript. I have searched for information on using Flipclock in Ionic ...
After a customer presses any key, I would like to check an email. Below is the code I am using: document.observe("dom:loaded", function() { $('billing:email').observe('keypress', function(event){ console.log(event.element(). ...
Scenario I am currently working with a route that has the following structure: router.get('/api/v1/tokens/:token_name', middleware1, middleware2) While this setup works well for most values of token_name, I now need to incorporate special handl ...
Hey there! I'm currently working with highcharts and I have a polar chart where I want to display time on the y-axis instead of angles. Here's what I've tried so far: On the x-axis, I have angles and I've set tickInterval: 45,. How can ...
Greetings, I am currently working on a PHP Project that involves loading requests using ajax. Below are the two functions in question: Function One: Upon clicking the showNotify event, an ajax request is made to retrieve content with a spinner displayed u ...
After researching for a while, I've only come across information about text displayed after a broken iframe on this topic. However, what I actually want to do is display text below an iframe set at 90% height, like so: https://i.sstatic.net/KHXI3.png ...
Looking for a solution to embed a YouTube video on my webpage without the link appearing when hovering over it and without the suggested videos at the end. Just the option to replay the video without the distraction of related videos. ...
import React, { PureComponent } from 'react'; import ReactCrop from 'react-image-crop'; import 'react-image-crop/dist/ReactCrop.css'; class CoachDashboard extends PureComponent { state = { src: null, crop: { u ...
Having <a> href tag below, clicking will redirect to www.duckduckgo.com, with the value of page.publicWebsite being displayed as well. {{page.publicWebsite}} shows www.duckduckgo.com. Is everything functioning correctly? https://i.stack.imgur.com/ ...
I am attempting to load a local HTML file into a div, however it is not displaying any content on the page despite showing an alert. Here is the HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> ...
I'm struggling to change the source of the img element using JavaScript and Ajax. The img tag doesn't have any IDs or classes, making it difficult for me to select and update the src. Can anyone provide guidance on how I can accomplish this? Belo ...
I've been struggling with this issue for quite some time now and I can't seem to figure it out, no matter how hard I try. It seems that my input field is not capturing the value entered by the user for some unknown reason. Let me share the code ...
At the moment, I'm utilizing the animation library found at . Whenever I trigger my confetti animation, the Y Scroll steadily rises until the animation completes. I'm curious if there's a method to cap the y-scroll at a certain height. I wo ...
Here is an array that I need help with: "data": { "risks": [ { "id": "22", "name": true, "surname": 0.5, "age": 0.75, "heigth" ...
I am currently facing a challenge in integrating the functionality of react router with material ui components. For example, I have a scenario where I want to combine a router and a button. I attempted to merge them together and customize their style. In ...
Utilizing Awesome Tables (AT), I am extracting data from a Google Sheets document to display on a website. The HTML template in the sheets is used for formatting the data, specifically focusing on the table output with inline CSS styling. Since the templat ...
I'm really struggling to understand why Node (express) only renders the index page and returns a 404 error for other pages, like "comproAffitto" in this example. In my app.js file: var index = require('./routes/index'); var comproAffitto= ...
Is there a method to identify whether the "res" object in NodeJS, built with Javascript, corresponds to an Express or Fastify response? ...