mpmckenna8/calAss1.json

## readme.md

      
    Raw
  

              readme.md
            
          
    I wanted to try using topojson with this fancy omnivore plugin for leaflet/mapbox.js and then I wanted to style up my data a little. This is the result. The polygons represent the California Congressional Assembly Districts and the one I get to vote for the representative of is colored orange. Hopefully I'll dive in more and see if I can make something a little more meaningful. For a little bit of how I made the data to put on the map see below:
Got some data from we draw the lines [http://wedrawthelines.ca.gov/maps-final-draft-assembly-districts.html] in shp file format. Used QGIS using grass (I think, maybe gdal, I don't usually know what I'm doing) to convert that jam to geojson.  That file was still fricking big at 10.7 mb so I might see how it does in the old topojson or simplify it a bit.
A command line topojson gotcha I've done at least a couple times is not add the properties to my new file w/ the -p guy as in:
topojson -o calAss1.json -p -- assemD2011.geojson

  
## calAss1.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              calAss1.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>TopoJSON Poly Style MB</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.3/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.1.2/leaflet-omnivore.min.js'></script>

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

<script>
var map = L.mapbox.map('map', 'examples.map-i86nkdio').setView([40, -120], 5);

// Omnivore will AJAX-request this file behind the scenes and parse it:
// note that there are considerations:
// - The file must either be on the same domain as the page that requests it,
//   or both the server it is requested from and the user's browser must
//   support CORS.

// Internally this function uses the TopoJSON library to decode the given file
// into GeoJSON.
var usLayer = omnivore.topojson('./calAss1.json')
    .on('ready',function(layer){
    //  console.log(layer);
      this.eachLayer(function(dist){
        console.log(dist.toGeoJSON().properties.ID)
        if(dist.toGeoJSON().properties.DISTRICT === "17"){
            console.log('true')
              dist.setStyle({color:'orange',
                fill:'orange'})
}
dist.bindPopup(dist.toGeoJSON().properties.DISTRICT);
      })

    })
    .addTo(map);
</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>TopoJSON Poly Style MB</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.3/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.1.2/leaflet-omnivore.min.js'></script>

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

	<script>
	var map = L.mapbox.map('map', 'examples.map-i86nkdio').setView([40, -120], 5);

	// Omnivore will AJAX-request this file behind the scenes and parse it:
	// note that there are considerations:
	// - The file must either be on the same domain as the page that requests it,
	// or both the server it is requested from and the user's browser must
	// support CORS.

	// Internally this function uses the TopoJSON library to decode the given file
	// into GeoJSON.
	var usLayer = omnivore.topojson('./calAss1.json')
	.on('ready',function(layer){
	// console.log(layer);
	this.eachLayer(function(dist){
	console.log(dist.toGeoJSON().properties.ID)
	if(dist.toGeoJSON().properties.DISTRICT === "17"){
	console.log('true')
	dist.setStyle({color:'orange',
	fill:'orange'})
	}
	dist.bindPopup(dist.toGeoJSON().properties.DISTRICT);
	})

	})
	.addTo(map);
	</script>
	</body>
	</html>