Skip to content

Instantly share code, notes, and snippets.

@osoken

osoken/index.html

Last active February 6, 2016 10:06
Download ZIP
leaflet.js and d3.js example
Raw
readme.md

leaflet.js と d3.js を使って地図に SVG を重ねるサンプル

Raw
index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<script src='//d3js.org/d3.v3.min.js'></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js'></script>
<body>
<div style='width:960px;height:500px'></div>
<script>
var map = new L.Map(d3.select('div').node()).setView([35.678707, 139.739143], 12);
var tile = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution : '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var svgLayer = d3.select(map.getPanes().overlayPane).append('svg').attr('class', 'leaflet-zoom-hide');
var plotLayer = svgLayer.append('g');
var updatePosition = function(d)
{
d.pos = map.latLngToLayerPoint(new L.LatLng(d.latitude, d.longitude));
d3.select(this).attr( {cx: d.pos.x, cy: d.pos.y } );
}
d3.json('/osoken/raw/92fefc35273ff9855947/yamanote_stations.json', function(err,data)
{
var points = data.nodes;
plotLayer.selectAll('circle').data(points).enter().append('circle')
.attr({r:10, fill:'steelblue', stroke: 'white', 'stroke-width': 3}).each(updatePosition);
map.on('move', function()
{
plotLayer.selectAll('circle').each(updatePosition);
});
reset();
});
var reset = function()
{
var bounds = map.getBounds();
var topLeft = map.latLngToLayerPoint(bounds.getNorthWest());
var bottomRight = map.latLngToLayerPoint(bounds.getSouthEast());
svgLayer.attr("width", bottomRight.x - topLeft.x)
.attr("height", bottomRight.y - topLeft.y)
.style("left", topLeft.x + "px")
.style("top", topLeft.y + "px");
plotLayer.attr('transform', 'translate('+ -topLeft.x + ',' + -topLeft.y + ')');
}
map.on("move", reset);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment