Created
February 9, 2014 02:58
-
-
Save wboykinm/8893528 to your computer and use it in GitHub Desktop.
leaflet.d3.js demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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 | |
] | |
] | |
] | |
} | |
} | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<title>Leaflet.D3.js demo</title> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /> | |
<!--[if lte IE 8]> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" /> | |
<![endif]--> | |
<script src="http://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('http://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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment