jueyang/index.html

## index.html
<!DOCTYPE HTML>
<html>
<head>
    <title>Leaflet with a layer of United States</title>
    <meta charset="utf-8">
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
<body>
	<h1>I am a leaflet map with <span>OpenStreetMap</span> tiles, using my own <span>L.geoJson()</span> method.</h1>
	<div id="map" class="map"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<script>
		// http://leafletjs.com/examples/choropleth.html

		// initialize the map on the "map" div with a given center and zoom
		var map = L.map('map').setView([37.8471973,-97.8166684], 4);

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

		map.addLayer(osm);

		// load the json with ajax - using d3.json here since we are talking d3 :)
		// but any ajax (such as jquery) can do this
		d3.json('us-states-pop-density.json',function(error, data){

			// set manual color breaks
			function getColor(d) {
				return d > 1000 ? '#800026' :
				d > 500  ? '#BD0026' :
				d > 200  ? '#E31A1C' :
				d > 100  ? '#FC4E2A' :
				d > 50   ? '#FD8D3C' :
				d > 20   ? '#FEB24C' :
				d > 10   ? '#FED976' :
							'#FFEDA0';
			}

			// see details http://leafletjs.com/reference.html#geojson
			var usa = L.geoJson(data,{
				style: function(feature){
					return {
						fillColor: getColor(feature.properties.density),
						weight: 2,
						opacity: 1,
						color: 'white',
						dashArray: '3',
						fillOpacity: 0.7
					};
				},
				onEachFeature:function(feature,layer){
					var popupContent = 'Population Density in ' +
						feature.properties.name + '<b>' +
						feature.properties.density + ':</b> ' +
						'people/mi<sup>2</sup>';

					layer.bindPopup(popupContent);
				}
			});

			map.addLayer(usa); // magic? inspect the map and see what's inside
		})

	</script>
</body>

## us-states-pop-density.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-states-pop-density.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Leaflet with a layer of United States</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	</head>
	<body>
	<h1>I am a leaflet map with <span>OpenStreetMap</span> tiles, using my own <span>L.geoJson()</span> method.</h1>
	<div id="map" class="map"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<script>
	// http://leafletjs.com/examples/choropleth.html

	// initialize the map on the "map" div with a given center and zoom
	var map = L.map('map').setView([37.8471973,-97.8166684], 4);

	// create osm tile layer
	var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
	});

	map.addLayer(osm);

	// load the json with ajax - using d3.json here since we are talking d3 :)
	// but any ajax (such as jquery) can do this
	d3.json('us-states-pop-density.json',function(error, data){

	// set manual color breaks
	function getColor(d) {
	return d > 1000 ? '#800026' :
	d > 500 ? '#BD0026' :
	d > 200 ? '#E31A1C' :
	d > 100 ? '#FC4E2A' :
	d > 50 ? '#FD8D3C' :
	d > 20 ? '#FEB24C' :
	d > 10 ? '#FED976' :
	'#FFEDA0';
	}

	// see details http://leafletjs.com/reference.html#geojson
	var usa = L.geoJson(data,{
	style: function(feature){
	return {
	fillColor: getColor(feature.properties.density),
	weight: 2,
	opacity: 1,
	color: 'white',
	dashArray: '3',
	fillOpacity: 0.7
	};
	},
	onEachFeature:function(feature,layer){
	var popupContent = 'Population Density in ' +
	feature.properties.name + '<b>' +
	feature.properties.density + ':</b> ' +
	'people/mi<sup>2</sup>';

	layer.bindPopup(popupContent);
	}
	});

	map.addLayer(usa); // magic? inspect the map and see what's inside
	})

	</script>
	</body>