Disable scroll wheel zoom on Leaflet?

Support Plugins
1

Anyone have advice on disabling scroll wheel/mousepad zooming when using the Map marker leaflet plugin? https://github.com/finanalyst/grav-plugin-map-marker-leaflet/

JS is not my strong suit, and any changes I have tried to make to the mapleaflet.html.twig file (after moving to my theme files) break my map.

Depending on where this is set, either: scrollWheelZoom.disable() or scrollWheelZoom: false

Any suggestions appreciated.

EDIT: I have an incomplete (dev, proof of concept) version of the site up at http://dev.southcoastsevens.com.au if that helps.

1 Like
2

The option should be set in the map initialisation, e.g.:

// Initialize the map on the div with id="map" with a given center, 
// zoom level and scrollwheel disabled:
var map = L.map('map', {
    center: [51.505, -0.09],
    zoom: 13,
    scrollWheelZoom: false
});

See https://leafletjs.com/reference-1.5.0.html#map-scrollwheelzoom

In your code, change:

var map = L.map('GerryEmery').setView([-34.741300, 150.822600],9);

to:

var map = L.map('GerryEmery', {
    scrollWheelZoom: false
}).setView([-34.741300, 150.822600],9);

I didn’t test this though.

2 Likes
3

Appreciate the reply — I revisited my customised mapleaflet.html.twig file (in theme/templates/partials).

I changed

var map = L.map('{{mapname}}').setView([{{ lat }}, {{ lng }}],{{ zoom }});

to

var map = L.map('{{mapname}}', { scrollWheelZoom: false }).setView([{{ lat }}, {{ lng }}],{{ zoom }});

which has disabled to zoom on scroll. I must have had a typo or similar in there before.

Note: for anyone looking to do similar, this will disable zoom on scroll for all maps you add to a site.

1 Like
4

Hi there, I’m working with P5.JS library; is there anyway to disable all the zoom, rotate and moving controls of a map with that? I cannot find the part of the codes to add them in

1 Like
5

Just like with Leaflet disabling control on a map component is something which is done in Javascript. Once you know how to do it you can start using a Grav Twig template to make these setting variable and set them when the page is served.

You’ll have more chance of getting a helpful answer when you post your question in the p5.js Forum but maybe you already have.

1 Like