friedbunny/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Leaflet TopoJSON Example</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="//cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
    <script src="http://d3js.org/topojson.v1.js"></script>

    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script src="some-javascripts.js"></script>
</body>
</html>

## some-javascripts.js
var county_layer = L.geoJson(null, {
        style: {
            color: '#666',
            weight: 1,
            opacity: 1,
            fillOpacity: 0.3
        }
    }),
    state_layer = L.geoJson(null, {
        style: {
            color: '#333',
            weight: 3,
            opacity: 1,
            fillOpacity: 0
        }
    }),
    map = L.map('map');

L.tileLayer('http://{s}.tiles.mapbox.com/v3/examples.map-4l7djmvo/{z}/{x}/{y}.png', {
    maxZoom: 17,
    attribution: 'Map data &copy; MapBox, OSM',
}).addTo(map);

map
    .addLayer(county_layer)
    .addLayer(state_layer)
    .setView([40, -100], 5);

$.getJSON('us_counties.json', function (data) {
    var county_geojson = topojson.feature(data, data.objects.counties),
        state_geojson = topojson.feature(data, data.objects.states);
    county_layer.addData(county_geojson);
    state_layer.addData(state_geojson);
});

## us_counties.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us_counties.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 TopoJSON Example</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="//cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
	<script src="http://d3js.org/topojson.v1.js"></script>

	<style>
	body {
	padding: 0;
	margin: 0;
	}
	html, body, #map {
	height: 100%;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>

	<script src="some-javascripts.js"></script>
	</body>
	</html>
	var county_layer = L.geoJson(null, {
	style: {
	color: '#666',
	weight: 1,
	opacity: 1,
	fillOpacity: 0.3
	}
	}),
	state_layer = L.geoJson(null, {
	style: {
	color: '#333',
	weight: 3,
	opacity: 1,
	fillOpacity: 0
	}
	}),
	map = L.map('map');

	L.tileLayer('http://{s}.tiles.mapbox.com/v3/examples.map-4l7djmvo/{z}/{x}/{y}.png', {
	maxZoom: 17,
	attribution: 'Map data © MapBox, OSM',
	}).addTo(map);

	map
	.addLayer(county_layer)
	.addLayer(state_layer)
	.setView([40, -100], 5);

	$.getJSON('us_counties.json', function (data) {
	var county_geojson = topojson.feature(data, data.objects.counties),
	state_geojson = topojson.feature(data, data.objects.states);
	county_layer.addData(county_geojson);
	state_layer.addData(state_geojson);
	});