title: Emulate click on leaflet map item
body: <p>Having the Leaflet <a href="http://leafletjs.com/examples/choropleth.html" rel="noreferrer">Choropleth tutorial</a> i have to emulate a click event on a specific map area. For example:
  i have to have a function like <code>clickOnMapItem(itemId)</code> that will click on a map area which is defined by the following code</p>
  
  <pre><code>{"type":"Feature","id":"05","properties":{"name":"Arkansas","density":56.43},"geometry":{"type":"Polygon","coordinates":[...}
  </code></pre>
  
  <p>where <strong>"id":"05"</strong> is the id I need to click on</p>
  
  <p>The rest of my code is as in the example:</p>
  
  <p>state-data.js:</p>
  
  <pre><code>var statesData = {"type":"FeatureCollection","features":[
  {"type":"Feature","id":"01","properties":{"name":"Alabama","density":94.65},"geometry":{"type":"Polygon","coordinates":[[[-87.359 and so on
  </code></pre>
  
  <p>html:</p>
  
  <p>...header ommited</p>
  
  <pre><code>&lt;!-- language:lang-html --&gt;
      &lt;body&gt;
          &lt;div id="map"&gt;&lt;/div&gt;
  
          &lt;script src="dist/leaflet.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript" src="us-states.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
  
              var map = L.map('map').setView([37.8, -96], 4);
  
              var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
                  attribution: 'Map data &amp;copy; 2011 OpenStreetMap contributors, Imagery &amp;copy; 2011 CloudMade',
                  key: 'BC9A493B41014CAABB98F0471D759707',
                  styleId: 22677
              }).addTo(map);
  
  
              // control that shows state info on hover
              var info = L.control();
  
              info.onAdd = function (map) {
                  this._div = L.DomUtil.create('div', 'info');
                  this.update();
                  return this._div;
              };
  
              info.update = function (props) {
                  this._div.innerHTML = '&lt;h4&gt;US Population Density&lt;/h4&gt;' +  (props ?
                      '&lt;b&gt;' + props.name + '&lt;/b&gt;&lt;br /&gt;' + props.density + ' people / mi&lt;sup&gt;2&lt;/sup&gt;'
                      : 'Hover over a state');
              };
  
              info.addTo(map);
  
  
              // get color depending on population density value
              function getColor(d) {
                  return d &gt; 1000 ? '#800026' :
                         d &gt; 500  ? '#BD0026' :
                         d &gt; 200  ? '#E31A1C' :
                         d &gt; 100  ? '#FC4E2A' :
                         d &gt; 50   ? '#FD8D3C' :
                         d &gt; 20   ? '#FEB24C' :
                         d &gt; 10   ? '#FED976' :
                                    '#FFEDA0';
              }
  
              function style(feature) {
                  return {
                      weight: 2,
                      opacity: 1,
                      color: 'white',
                      dashArray: '3',
                      fillOpacity: 0.7,
                      fillColor: getColor(feature.properties.density)
                  };
              }
              //ON HOVER HANDLER
              function highlightFeature(e) {
                  var layer = e.target;
                  layer.setStyle({
                      weight: 5,
                      color: '#666',
                      dashArray: '',
                      fillOpacity: 0.7
                  });
  
                  if (!L.Browser.ie &amp;&amp; !L.Browser.opera) {
                      layer.bringToFront();
                  }
  
                  info.update(layer.feature.properties);
              }
  
              var geojson;
  
              function resetHighlight(e) {
                  geojson.resetStyle(e.target);
                  info.update();
              }
  
              function zoomToFeature(e) {
  
                  map.fitBounds(e.target.getBounds());
              }
              //setting click handlers
              function onEachFeature(feature, layer) {
  
                  layer.on({
                      mouseover: highlightFeature,
                      mouseout: resetHighlight,
                      click: zoomToFeature
                  });
              }
  
              geojson = L.geoJson(statesData, {
                  style: style,
                  onEachFeature: onEachFeature
              }).addTo(map);
  
              map.attributionControl.addAttribution('Population data &amp;copy; &lt;a href="http://census.gov/"&gt;US Census Bureau&lt;/a&gt;');
  
  
              var legend = L.control({position: 'bottomright'});
  
              legend.onAdd = function (map) {
  
                  var div = L.DomUtil.create('div', 'info legend'),
                      grades = [0, 10, 20, 50, 100, 200, 500, 1000],
                      labels = [],
                      from, to;
  
                  for (var i = 0; i &lt; grades.length; i++) {
                      from = grades[i];
                      to = grades[i + 1];
  
                      labels.push(
                          '&lt;i style="background:' + getColor(from + 1) + '"&gt;&lt;/i&gt; ' +
                          from + (to ? '&amp;ndash;' + to : '+'));
                  }
  
                  div.innerHTML = labels.join('&lt;br&gt;');
                  return div;
              };
  
              legend.addTo(map);
  
  
          &lt;/script&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>Thank you in advance!</p>