Javascript Events API for LeafletJS documentation

back to API overview

Javascript Events API for LeafletJS documentation

  1. Introduction
  2. Attach an event by map ID
  3. Attach an event to all maps
  4. Execute a callback against all maps
  5. Get a marker object on a specific map
  6. Get an array of all markers on a page
  7. Open popup on a layer map

Introduction

Maps Marker Pro includes a javascript API which can be utilized by developers to attach events handlers to markers and layers. The JS Events API has several main methods which can be used to access the maps by javascript code. Basically, you are free to apply any capability on the Map object existed in the Leaflet library reference.


MMP.ByID()

Access a map by its ID

Parameters

  • map ID integer

    The ID of the map (marker or layer)

Usage Example Return the map with the ID 105


var map = MMP.maps.byId(105);

Usage Example Set the map zoom to 5 for the map with ID 105


MMP.maps.byId(105).setZoom(5);

Usage Example Add a zoom control to the map with ID 105


var zoom_control = L.control.zoom({
        position: 'topright'
    });
MMP.maps.byId(105).addControl(zoom_control);

Usage Example Add a Rectangle to the map with ID 105


// define rectangle geographical bounds
var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];

// create an orange rectangle
L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(MMP.maps.byId(105));

// zoom the map to the rectangle bounds
MMP.maps.byId(105).fitBounds(bounds);

Usage Example Attach click event handler to the map with ID 105


MMP.maps.byId(105).on('click', function(e) {
    alert(e.latlng);
});

You can use any event type that included in the LeafletJS Events API.

Usage Example Adding a custom marker to the map with ID 105


L.marker([50.5, 30.5]).addTo(MMP.maps.byId(105));
back to top


`load` event special case

To attach an event handler for the load event, you have to use a MapsMarker filter.

Usage Example Attaching a load event handler to maps using the mmp_before_setview_{marker|layer}map_{ID} filter.

  • If you want to attach an event to a marker map with ID 2, the filter name would be mmp_before_setview_markermap_2

  • If you want to attach an event to a layer map with ID 125, the filter name would be mmp_before_setview_layermap_125

Examples

Attaching an event handler for the marker with ID 2


 add_filter('mmp_before_setview_markermap_2', 'attach_load_event_handler_to_mmp'); 
 function attach_load_event_handler_to_mmp($lmm_js){
    return 'MMP.maps.byId(2).on("load", function(e){ console.log("map has loaded!")} );';
 }

Attaching an event handler for the layer with ID 125


 add_filter('mmp_before_setview_layermap_125', 'attach_load_event_handler_to_mmp'); 
 function attach_load_event_handler_to_mmp($lmm_js){
    return 'MMP.maps.byId(125).on("load", function(e){ console.log("map has loaded!")} );';
 }
back to top


MMP.onALL()

Attach an event handler to all of the maps in the page.

Parameters

  • handler function

    The event handler to be executed.

Usage Example Attaching a click event handler to all of the maps.


MMP.maps.onAll('click',function(e) {
    alert(e.latlng);
});
back to top


MMP.toALL()

Execute a callback against all the maps in the page.

Parameters

  • The callback function

    This callback will be executed on every map.

Usage Example Add a zoom control to all of the maps.


MMP.maps.toAll(function(map){
    var zoom_control = L.control.zoom({
            position: 'topright'
        });
    map.addControl(zoom_control);
});

Usage Example Set the map zoom to 5 for all the maps.


MMP.maps.toAll(function(map){
    map.setZoom(5);
});

Usage Example Add a Rectangle to all of the maps.


MMP.maps.toAll(function(map){
    // define rectangle geographical bounds
    var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];
    // create an orange rectangle
    L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);
    // zoom the map to the rectangle bounds
    map.fitBounds(bounds);
});

Usage Example Adding a custom marker to all of the maps in the page.


MMP.maps.toAll(function(map){
    L.marker([50.5, 30.5]).addTo(map);
});
back to top


MMP.maps.getMarker()

Get a marker object on a specific map.

Parameters

  • map_id The layer(map) ID that contains the marker

  • marker_id The marker ID

Usage Example Open the popup of a marker with ID# 2 which is on the map with ID# 23.


MMP.maps.getMarker(23, 2).openPopup();

This function allows you to get full access to the marker object, for a reference visit the Marker object documentation on http://leafletjs.com/reference.html#marker

back to top


MMP.maps.getAllMarkers()

Get an array of all markers on a page (since v2.9)

Usage Example


var all_markers = MMP.maps.getAllMarkers();
jQuery.each(all_markers, function(i, marker){
    marker.openPopup(); 
});
back to top


listmarkers_openpopup_{mapname_js}(marker_id);

Open popup on a layer map (since v2.8)

Usage Example Open marker ID 587 on layer map ID 14


listmarkers_openpopup_layermap_14( 587 );
back to top