Leaflet TopoJson

My procss for displaying TopoJson with Leaflet

My need was to cut 12 MB of GeoJson into smaller TopoJson.

Convert GeoJson to TopoJson

I had a GeoJson file I wanted to convert:

$ ls
education_CA.geo.json

I installed TopoJson (as detailed at the TopoJson page)

I ran the convert command:

$ topojson -p -o education_CA.topo.json -- education_CA.geo.json
bounds: Infinity Infinity -Infinity -Infinity (spherical)
pre-quantization: 111.195km (1.00°) 111.195km (1.00°)
topology: 0 arcs, 0 points
post-quantization: 111.195km (1.00°) 111.195km (1.00°)
prune: retained 0 / 0 arcs (NaN%)

Add TopoJson Support in Leaflet

Mike Bostock has some TopoJson code for dealing with this format:

<script src="http://d3js.org/topojson.v1.min.js"></script>  

and finally, drop this code from [1] in:

L.TopoJSON = L.GeoJSON.extend({  
  addData: function(jsonData) {    
    if (jsonData.type === "Topology") {
      for (key in jsonData.objects) {
        geojson = topojson.feature(jsonData, jsonData.objects[key]);
        L.GeoJSON.prototype.addData.call(this, geojson);
      }
    }    
    else {
      L.GeoJSON.prototype.addData.call(this, jsonData);
    }
  }  
});
// Copyright (c) 2013 Ryan Clark

Add TopoJson Layer

var topoLayer = new L.TopoJSON();

$.getJSON('data/education_CA.topo.json')
  .done(addTopoData);

function addTopoData(topoData){  
  topoLayer.addData(topoData);
  topoLayer.addTo(map);
}

References

A very nice tutorial: http://blog.webkid.io/maps-with-leaflet-and-topojson/