index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>D3 GeoJSON in Leaflet</title>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
<style>
html, body, #map { height: 100%;width:100%; background:#020B26}
body { padding: 0; margin: 0; }
.road { stroke : #3C80A9; fill : none ; }
.water { stroke:none; fill:#031536;}
</style>
<body>
<div id="map"></div>
<script src="//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js"></script>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
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);
});
}
}
});
map = L.map(map).setView([45.5086699, -73.553992], 13);
map._initPathRoot();
new L.TileLayer.d3_geoJSON('//{s}.tile.openstreetmap.us/vectiles-highroad/{z}/{x}/{y}.json',{class:"road"})
.addTo(map);
new L.TileLayer.d3_geoJSON('//{s}.tile.openstreetmap.us/vectiles-water-areas/{z}/{x}/{y}.json',{class:"water"})
.addTo(map);
var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
var topLayer = new L.tileLayer('//{s}.tile.stamen.com/toner-labels/{z}/{x}/{y}.png', {
maxZoom: 17
}).addTo(map);
topPane.appendChild(topLayer.getContainer());
topLayer.setZIndex(7);
</script>
</body>