Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8

mpmckenna8/calAss1.json

Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mpmckenna8/60910c22b47777967704 to your computer and use it in GitHub Desktop.
Save mpmckenna8/60910c22b47777967704 to your computer and use it in GitHub Desktop.
Download ZIP
TopoJSON Poly Style MB
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

Display the source blob
Display the rendered blob
Raw
calAss1.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment