Create a gist now

Instantly share code, notes, and snippets.

@ZJONSSON /README.md
Last active Apr 28, 2016

What would you like to do?
D3 GeoJSON in Leaflet

UPDATE: The Vector Tiles are not being served at this time by Openstreetmap. Try later or a different provider (example) Services seem to have resumed

A simple test of extending the L.TileLayer to fetch geoJSON tiles from openstreetmap and render them with d3. This is probably not the most efficient way to do this, as we accept empty image tags (from the standard TileLayer) and use them as containers for the data/requests.

<!DOCTYPE html>
<meta charset="utf-8">
<title>D3 GeoJSON in Leaflet</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="TileLayer.d3_geoJSON.js"></script>
<style>
html, body, #map { height: 100%;width:100%;}
body { padding: 0; margin: 0; }
.road { stroke : black; fill : none; }
.water { stroke:black; fill:blue; }
</style>
<body>
<div id="map"></div>
<script>
map = L.map(map).setView([40.74, -73.99], 13);
map._initPathRoot();
new L.TileLayer.d3_geoJSON('http://{s}.tile.openstreetmap.us/vectiles-highroad/{z}/{x}/{y}.json',{class:"road"})
.addTo(map);
new L.TileLayer.d3_geoJSON('http://{s}.tile.openstreetmap.us/vectiles-water-areas/{z}/{x}/{y}.json',{class:"water"})
.addTo(map);
</script>
</body>
L.TileLayer.d3_geoJSON = L.TileLayer.extend({
onAdd : function(map) {
L.TileLayer.prototype.onAdd.call(this,map);
this.g = d3.select(map._container).select("svg").append("g");
this._path = d3.geo.path().projection(function(d) {
var point = map.latLngToLayerPoint(new L.LatLng(d[1],d[0]));
return [point.x,point.y];
});
this.on("tileunload",function(d) {
if (d.tile.xhr) d.tile.xhr.abort();
if (d.tile.nodes) d.tile.nodes.remove();
d.tile.nodes = null;
d.tile.xhr = null;
});
},
_loadTile : function(tile,tilePoint) {
var self = this;
this._adjustTilePoint(tilePoint);
if (!tile.nodes && !tile.xhr) {
tile.nodes = d3.select();
tile.xhr = d3.json(this.getTileUrl(tilePoint),function(d) {
tile.xhr = null;
tile.nodes = self.g.append("path")
.datum(d)
.attr("d",self._path)
.attr("class",self.options.class);
});
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment