Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Plugins

Disable scroll wheel zoom on Leaflet?

form

Solved by colin avolve View solution

Started by colin avolve 7 years ago · 4 replies · 37459 views
7 years ago

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.

<hr />

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

👍 1
last edited 06/09/19 by colin avolve
7 years ago

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

TXT
// 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:

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

to:

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

I didn't test this though.

👍 2
7 years ago Solution

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

I changed

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

to

TWIG
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
6 years ago

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
6 years ago

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

Suggested topics

Topic Participants Replies Views Activity
Plugins · by Rene, 1 week ago
2 49 1 week ago
Plugins · by Xavier, 4 weeks ago
2 57 4 weeks ago
Plugins · by Luka Prinčič, 7 years ago
3 1184 1 month ago
Plugins · by Sebastian van de Meer, 1 month ago
1 50 1 month ago
Plugins · by PIERROT Alain, 2 months ago
3 75 2 months ago