The leaflet module is higly popular for implementing various geo maps with data visualisations in Drupal.

Accessing maps with jQuery

When a map is created with your own code, accessing the map object is straightforward, and so is using one of its methods.

However, if the map is created by the leaflet module API its all done for you. So how to get access to the map object?

(function($) {
  var thismap = {};

  // Get leaflet map object for later usage
  $(document).bind('leaflet.map', function(e, map, lMap){
    myMap = lMap;
  });
  Drupal.behaviors.my_custom_behavior = {
    attach: function () {

      // pan to some coordinates
      $("button")).click( function (e) {
        myMap.panTo(new L.LatLng(40.737, -73.923));
      });
    },
  }
})(jQuery);

So you act on the "leaflet.map" trigger in leaflet.drupal.js, and store the map variable for access afterwards.

Add new comment