lipingyang-geoai/.gitignore

## .gitignore
*.archive
*.zedstate

## README.md

      
    Raw
  

              README.md
            
          
    U.S. National Parks

pulled from Data.gov as a zipped shapefile on 4/11/2015
simplified geometry in Quantum GIS (Vector menu -> Geometry tools -> Simplify Geometries)
simplified the zipped shapefile down from about 15mb to 373KB
then filtered to only show UNIT_TYPE = National Park
saved as geojson from QGIS
converted to TopoJSON with a final file size of only 34KB!
UPDATE: Apparently all of the above conversion and simplification could have been accomplished via the TopoJSON CLI

Useful ogr2ogr and TopoJSON commands
more info here and here

ogr2ogr -f GeoJSON -t_srs EPSG:4326 natparks4326.geojson .\NationalParks4.geojson
topojson -o natparks.json .\natparks4326.geojson -p UNIT_CODE,UNIT_NAME,UNIT_TYPE


## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>TopoJSON Data</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.7/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.7/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>

<div id='map'></div>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoicGRiYXJ0c2NoIiwiYSI6IktCQVRZSnMifQ.lkDvYfHPWix0mNfNqvdxEA';
var map = L.mapbox.map('map', 'examples.map-i86nkdio').setView([45, -110], 4);

var style = {
    "color": "#dd1c77",
    "weight": 5,
    "opacity": 0.8
};

function onEachFeature(feature, layer) {
    // does this feature have a property named popupContent?
    if (feature.properties && feature.properties.UNIT_NAME) {
        layer.bindPopup(feature.properties.UNIT_NAME);
    }
}

var layer = L.geoJson(null, {style: style, onEachFeature: onEachFeature});
omnivore.topojson('natparks.json', null, layer).addTo(map);


</script>
</body>
</html>

## natparks.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              natparks.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.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>TopoJSON Data</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.7/mapbox.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.7/mapbox.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>
	<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>

	<div id='map'></div>

	<script>
	L.mapbox.accessToken = 'pk.eyJ1IjoicGRiYXJ0c2NoIiwiYSI6IktCQVRZSnMifQ.lkDvYfHPWix0mNfNqvdxEA';
	var map = L.mapbox.map('map', 'examples.map-i86nkdio').setView([45, -110], 4);

	var style = {
	"color": "#dd1c77",
	"weight": 5,
	"opacity": 0.8
	};

	function onEachFeature(feature, layer) {
	// does this feature have a property named popupContent?
	if (feature.properties && feature.properties.UNIT_NAME) {
	layer.bindPopup(feature.properties.UNIT_NAME);
	}
	}

	var layer = L.geoJson(null, {style: style, onEachFeature: onEachFeature});
	omnivore.topojson('natparks.json', null, layer).addTo(map);


	</script>
	</body>
	</html>