Leaflet TopoJson
From charlesreid1
My procss for displaying TopoJson with Leaflet
My need was to cut 12 MB of GeoJson into smaller TopoJson.
Contents
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/