Quadtree Madness Round 2

So hit the button in the bottom left to start adding points, then if you hold down shift and draw a box it'll running a bounding box query on that area and limit the map to that. Hit the other button in the bottom left or right click to remove the query and show all of the markers.

<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=1024, user-scalable=no">
    <style>
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0;}
      #map{ height: 100% }
    
    </style>
  
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />

<title>Quadtree madness</title>
<div id="map"></div>
<script src="https://d3js.org/d3.v3.js"></script>

var m = L.map("map").setView([42.3164, -71.7],9);

//make the map

L.tileLayer("https://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg",{minZoom:4,maxZoom:12,attribution:'Map tiles by <a href="https://stamen.com">Stamen Design</a>, <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}).addTo(m);
  
//add a tileset

var pts = L.layerGroup().addTo(m);

var qt, bbox;

function redoBox(p){
    p=p||[];//make sure p is defined
    pts.clearLayers();//clear the map
    bbox=p;//update the bbox
    qt.bbox.apply(qt,p).forEach(function(v){//do the query
         pts.addLayer(L.marker(v).bindPopup(JSON.stringify(v)));//turn it into a marker wiht a popup
    });
}

m.on("contextmenu",function(){redoBox()});//so you can right click to add to map

//this is the box selection thingy
var BoxSelect = L.Map.BoxZoom.extend({
	
	_onMouseUp: function (e) {
		this._pane.removeChild(this._box);
		this._container.style.cursor = '';

L.DomUtil.enableTextSelection();

L.DomEvent
		    .off(document, 'mousemove', this._onMouseMove)
		    .off(document, 'mouseup', this._onMouseUp);

var map = this._map,
		    layerPoint = map.mouseEventToLayerPoint(e);

if (this._startLayerPoint.equals(layerPoint)) { return; }

var bounds = new L.LatLngBounds(
		        map.layerPointToLatLng(this._startLayerPoint),
		        map.layerPointToLatLng(layerPoint));

map.fire("boxselectend", {
			boxSelectBounds: [bounds.getSouthWest().lat,bounds.getSouthWest().lng,bounds.getNorthEast().lat,bounds.getNorthEast().lng]
		});
	}
});
m.boxZoom.disable();//turn off  the defult behavior
var boxSelect = new BoxSelect(m);//new box select
boxSelect.enable();//add it
m.on("boxselectend",function(e){redoBox(e.boxSelectBounds);});//put the behavior in.
</script>

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js to a secure url

https://d3js.org/d3.v3.js

https://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js