|
<!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%; |
|
} |
|
canvas { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
.radius { |
|
fill-opacity: 0.1; |
|
stroke: #111; |
|
stroke-dasharray: 4 2; |
|
} |
|
|
|
.highlight { |
|
fill: #fe568e; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<div id="map"></div> |
|
<script> |
|
|
|
var RADIUS = 1.5; // in degrees |
|
var RADIUS_PX = 45; // in pixels (only used if uncommenting lines 131-137) |
|
|
|
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: [-96,39], |
|
zoom: 3.5, |
|
}) |
|
map.scrollZoom.disable() |
|
map.addControl(new mapboxgl.Navigation()); |
|
|
|
function project(d) { |
|
return map.project(getLL(d)); |
|
} |
|
function getLL(d) { |
|
return new mapboxgl.LngLat(+d.lng, +d.lat) |
|
} |
|
|
|
// We setup 2 canvas layers. one to draw points |
|
// one to draw extra overlays that change more often than the points |
|
var bbox = document.body.getBoundingClientRect(); |
|
var container = map.getCanvasContainer() |
|
var canvas = d3.select(container).append("canvas").node() |
|
canvas.width = bbox.width; |
|
canvas.height = bbox.height; |
|
var ctx = canvas.getContext('2d'); |
|
|
|
var canvasOverlay = d3.select(container).append("canvas").node() |
|
canvasOverlay.width = bbox.width; |
|
canvasOverlay.height = bbox.height; |
|
var ctxOverlay = canvasOverlay.getContext('2d'); |
|
|
|
var hits = [] |
|
|
|
d3.csv("dots.csv", function(err, data) { |
|
//console.log(data[0], getLL(data[0]), project(data[0])) |
|
|
|
function render() { |
|
ctx.clearRect(0, 0, bbox.width, bbox.height) |
|
ctx.fillStyle = "rgba(0, 130, 163, 0.5)"; |
|
ctx.strokeStyle = "rgba(120, 120, 120, 0.5)" |
|
data.forEach(function(d) { |
|
var p = project(d); |
|
ctx.beginPath(); |
|
ctx.arc(p.x, p.y, 6, 0, Math.PI*2) |
|
ctx.fill(); |
|
ctx.stroke(); |
|
}) |
|
} |
|
|
|
// re-render our visualization whenever the view changes |
|
map.on("viewreset", function() { |
|
ctxOverlay.clearRect(0, 0, bbox.width, bbox.height) |
|
render() |
|
}) |
|
map.on("move", function() { |
|
ctxOverlay.clearRect(0, 0, bbox.width, bbox.height) |
|
render() |
|
}) |
|
|
|
var quadtree = d3.geom.quadtree() |
|
.x(function(d) { return +d.lng }) |
|
.y(function(d) { return +d.lat }) |
|
(data) |
|
|
|
map.on("mousemove", function(evt) { |
|
var xy = project(evt.lngLat); |
|
|
|
var radiusLngLat = new mapboxgl.LngLat(evt.lngLat.lng + RADIUS, evt.lngLat.lat + RADIUS) |
|
var radiusPoint = project(radiusLngLat) |
|
var radiusX = Math.abs(radiusPoint.x - xy.x) |
|
var radiusY = Math.abs(radiusPoint.y - xy.y) |
|
|
|
ctxOverlay.clearRect(0, 0, bbox.width, bbox.height) |
|
|
|
ctxOverlay.fillStyle = 'rgba(20, 20, 20, 0.1)' |
|
ctxOverlay.strokeStyle = 'rgba(120, 120, 120, 0.8)' |
|
ctxOverlay.setLineDash([4, 2]) |
|
ctxOverlay.beginPath(); |
|
ctxOverlay.ellipse(xy.x, xy.y, radiusX, radiusY, 0, 0, 2*Math.PI) |
|
ctxOverlay.fill(); |
|
ctxOverlay.stroke(); |
|
|
|
|
|
//console.log(evt.lngLat, radiusLngLat, radius, xy) |
|
/* |
|
radiusCircle.attr({ |
|
cx: xy.x, |
|
cy: xy.y, |
|
rx: radiusX, |
|
ry: radiusY |
|
//rx: RADIUS_PX, |
|
//ry: RADIUS_PX |
|
}) |
|
*/ |
|
|
|
hits = []; |
|
quadtree.visit(nearest(evt.lngLat, RADIUS, hits)) |
|
|
|
/* |
|
// calculate the nearest points by using individual longitude and latitude |
|
// radii derived from the pixel radius set at the top. This gives |
|
// us a consistently sized circular selection |
|
var radiusLng = Math.abs(evt.lngLat.lng - map.unproject({ x: evt.point.x + RADIUS_PX, y: evt.point.y }).lng); |
|
var radiusLat = Math.abs(evt.lngLat.lat - map.unproject({ x: evt.point.x, y: evt.point.y + RADIUS_PX}).lat) |
|
quadtree.visit(nearest2(evt.lngLat, radiusLng, radiusLat, hits)) |
|
*/ |
|
|
|
//console.log("hits", hits) |
|
|
|
/* |
|
var filtered = svg.selectAll("circle.dot") |
|
.classed("highlight", false) |
|
.filter(function(d) { return hits.indexOf(d) >= 0 }) |
|
.classed("highlight", true) |
|
*/ |
|
|
|
ctxOverlay.fillStyle = "#fe568e"; |
|
hits.forEach(function(d) { |
|
var p = project(d); |
|
ctxOverlay.beginPath(); |
|
ctxOverlay.arc(p.x, p.y, 5, 0, Math.PI*2) |
|
ctxOverlay.fill(); |
|
}) |
|
|
|
}) |
|
|
|
// render our initial visualization |
|
render() |
|
}) |
|
|
|
function nearest(node, radius, hits) { |
|
if(!hits) hits = []; |
|
// we want to find everything within radius |
|
var r = radius, |
|
nx1 = node.lng - r, |
|
nx2 = node.lng + r, |
|
ny1 = node.lat - r, |
|
ny2 = node.lat + r; |
|
return function(quad, x1, y1, x2, y2) { |
|
if (quad.point && (quad.point !== node)) { |
|
var x = node.lng - quad.point.lng, |
|
y = node.lat - quad.point.lat, |
|
l = Math.sqrt(x * x + y * y), |
|
r = radius; |
|
if (l < r) { |
|
hits.push(quad.point) |
|
} else { |
|
} |
|
} |
|
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; |
|
} |
|
} |
|
|
|
// compute nearest within ellipse |
|
function nearest2(node, radiusLng, radiusLat, hits) { |
|
if(!hits) hits = []; |
|
// we want to find everything within radius |
|
var nx1 = node.lng - radiusLng |
|
var nx2 = node.lng + radiusLng |
|
var ny1 = node.lat - radiusLat |
|
var ny2 = node.lat + radiusLat |
|
return function(quad, x1, y1, x2, y2) { |
|
if (quad.point && (quad.point !== node)) { |
|
var x = node.lng - quad.point.lng, |
|
y = node.lat - quad.point.lat; |
|
if (x*x/(radiusLng*radiusLng) + y*y/(radiusLat*radiusLat) < 1) { |
|
hits.push(quad.point) |
|
} |
|
} |
|
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; |
|
} |
|
} |
|
|
|
</script> |
|
</body> |
