ebrelsford · June 5, 2015 00:06
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">

    <!-- Load jQuery -->
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

    <!-- Load Leaflet -->
    <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>

    <script>
      /*
       * Keep the map variable out here so we can access it from
       * the console.
       */
      var map;

      $(document).ready(function () {
        /*
         * Create the map
         */
        map = L.map('map').setView([40.70, -73.96], 11);

        /*
         * Add base tiles from Mapbox. Replace "ebrelsford.ho06j5h0" with
         * the id from your Mapbox map to use those tiles instead.
         */
        L.tileLayer('https://{s}.tiles.mapbox.com/v3/ebrelsford.ho06j5h0/{z}/{x}/{y}.png', {
          maxZoom: 18,
          attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="http://mapbox.com">Mapbox</a>'
        }).addTo(map);
        
        /*
         * Add data loaded from GitHub.
         *
         * This is a GeoJSON file containing NYC's BIDs. We load it
         * here by asking jQuery to load the file ($.getJSON). Once this
         * succeeds, we add the data to an L.geoJson (a layer holding
         * GeoJSON data) and add that to the map.
         */
        $.getJSON('https://rawgit.com/ebrelsford/geojson-examples/master/bids.geojson', function (data) {
          L.geoJson(data, {
            
            /*
             * Add a popup to each "layer" (shape in the GeoJSON),
             * in this case the popup simply contains the NAME property.
             */
            onEachFeature: function (feature, layer) {
              layer.bindPopup(feature.properties.NAME);
            }
          }).addTo(map);
        })
      });
    </script>
  <style id="jsbin-css">
 html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
 }

 #map {
  height: 100%;
  width: 100%;
 }

 .leaflet-popup-content-wrapper,
 .leaflet-popup-tip {
  background: purple;
 }

 .leaflet-popup {
  color: white;
  font-size: 24px;
  font-weight: bold;
 }
 </style>
 </head>
  <body>
    <div id="map"></div>
  <script id="jsbin-javascript">
 // Leaflet with popups
 </script>


 <script id="jsbin-source-css" type="text/css">html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
 }

 #map {
  height: 100%;
  width: 100%;
 }

 .leaflet-popup-content-wrapper,
 .leaflet-popup-tip {
  background: purple;
 }

 .leaflet-popup {
  color: white;
  font-size: 24px;
  font-weight: bold;
 }</script>

 <script id="jsbin-source-javascript" type="text/javascript">// Leaflet with popups</script></body>
 </html>
diff --git a/jsbin.garesu.css b/jsbin.garesu.css
 html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
 }

 #map {
  height: 100%;
  width: 100%;
 }

 .leaflet-popup-content-wrapper,
 .leaflet-popup-tip {
  background: purple;
 }

 .leaflet-popup {
  color: white;
  font-size: 24px;
  font-weight: bold;
 }
diff --git a/jsbin.garesu.js b/jsbin.garesu.js
 // Leaflet with popups
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">

	<!-- Load jQuery -->
	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

	<!-- Load Leaflet -->
	<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>

	<script>
	/*
	* Keep the map variable out here so we can access it from
	* the console.
	*/
	var map;

	$(document).ready(function () {
	/*
	* Create the map
	*/
	map = L.map('map').setView([40.70, -73.96], 11);

	/*
	* Add base tiles from Mapbox. Replace "ebrelsford.ho06j5h0" with
	* the id from your Mapbox map to use those tiles instead.
	*/
	L.tileLayer('https://{s}.tiles.mapbox.com/v3/ebrelsford.ho06j5h0/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>'
	}).addTo(map);

	/*
	* Add data loaded from GitHub.
	*
	* This is a GeoJSON file containing NYC's BIDs. We load it
	* here by asking jQuery to load the file ($.getJSON). Once this
	* succeeds, we add the data to an L.geoJson (a layer holding
	* GeoJSON data) and add that to the map.
	*/
	$.getJSON('https://rawgit.com/ebrelsford/geojson-examples/master/bids.geojson', function (data) {
	L.geoJson(data, {

	/*
	* Add a popup to each "layer" (shape in the GeoJSON),
	* in this case the popup simply contains the NAME property.
	*/
	onEachFeature: function (feature, layer) {
	layer.bindPopup(feature.properties.NAME);
	}
	}).addTo(map);
	})
	});
	</script>
	<style id="jsbin-css">
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	width: 100%;
	}

	#map {
	height: 100%;
	width: 100%;
	}

	.leaflet-popup-content-wrapper,
	.leaflet-popup-tip {
	background: purple;
	}

	.leaflet-popup {
	color: white;
	font-size: 24px;
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script id="jsbin-javascript">
	// Leaflet with popups
	</script>


	<script id="jsbin-source-css" type="text/css">html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	width: 100%;
	}

	#map {
	height: 100%;
	width: 100%;
	}

	.leaflet-popup-content-wrapper,
	.leaflet-popup-tip {
	background: purple;
	}

	.leaflet-popup {
	color: white;
	font-size: 24px;
	font-weight: bold;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">// Leaflet with popups</script></body>
	</html>