<!doctype html>
<html>
<head>
<title>Leaflet.D3.js demo</title>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="leaflet.d3.js"></script>
<style type='text/css'>
#svg-streets path {
fill:none;
stroke: rgba(0,0,0,0.3);
}
#svg-streets path:hover {
stroke: #0c0;
cursor: pointer;
}
#svg-streets .highway-residential { stroke-width: 1px; }
#svg-streets .highway-primary { stroke-width: 4px; }
#svg-streets .highway-secondary { stroke-width: 3px; }
#svg-streets .highway-tertiary { stroke-width: 2px; }
#svg-buildings path {
fill: rgba(0,0,0,0.3);
}
#svg-buildings path:hover {
fill: #00c;
cursor: pointer;
}
#svg-places path {
fill: yellow;
}
</style>
<script type='text/javascript'>
window.onload = function() {
var map = L.map('map',{
maxBounds: [[46.6412301,23.4324747],[46.9201137,23.8047838]]
}).fitBounds([[46.7412301, 23.53816],[46.76813, 23.59253]]);
L.tileLayer('//a.tile.stamen.com/toner/{z}/{x}/{y}.png').addTo(map);
d3.json("streets.geojson", function(collection) {
var layer = new L.D3geoJSON(collection, {
id: 'svg-streets',
featureAttributes: {
'class': function(feature) {
return 'highway-' + feature.properties.highway;
}
},
}).addTo(map).on('click', function(e) {
console.log(e.data.properties.name);
});
});
d3.json("buildings.geojson", function(collection) {
var layer = new L.D3geoJSON(collection, {
id: 'svg-buildings',
}).addTo(map).on('click', function(e) {
console.log(e);
});
});
// d3.json("../buildings/temp-data/pins.json", function(collection) {
// var layer = new L.D3geoJSON(collection, {
// id: 'svg-places',
// }).addTo(map).on('click', function(e) {
// console.log(e);
// });
// });
};
</script>
</head>
<body>
<div id='map' style='position:absolute;top:0;left:0;right:0;bottom:0;'></div>
</body>
</html>{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"id": "way/108068969",
"name": "Casa de cultură a studenților"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
23.5857444,
46.7668625
],
[
23.5858297,
46.7667183
],
[
23.5860801,
46.7667877
],
[
23.5861888,
46.7666037
],
[
23.5861385,
46.7665898
],
[
23.586254,
46.7663944
],
[
23.5866943,
46.7665165
],
[
23.5865878,
46.7666968
],
[
23.5865677,
46.7666913
],
[
23.5864434,
46.7669016
],
[
23.5866888,
46.7669697
],
[
23.5866051,
46.7671113
],
[
23.5863843,
46.7670501
],
[
23.5863643,
46.767084
],
[
23.5859709,
46.7669749
],
[
23.5859961,
46.7669323
],
[
23.5859909,
46.7669309
],
[
23.5857444,
46.7668625
]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "way/154946207",
"name": "Magazin Central"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
23.5891978,
46.7726475
],
[
23.5890431,
46.7729628
],
[
23.5894817,
46.7730638
],
[
23.5894574,
46.7731133
],
[
23.5899298,
46.773222
],
[
23.5901243,
46.7728255
],
[
23.589971,
46.7727902
],
[
23.5899554,
46.7728219
],
[
23.5891978,
46.7726475
]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "way/155045033",
"name": "Piața agroalimentară"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
23.5930743,
46.7741082
],
[
23.5927291,
46.7740976
],
[
23.5927045,
46.7744749
],
[
23.5927739,
46.774477
],
[
23.59277,
46.7745366
],
[
23.5927873,
46.7745487
],
[
23.5928126,
46.7745562
],
[
23.5928462,
46.7745511
],
[
23.5928664,
46.7745395
],
[
23.5928703,
46.7744799
],
[
23.5930778,
46.7744862
],
[
23.5930675,
46.774625
],
[
23.5937,
46.774647
],
[
23.5936912,
46.774766
],
[
23.5941549,
46.7747822
],
[
23.5941666,
46.7746241
],
[
23.5942407,
46.7746267
],
[
23.5942678,
46.7742607
],
[
23.5941937,
46.7742581
],
[
23.5942,
46.7741737
],
[
23.5940865,
46.7741697
],
[
23.5941046,
46.7739437
],
[
23.5937106,
46.7739354
],
[
23.5933756,
46.7739335
],
[
23.5933724,
46.7740476
],
[
23.593315,
46.7740469
],
[
23.5930787,
46.7740397
],
[
23.5930743,
46.7741082
]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "way/174534305",
"name": "Complex Republica"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
23.5899087,
46.774945
],
[
23.5901311,
46.7747625
],
[
23.590276,
46.7745836
],
[
23.5904001,
46.7743622
],
[
23.590545,
46.7743816
],
[
23.59047,
46.774557
],
[
23.590889,
46.7748051
],
[
23.5907364,
46.7749858
],
[
23.5902268,
46.7748688
],
[
23.5900289,
46.7750141
],
[
23.5899087,
46.774945
]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "way/223357634",
"name": "Hotel Belvedere"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
23.5810134,
46.7742796
],
[
23.5812869,
46.774284
],
[
23.5812804,
46.7744746
],
[
23.5815442,
46.7744788
],
[
23.5815408,
46.7745801
],
[
23.5816524,
46.7745819
],
[
23.5816535,
46.7745504
],
[
23.581898,
46.7745543
],
[
23.5818999,
46.7744997
],
[
23.5819235,
46.7745001
],
[
23.5819262,
46.7744235
],
[
23.5821916,
46.7744278
],
[
23.5821946,
46.7743402
],
[
23.5823322,
46.7743424
],
[
23.5823346,
46.7742702
],
[
23.5822921,
46.7742695
],
[
23.5822965,
46.774141
],
[
23.5823688,
46.7741422
],
[
23.5823709,
46.7740798
],
[
23.5822151,
46.7740773
],
[
23.5822168,
46.7740269
],
[
23.5821975,
46.7740266
],
[
23.5822006,
46.7739361
],
[
23.5821025,
46.7739345
],
[
23.5820995,
46.7740211
],
[
23.5819032,
46.774018
],
[
23.5819046,
46.7739767
],
[
23.5816676,
46.7739729
],
[
23.5816654,
46.7740387
],
[
23.581022,
46.7740284
],
[
23.5810134,
46.7742796
]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "way/226258489",
"name": "Institutul de proiectare"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
23.58413,
46.7689122
],
[
23.5840015,
46.7690261
],
[
23.5843473,
46.7692337
],
[
23.5845219,
46.7690904
],
[
23.5844948,
46.7690738
],
[
23.5845273,
46.7690499
],
[
23.584409,
46.7689728
],
[
23.5843392,
46.7690316
],
[
23.58413,
46.7689122
]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "way/227338615",
"name": "Palatul telefoanelor"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
23.5874266,
46.7729887
],
[
23.5875929,
46.7727205
],
[
23.5877699,
46.7727683
],
[
23.5876106,
46.7730516
],
[
23.5874266,
46.7729887
]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "way/236828685",
"name": "Hotel Napoca"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
23.5757508,
46.7711479
],
[
23.5763356,
46.7712143
],
[
23.576202,
46.7717429
],
[
23.5756248,
46.771677
],
[
23.5757508,
46.7711479
]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "way/243261484",
"name": "Liceul George Coșbuc"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
23.5965111,
46.7673781
],
[
23.5965765,
46.7673908
],
[
23.5966217,
46.7673581
],
[
23.5969733,
46.7674319
],
[
23.5969931,
46.7673834
],
[
23.5975956,
46.7675203
],
[
23.5976511,
46.7674061
],
[
23.5970073,
46.7672571
],
[
23.5969676,
46.7673212
],
[
23.5965667,
46.7672489
],
[
23.5965111,
46.7673781
]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "way/243261485",
"name": "Biblioteca Academiei"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
23.5937006,
46.7677168
],
[
23.5942698,
46.7678315
],
[
23.5944004,
46.7675288
],
[
23.5938613,
46.7674256
],
[
23.5937006,
46.7677168
]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "way/244016056",
"name": "Hotel Victoria"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
23.5945118,
46.7721542
],
[
23.5949613,
46.7722769
],
[
23.5952413,
46.771775
],
[
23.5948929,
46.7716992
],
[
23.5947365,
46.7719423
],
[
23.5946682,
46.7719245
],
[
23.5945118,
46.7721542
]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "way/244018143",
"name": "Facultatea de construcții"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
23.5850952,
46.7707612
],
[
23.5851387,
46.7706069
],
[
23.5854847,
46.7706502
],
[
23.5854511,
46.7707694
],
[
23.5853759,
46.7707599
],
[
23.5853641,
46.7707964
],
[
23.5850952,
46.7707612
]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "way/244018145",
"name": "Blocul Păcii"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
23.5859281,
46.7675508
],
[
23.5859755,
46.76747
],
[
23.5863741,
46.7675663
],
[
23.5863151,
46.7676507
],
[
23.5859281,
46.7675508
]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "way/244018146",
"name": "Blocul OJT"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
23.585198,
46.7686644
],
[
23.5852687,
46.768599
],
[
23.5855703,
46.7687647
],
[
23.585496,
46.7688326
],
[
23.585198,
46.7686644
]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "way/244018149",
"name": "Casa de modă"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
23.5874287,
46.773484
],
[
23.5876145,
46.7735978
],
[
23.5875137,
46.7736844
],
[
23.5874485,
46.7736465
],
[
23.5872942,
46.7737738
],
[
23.5874228,
46.7738456
],
[
23.5873575,
46.7739065
],
[
23.5871005,
46.7737589
],
[
23.5874287,
46.773484
]
]
]
}
}
]
}L.D3geoJSON = L.Class.extend({
includes: L.Mixin.Events,
initialize: function(data, options) {
this.data = data;
this.options = options;
var that = this;
this._clickHandler = function(data, idx) {
that.fire('click', {
element: this,
data: data,
originalEvent: d3.event
});
};
},
onAdd: function(map) {
this._map = map;
this._first = true;
this._initZoomLvl = map._zoom;
this._svg = d3.select(this._map.getPanes().overlayPane).append('svg');
this._svg.attr('pointer-events', 'none');
this._group = this._svg.append('g');
this._group.attr('class', 'leaflet-zoom-hide ' + (this.options.className || ''));
if (this.options.id) {
this._svg.attr('id', this.options.id);
}
function latLngToPoint(latlng) {
return map.project(latlng)._subtract(map.getPixelOrigin());
};
var t = d3.geo.transform({
point: function(x, y) {
var point = latLngToPoint(new L.LatLng(y, x));
return this.stream.point(point.x, point.y);
}
});
this.path = d3.geo.path().projection(t);
this._feature = this._group.selectAll('path')
.data(this.data.features)
.enter()
.append('path')
.on('click', this._clickHandler);
this._map.on('viewreset', this.reset, this);
this._feature.attr('pointer-events', this.options.pointerEvents || 'visible');
if (this.options.featureAttributes) {
for (var i in this.options.featureAttributes) {
this._feature.attr(i, this.options.featureAttributes[i]);
}
}
this.reset();
},
onRemove: function(map) {
this._svg.remove();
this._map.off('viewreset', this.reset, this);
},
reset: function(e) {
if (!this._bounds) {
this._bounds = d3.geo.path().projection(null).bounds(this.data);
}
var topLeft = this._map.latLngToLayerPoint([this._bounds[0][1], this._bounds[0][0]]),
bottomRight = this._map.latLngToLayerPoint([this._bounds[1][1], this._bounds[1][0]]);
this._svg
.attr('width', bottomRight.x - topLeft.x)
.attr('height', topLeft.y - bottomRight.y)
.style('left', topLeft.x + 'px')
.style('top', bottomRight.y + 'px');
if (this._first) {
this._group.attr('transform', 'translate(' + -topLeft.x + ',' + -bottomRight.y + ')');
this._feature.attr('d', this.path);
this._initTopLeft = topLeft;
this._initBottomRight = bottomRight;
this._first = false;
} else {
var trans = d3.transform(this._group.attr('transform')),
oldScale = trans.scale;
trans.scale = [oldScale[0] * ((bottomRight.x - topLeft.x) / (this._oldBottomRight.x - this._oldTopLeft.x)),
oldScale[1] * ((topLeft.y - bottomRight.y) / (this._oldTopLeft.y - this._oldBottomRight.y))
];
trans.translate = [-this._initTopLeft.x, -this._initBottomRight.y];
this._group.attr('transform', 'scale('+trans.scale[0]+ ','+trans.scale[1]+')translate('+trans.translate[0] +',' + trans.translate[1] +')');
}
this._oldTopLeft = topLeft;
this._oldBottomRight = bottomRight;
this._svg.attr('class', 'zoom-' + this._map.getZoom());
},
addTo: function(map) {
map.addLayer(this);
return this;
}
});