PatrickKing/esri-leaflet-renderers-race-condition.html

## esri-leaflet-renderers-race-condition.html
<!DOCTYPE html>
<html>
<head>
  <title></title>

  <meta charset="utf-8"> </meta>

  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />

  <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0-beta.7/esri-leaflet.js"></script>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/leaflet.esri.renderers/2.0.1/esri-leaflet-renderers.js"></script>


  <script type="text/javascript">
    "use strict";

    document.addEventListener("DOMContentLoaded", function(event) {

      var map, america;


      function addAmerica() {
        america = new L.esri.featureLayer({
          url: 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/2',
          useCors: false
        });

        window.setTimeout(function(){
          map.setZoom(2);
        }, 10)

        map.addLayer(america);
        window.setTimeout(removeAmerica, 5000);
      };


      function removeAmerica() {
        map.removeLayer(america);
        window.setTimeout(addAmerica, 5000);
      };


      map = L.map('map', {
        center: [51.505, -0.09],
        zoom: 2
      });

      var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
      var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
      var osm = new L.TileLayer(osmUrl, {minZoom: 1, maxZoom: 12, attribution: osmAttrib});
      map.addLayer(osm);
      addAmerica(map);
    });

  </script>

</head>

<body>
  <div id="map" style="width: 100%; height: 1000px;"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>

	<meta charset="utf-8"> </meta>

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />

	<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>

	<script type="text/javascript" src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0-beta.7/esri-leaflet.js"></script>

	<script type="text/javascript" src="https://cdn.jsdelivr.net/leaflet.esri.renderers/2.0.1/esri-leaflet-renderers.js"></script>



	<script type="text/javascript">
	"use strict";

	document.addEventListener("DOMContentLoaded", function(event) {

	var map, america;


	function addAmerica() {
	america = new L.esri.featureLayer({
	url: 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/2',
	useCors: false
	});

	window.setTimeout(function(){
	map.setZoom(2);
	}, 10)

	map.addLayer(america);
	window.setTimeout(removeAmerica, 5000);
	};


	function removeAmerica() {
	map.removeLayer(america);
	window.setTimeout(addAmerica, 5000);
	};


	map = L.map('map', {
	center: [51.505, -0.09],
	zoom: 2
	});

	var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
	var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
	var osm = new L.TileLayer(osmUrl, {minZoom: 1, maxZoom: 12, attribution: osmAttrib});
	map.addLayer(osm);
	addAmerica(map);
	});

	</script>

	</head>

	<body>
	<div id="map" style="width: 100%; height: 1000px;"></div>
	</body>
	</html>