Disable scroll wheel zoom on Leaflet?

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.

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


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

I didn’t test this though.

1 Like

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


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.