title: How to trigger events on Leaflet map polygons?
body: <p>I'm trying to figure out how to manually trigger events for Leaflet polygons (loaded via GeoJSON).</p>
  
  <p>In a nutshell, I have a Leaflet map with numerous polygons. I also have a regular hyperlink outside of the map that when clicked, should trigger a mouseover event (or any event really) on a particular polygon.</p>
  
  <p><strong>How do I assign ID's to all of my polygons so that I can bind hyperlink(s) to a specific polygon's event? Or is that even the most logical way of doing this?</strong></p>
  
  <p>Ultimately, I'm trying to create a map with numerous polygons along with an HTML table of text labels that are associated to each polygon. When clicking on the HTML table text, I'd like to trigger events on the map polygons (and vice versa). I just don't know how to reference each polygon.</p>
  
  <p><strong>Here is my very simplified HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
  
      &lt;div id="map" style="height: 550px; width:940px"&gt;&lt;/div&gt;
  
      &lt;a href="#" id="testlink"&gt;Click to trigger a specific polygon mouseover event&lt;/a&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Here is my very simplified JS:</strong></p>
  
  <pre><code>$(document).ready(function () {
  
  // build the map and polygon layer
  function buildMap(data) {
  
      var map = new L.Map('map');
  
      var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/***yourkeyhere***/66267/256/{z}/{x}/{y}.png',
          cloudmadeAttribution = '',
          cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
  
      var mapLoc = new L.LatLng(43.675198,-79.383287);
      map.setView(mapLoc, 12).addLayer(cloudmade);
  
      var geojsonLayer = new L.GeoJSON(null, {});
  
      geojsonLayer.on("featureparse", function (e){
  
          // apply the polygon style
          e.layer.setStyle(polyStyle);
  
          (function(layer, properties) {
              layer.on("mouseover", function (e) {
                  // change the style to the hover version
                  layer.setStyle(polyHover);
                  });
              });
              layer.on("mouseout", function (e) {
                  // reverting the style back
                  layer.setStyle(polyStyle);
              });
              layer.on("click", function (e) {
                  // do something here like display a popup
                  console.log(e);
              });
          })(e.layer, e.properties);
  
      });
  
      map.addLayer(geojsonLayer);
  
      geojsonLayer.addGeoJSON(myPolygons);    
  
  }
  
  // bind the hyperlink to trigger event on specific polygon (by polygon ID?)
  $('#testlink').click(function(){
      // trigger a specific polygon mouseover event here
  });
  
  });
  </code></pre>