title: How to interact with leaflet marker layer from outside the map?
body: <p>I have a leaflet map showing points for public art pieces, rendered from <a href="http://geojson.org/" rel="noreferrer">GeoJSON</a>. Next to the map, I created a list of the pieces from the same <a href="http://geojson.org/" rel="noreferrer">GeoJSON</a> data and want to be able to click on an item from the list outside of the map and have the related marker's popup come up on the map.</p>
  
  <p>How can I link the list of items to their respective markers through a click event?</p>
  
  <p>My map.js file looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>var map;
  var pointsLayer;
  
  $(document).ready(function () {
      map = new L.Map('mapContainer');
      var url = 'http://{s}.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.png';
      var copyright = 'Map data &amp;copy; 2011 OpenStreetMap contributors, Imagery &amp;copy; 2011 CloudMade';
      var tileLayer = new L.TileLayer(url, {
          attribution: copyright
      });
      var startPosition = new L.LatLng(41.883333, - 87.633333);
      map.on('load', function (e) {
          requestUpdatedPoints(e.target.getBounds())
      });
      map.setView(startPosition, 13).addLayer(tileLayer);
      map.on('moveend', function (e) {
          requestUpdatedPoints(e.target.getBounds())
      })
  });
  
  function requestUpdatedPoints(bounds) {
      $.ajax({
          type: 'GET',
          url: '/SeeAll',
          dataType: 'json',
          data: JSON.stringify(bounds),
          contentType: 'application/json; charset=utf-8',
          success: function (result) {
              parseNewPoints(result);
              addToList(result)
          },
          error: function (req, status, error) {
              alert('what happen? did you lose conn. to server ?')
          }
      })
  }
  
  function addToList(data) {
      for (var i = 0; i &lt; data.features.length; i++) {
          var art = data.features[i];
          $('div#infoContainer').append('&lt;a href="#" class="list-link" title="' + art.properties.descfin + '"&gt;&lt;div class="info-list-item"&gt;' + '&lt;div class="info-list-txt"&gt;' + '&lt;div class="title"&gt;' + art.properties.wrknm + '&lt;/div&gt;' + '&lt;br /&gt;' + art.properties.location + '&lt;/div&gt;' + '&lt;div class="info-list-img"&gt;' + art.properties.img_src + '&lt;/div&gt;' + '&lt;br /&gt;' + '&lt;/div&gt;&lt;/a&gt;')
      }
      $('a.list-link').click(function (e) {
          alert('now you see what happens when you click a list item!');
          e.preventDefault()
      })
  }
  
  function parseNewPoints(data) {
      if (pointsLayer != undefined) {
          map.removeLayer(pointsLayer)
      }
      pointsLayer = new L.GeoJSON();
      var geojsonMarkerOptions = {
          radius: 8,
          fillColor: "#FF6788",
          color: "YELLOW",
          weight: 1,
          opacity: 1,
          fillOpacity: 0.5
      };
      L.geoJson(data, {
          pointToLayer: function (feature, latlng) {
              return L.circleMarker(latlng, geojsonMarkerOptions)
          },
          onEachFeature: function (feature, pointsLayer) {
              pointsLayer.bindPopup(feature.properties.img_src + "&lt;br /&gt;" + feature.properties.wrknm + "&lt;br /&gt;" + feature.properties.artist + "&lt;br /&gt;" + feature.properties.location + '&lt;div class="description"&gt;' + feature.properties.descfin + '&lt;/div&gt;')
          }
      }).addTo(map)
  }
  </code></pre>