TopoJSON Poly Style MB by mpmckenna8

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

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>