title: Controlling zindex on leaflet icons layer
body: <p>In below I am trying to bring the green circle to the front by clicking the button. How can I achieve this?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" &gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
      &lt;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;button onclick="ccsdf()"&gt;Click me&lt;/button&gt;
      &lt;div id="map" style="width: 100%; height: 90vh"&gt;&lt;/div&gt;
  
  &lt;script&gt;
      var map;
      var layer1;
      var layer2;
  
      function ccsdf() {
          layer1.bringToFront();    
      }
  
      $(document).ready(function(){
          map = L.map('map').setView([0, 0], 14);
  
          L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
              attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
          }).addTo(map);
  
          layer1 = L.geoJson({ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [ 0, 0.0005 ]}}]}, {
              pointToLayer: function (feature, latlng) {
                  return L.marker(latlng, {icon: L.icon({ iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/5/52/Small_red_circle.png' }) });
              }
          }).addTo(map);
  
          layer2 = L.geoJson({ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [ 0, 0 ]}}]}, {
              pointToLayer: function (feature, latlng) {
                  return L.marker(latlng, {icon: L.icon({ iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/e/e7/Blue_1.png' }) });
              }
          }).addTo(map);
      });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p>Cheers</p>
  
  <p>Below text is because stack overflow wants me to write more :-)</p>
  
  <p>Lorem ipsum dolor sit amet, interdum est eu. A tellus condimentum hendrerit enim, ligula fusce vitae, leo et fusce mauris lorem suscipit scelerisque. Vel arcu, non vestibulum suspendisse non lectus magnis suspendisse, aliquam magna commodo. Nascetur eleifend at faucibus faucibus, nulla fringilla, mauris ultrices posuere in</p>