eeeschwartz/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
     <!-- Load Leaflet from CDN-->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

    <!-- Load Esri Leaflet from CDN -->
    <script src="http://cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script>

    <style>
      html, body,  #map {
        width : 100%;
        height : 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map = L.map('map').setView([38.029, -84.4947], 13);

      L.esri.basemapLayer("Topographic").addTo(map);

      var district = L.esri.featureLayer({
        where: 'DISTRICT=1',
        url: "http://maps.lexingtonky.gov/lfucggis/rest/services/political/MapServer/1",
        style: function () {
          return { color: "#70ca49", weight: 2 };
        }
      }).addTo(map);

      var popupTemplate = "hello";

      district.bindPopup(function(feature){
        return L.Util.template(popupTemplate, feature.properties)
      });

      // listen for when all features have been retrieved from the server
      district.on("load", function(evt) {
        // create a new empty Leaflet bounds object
        var bounds = L.latLngBounds([]);
        // loop through the features returned by the server
        district.eachFeature(function(layer) {
          // get the bounds of an individual feature
          var layerBounds = layer.getBounds();
          // extend the bounds of the collection to fit the bounds of the new feature
          bounds.extend(layerBounds);
        });

        // once we've looped through all the features, zoom the map to the extent of the collection
        map.fitBounds(bounds);
        // unwire the event listener so that it only fires once when the page is loaded
        district.off('load');
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<!-- Load Leaflet from CDN-->
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

	<!-- Load Esri Leaflet from CDN -->
	<script src="http://cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script>

	<style>
	html, body, #map {
	width : 100%;
	height : 100%;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script>
	var map = L.map('map').setView([38.029, -84.4947], 13);

	L.esri.basemapLayer("Topographic").addTo(map);

	var district = L.esri.featureLayer({
	where: 'DISTRICT=1',
	url: "http://maps.lexingtonky.gov/lfucggis/rest/services/political/MapServer/1",
	style: function () {
	return { color: "#70ca49", weight: 2 };
	}
	}).addTo(map);

	var popupTemplate = "hello";

	district.bindPopup(function(feature){
	return L.Util.template(popupTemplate, feature.properties)
	});

	// listen for when all features have been retrieved from the server
	district.on("load", function(evt) {
	// create a new empty Leaflet bounds object
	var bounds = L.latLngBounds([]);
	// loop through the features returned by the server
	district.eachFeature(function(layer) {
	// get the bounds of an individual feature
	var layerBounds = layer.getBounds();
	// extend the bounds of the collection to fit the bounds of the new feature
	bounds.extend(layerBounds);
	});

	// once we've looped through all the features, zoom the map to the extent of the collection
	map.fitBounds(bounds);
	// unwire the event listener so that it only fires once when the page is loaded
	district.off('load');
	});
	</script>
	</body>
	</html>