|
<!DOCTYPE html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> |
|
<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") |
|
|
|
|
|
function project(d) { |
|
return map.project(getLL(d)); |
|
} |
|
function getLL(d) { |
|
return new mapboxgl.LngLat(+d.lon, +d.lat) |
|
} |
|
|
|
d3.csv("dots.csv", function(err, data) { |
|
//console.log(data[0], getLL(data[0]), project(data[0])) |
|
var dots = svg.selectAll("circle.dot") |
|
.data(data) |
|
|
|
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() { |
|
dots |
|
.attr({ |
|
cx: function(d) { |
|
var x = project(d).x; |
|
return x |
|
}, |
|
cy: function(d) { |
|
var y = project(d).y; |
|
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> |