Leaflet z index (markers and polygons) - remove and add

by Leo

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<body>
<button onclick="bringPolygonToFront()">Bring Polygon to front</button>
<div id="map" ></div>
</body>

CSS

html, body, #map {
        margin: 0;
        width: 100%;
        height: 100%;
}

JavaScript

//http://stackoverflow.com/questions/12848812/layer-ordering-in-leaflet-js
// WA: http://gis.stackexchange.com/questions/100250/leaflet-geojson-in-front-of-markers-in-a-featuregroup
//     http://jsfiddle.net/53JHg/7/
//     http://bl.ocks.org/jfirebaugh/5380413
//   * https://github.com/Leaflet/Leaflet/issues/1742
//     https://github.com/Leaflet/Leaflet/commit/76f9c7ae7f1ea5f4956eeb487b1ea78d59bf395f
//   * https://github.com/Leaflet/Leaflet/pull/3266
//     https://github.com/Leaflet/Leaflet/issues/1742
//     https://github.com/Leaflet/Leaflet/issues/496
//     http://gis.stackexchange.com/questions/116205/multiple-simultaneous-tilelayers-in-leaflet
//     https://github.com/Leaflet/Leaflet/issues/4

var map = new L.Map('map', {
                center: new L.LatLng(45.5 + 0.003,-73.5 + 0.003),
                zoom: 16,
               // markerZoomAnimation:false
            });

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

var layer1 = L.featureGroup([]);
layer1.addTo(map);

var layer2 = L.featureGroup([]);
layer2.addTo(map);
//== begin polygons ======================================================================
var polygon1 = L.polygon([
			[45.5        ,-73.5],
			[45.5 + 0.005,-73.5],
            [45.5 + 0.005,-73.5 + 0.005],
            [45.5        ,-73.5 + 0.005]
		], {color: 'red', fillColor: 'red', fillOpacity: 1});
layer1.addLayer(polygon1);


var polygon2 = L.polygon([
			[45.5 + 0.002,-73.5 + 0.002],
			[45.5 + 0.007,-73.5 + 0.002],
            [45.5 + 0.007,-73.5 + 0.007],
            [45.5 + 0.002,-73.5 + 0.007]
		],  {color: 'blue', fillColor: 'blue', fillOpacity: 1});
layer1.addLayer(polygon2);
//== end polygons ========================================================================

//== begin markers ======================================================================
var icon1 = L.marker(new L.LatLng(45.5 + 0.003,-73.5 +...