Prototyping a lasso tool for selecting geographic points with an arbitrary polygon.
Using this point-in-polygon code to calculate which points are selected within the polygon. All calculations are done in the projected (pixel) space.
Built with blockbuilder.org
forked from enjalot‘s block: dots on a map: setup
forked from enjalot‘s block: dots on a map: lasso
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.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 {
}
</style>
</head>
<body>
<div id="map"></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiJjaWhtdmxhNTIwb25zdHBsejk0NGdhODJhIn0.2-F2hS_oTZenAWc0BMf_uw'
//Setup our Leaflet map using Mapbox.js
var map = L.mapbox.map('map', 'mapbox.pencil', {
maxZoom: 18, minZoom: 14,
//zoomControl: false
})
.setView([51.5119112,-0.10000], 15);
// Disable drag and zoom handlers.
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
// Disable tap handler, if present.
if (map.tap) map.tap.disable();
// Setup our svg layer that we can manipulate with d3
var svg = d3.select(map.getPanes().overlayPane)
.append("svg");
var g = svg.append("g").attr("class", "leaflet-zoom-hide");
function project(ll) {
if(!ll) return;
// our data came from csv, make it Leaflet friendly
var a = [+ll.lat, +ll.lng];
// convert it to pixel coordinates
var point = map.latLngToLayerPoint(L.latLng(ll))
return point;
}
d3.csv("dots.csv", function(err, data) {
var dots = g.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);
var circleControl = new circleSelector(svg)
.projection(project)
.inverseProjection(function(a) {
return map.containerPointToLatLng(L.point(a));
})
.activate(true);
circleControl.on("update", function() {
g.selectAll("circle.dot").style({
fill: function(d) {
var thisDist = circleControl.distance(d);
var circleDist = circleControl.distance()
if(thisDist < circleDist) {
return "#ff8eec";
} else {
return "#0082a3"
}
}
})
})
function render() {
// We need to reposition our SVG and our containing group when the map
// repositions via zoom or pan
// https://github.com/zetter/voronoi-maps/blob/master/lib/voronoi_map.js
var bounds = map.getBounds();
var topLeft = map.latLngToLayerPoint(bounds.getNorthWest())
var bottomRight = map.latLngToLayerPoint(bounds.getSouthEast())
svg.style("width", map.getSize().x + "px")
.style("height", map.getSize().y + "px")
.style("left", topLeft.x + "px")
.style("top", topLeft.y + "px");
g.attr("transform", "translate(" + -topLeft.x + "," + -topLeft.y + ")");
// We reproject our data with the updated projection from leaflet
g.selectAll("circle.dot")
.attr({
cx: function(d) { return project(d).x},
cy: function(d) { return project(d).y},
})
// Render our selector, and update it whenever the map updates;
circleControl.update(g)
}
// re-render our visualization whenever the view changes
map.on("viewreset", function() {
render()
})
// render our initial visualization
render()
})
/*
===============================================================
Circle Selection component
===============================================================
*/
function circleSelector(svg) {
var that = this;
var circleCenter, circleOuter; //control points
var circleSelected = false; //have we completed the circle?
var dragging = false; //track whether we are dragging
var active = false; // user can turn on/off this behavior
var container; // the container we render our points in
// this will likely be overriden by leaflet projection
var project = d3.geo.mercator();
var unproject = d3.geo.mercator().invert;
//we expose events on our component
var dispatch = d3.dispatch("update");
// The user provides an svg element to listen on events
svg.on("mouseup.circle", function() {
if(!active) return;
if(dragging && circleSelected) return;
var p = d3.mouse(this);
var ll = unproject([p[0],p[1]])
if(circleCenter) {
// if we already have the circle's center and the circle
// is finished selecting, another click means destroy the circle
if(circleSelected) {
// start over
circleCenter = null;
circleOuter = null;
circleSelected = false;
g.selectAll("circle.lasso").remove();
g.selectAll("circle.control").remove();
g.selectAll("circle.dot").style("fill", "#0082a3")
g.selectAll("line.lasso").remove();
} else {
// Set the outer point
circleOuter = ll;
circleSelected = true;
}
} else {
// We set the center to the initial click
circleCenter = ll;
circleOuter = ll;
}
// we let the user know
update()
})
svg.on("mousemove.circle", function() {
if(circleSelected) return;
// we draw a guideline for where the next point would go.
var p = d3.mouse(this);
var ll = unproject([p[0],p[1]])
circleOuter = ll;
update();
})
var drag = d3.behavior.drag()
.on("drag", function(d,i) {
if(circleSelected) {
dragging = true;
var p = d3.mouse(svg.node());
var ll = unproject([p[0],p[1]])
if(i) {
circleOuter = ll;
} else {
var dlat = circleCenter.lat - ll.lat;
var dlng = circleCenter.lng - ll.lng;
circleCenter = ll;
circleOuter.lat -= dlat;
circleOuter.lng -= dlng;
}
update();
} else {
return false;
}
})
.on("dragend", function(d) {
// kind of a dirty hack...
setTimeout(function() {
dragging = false;
},100)
})
function update(g) {
if(g) container = g;
if(!circleCenter || !circleOuter) return;
var dist = distance(circleCenter, circleOuter)
var circleLasso = container.selectAll("circle.lasso").data([dist])
circleLasso.enter().append("circle").classed("lasso", true)
circleLasso
.attr({
cx: project(circleCenter).x,
cy: project(circleCenter).y,
r: dist
})
.style({
stroke: "#010",
fill: "#010",
"fill-opacity": 0.1
})
var line = container.selectAll("line.lasso").data([circleOuter])
line.enter().append("line").classed("lasso", true)
if(!circleSelected && circleCenter || dragging) {
line.attr({
x1: project(circleCenter).x,
y1: project(circleCenter).y,
x2: project(circleOuter).x,
y2: project(circleOuter).y
})
.style({
stroke: "#111",
"stroke-dasharray": "5 5"
})
} else {
line.remove();
}
var controls = container.selectAll("circle.control")
.data([circleCenter, circleOuter])
controls.enter().append("circle").classed("control", true)
controls.attr({
cx: function(d) { return project(d).x},
cy: function(d) { return project(d).y},
r: 8,
stroke: "#010",
fill: "#b7feb7",
"fill-opacity":0.9
})
.call(drag)
.on("click.control", function(d) {
if(circleSelected)
d3.event.stopPropagation();
})
dispatch.update();
}
this.update = update;
this.projection = function(val) {
if(!val) return project;
project = val;
return this;
}
this.inverseProjection = function(val) {
if(!val) return unproject;
unproject = val;
return this;
}
this.activate = function(val) {
active = val;
return this;
}
this.distance = function(ll) {
if(!ll) ll = circleOuter;
return distance(circleCenter, ll)
}
function distance(ll0, ll1) {
var p0 = project(ll0)
var p1 = project(ll1)
var dist = Math.sqrt((p1.x - p0.x)*(p1.x - p0.x) + (p1.y - p0.y)*(p1.y-p0.y))
return dist;
}
d3.rebind(this, dispatch, "on")
return this;
}
</script>
</body>