|
<!DOCTYPE html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> |
|
<script src="//d3js.org/topojson.v1.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> |
|
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.js'></script> |
|
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.css' rel='stylesheet' /> |
|
|
|
<style> |
|
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } |
|
#map { |
|
position:absolute; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
svg { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<div id="map"></div> |
|
<script> |
|
|
|
mapboxgl.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiJjaWhtdmxhNTIwb25zdHBsejk0NGdhODJhIn0.2-F2hS_oTZenAWc0BMf_uw' |
|
|
|
//Setup mapbox-gl map |
|
var map = new mapboxgl.Map({ |
|
container: 'map', // container id |
|
style: 'mapbox://styles/enjalot/cihmvv7kg004v91kn22zjptsc', |
|
center: [-0.1,51.5119112], |
|
zoom: 13.5, |
|
|
|
}) |
|
map.scrollZoom.disable() |
|
map.addControl(new mapboxgl.Navigation()); |
|
|
|
// Setup our svg layer that we can manipulate with d3 |
|
var container = map.getCanvasContainer() |
|
var svg = d3.select(container).append("svg") |
|
|
|
// we calculate the scale given mapbox state (derived from viewport-mercator-project's code) |
|
// to define a d3 projection |
|
function getD3() { |
|
var bbox = document.body.getBoundingClientRect(); |
|
var center = map.getCenter(); |
|
var zoom = map.getZoom(); |
|
// 512 is hardcoded tile size, might need to be 256 or changed to suit your map config |
|
var scale = (512) * 0.5 / Math.PI * Math.pow(2, zoom); |
|
|
|
var d3projection = d3.geo.mercator() |
|
.center([center.lng, center.lat]) |
|
.translate([bbox.width/2, bbox.height/2]) |
|
.scale(scale); |
|
|
|
return d3projection; |
|
} |
|
// calculate the original d3 projection |
|
var d3Projection = getD3(); |
|
|
|
var path = d3.geo.path() |
|
|
|
var url = "http://enjalot.github.io/wwsd/data/UK/london_stations.topojson"; |
|
d3.json(url, function(err, data) { |
|
var points = topojson.feature(data, data.objects.london_stations) |
|
//console.log(data[0], getLL(data[0]), project(data[0])) |
|
var dots = svg.selectAll("circle.dot") |
|
.data(points.features) |
|
|
|
dots.enter().append("circle").classed("dot", true) |
|
.attr("r", 1) |
|
.style({ |
|
fill: "#0082a3", |
|
"fill-opacity": 0.6, |
|
stroke: "#004d60", |
|
"stroke-width": 1 |
|
}) |
|
.transition().duration(1000) |
|
.attr("r", 6) |
|
|
|
function render() { |
|
d3Projection = getD3(); |
|
path.projection(d3Projection) |
|
|
|
dots |
|
.attr({ |
|
cx: function(d) { |
|
var x = d3Projection(d.geometry.coordinates)[0]; |
|
return x |
|
}, |
|
cy: function(d) { |
|
var y = d3Projection(d.geometry.coordinates)[1]; |
|
return y |
|
}, |
|
}) |
|
} |
|
|
|
// re-render our visualization whenever the view changes |
|
map.on("viewreset", function() { |
|
render() |
|
}) |
|
map.on("move", function() { |
|
render() |
|
}) |
|
|
|
// render our initial visualization |
|
render() |
|
}) |
|
|
|
|
|
</script> |
|
</body> |