Gesture Handling

Have you taken at look at this? https://github.com/bozdoz/wp-plugin-leaflet-map#how-can-i-add-another-leaflet-plugin

Hello, I am also interested in this.

based on your guide I created this action

add_action('leaflet_map_loaded', 'fs_leaflet_loaded');
function fs_leaflet_loaded() {
  wp_enqueue_script('gestures_leaflet', 'https://unpkg.com/[email protected]/dist/leaflet-gesture-handling.min.js', Array('wp_leaflet_map'), '1.0', true);
  wp_enqueue_style('gestures_leaflet_styles', 'https://unpkg.com/[email protected]/dist/leaflet-gesture-handling.min.css');
}

for adding the custom JS from your example, the Gesture Handling Script says we must add this

var map = L.map("map", {
    gestureHandling: true
});

I am having trouble, where to add it on your custom script example

I had to take a look at Leaflet handlers (https://leafletjs.com/examples/extending/extending-3-controls.html), but it looks like this can be done by using the for loop, as mentioned in the FAQ, and just calling map.gestureHandling.enable():

for (var i = 0, len = maps.length; i < len; i++) {
  var map = maps[i];
  map.gestureHandling.enable();
}

Let me know if that works.

• This reply was modified 4 years, 8 months ago by bozdoz.

Life saver!
Worked like a charm!

Hello, I would like to active this option as well, but I think I make some mistakes, because I could not get it to work.

I have added the following to my function php

add_action('leaflet_map_loaded', 'fs_leaflet_loaded');
function fs_leaflet_loaded() {
  wp_enqueue_script('gestures_leaflet', 'https://unpkg.com/[email protected]/dist/leaflet-gesture-handling.min.js', Array('wp_leaflet_map'), '1.0', true);
  wp_enqueue_style('gestures_leaflet_styles', 'https://unpkg.com/[email protected]/dist/leaflet-gesture-handling.min.css');
	// custom js
	wp_enqueue_script('gestures', get_theme_file_uri( '/js/mapgesture.js' ), Array('wp_leaflet_map'), '1.0', true);
}

Created a folder “js” in the theme folder and added a js file “mapgesture.js”
inside this file I have put

(function() {
  function main() {
    if (!window.WPLeafletMapPlugin) {
      console.log("no plugin found!");
      return;
    }

    // iterate any of these: <code>maps</code>, <code>markers</code>, <code>markergroups</code>, <code>lines</code>, <code>circles</code>, <code>geojsons</code>
    var maps = window.WPLeafletMapPlugin.maps;

    for (var i = 0, len = maps.length; i < len; i++) {
    var map = maps[i];
    map.gestureHandling.enable();
  });
    }
  }

  window.addEventListener("load", main);
})();

It would be great if you could point me to the right solution.
Thank you!!!

your javascript has too many parentheses. Should be:

(function() {
function main() {
if (!window.WPLeafletMapPlugin) {
console.log(“no plugin found!”);
return;
}

var maps = window.WPLeafletMapPlugin.maps;

for (var i = 0, len = maps.length; i < len; i++) {
var map = maps[i];
map.gestureHandling.enable();
}
}

window.addEventListener(“load”, main);
})();

Hello again!
Thank you very much for your fast answer.
I have re-uploaded your corrected JS file, but it sadly is not working on mobile. Scrolling is of the map is still active.

I have first tried to upload your example in the FAQ and this is working tough.

Maybe I have an error in the function php, calling the action?

add_action('leaflet_map_loaded', 'fs_leaflet_loaded');
function fs_leaflet_loaded() {
  wp_enqueue_script('gestures_leaflet', 'https://unpkg.com/[email protected]/dist/leaflet-gesture-handling.min.js', Array('wp_leaflet_map'), '1.0', true);
  wp_enqueue_style('gestures_leaflet_styles', 'https://unpkg.com/[email protected]/dist/leaflet-gesture-handling.min.css');
	// custom js
	wp_enqueue_script('gestures', get_theme_file_uri( '/js/mapgesture.js' ), Array('wp_leaflet_map'), '1.0', true);
}

Or do I have to add a special shortcode element to the Leaflet shortcode?

Best wishes!

• This reply was modified 4 years, 6 months ago by Anonymous User 12905264.

I have found the error ?? I used wp_enqueue_script('gestures', get_theme_file_uri( '/js/mapgesture.js' ), Array('wp_leaflet_map'), '1.0', true); But it must be: wp_enqueue_script('gestures_custom', get_theme_file_uri( '/js/mapgesture.js' ), Array('gestures_leaflet'), '1.0', true);

• This reply was modified 4 years, 6 months ago by Anonymous User 12905264.