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. I also did versions with Icon Markers and Marker Clusters

<!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;

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

Updated missing url https://raw.github.com/mbostock/d3/5348d911938a0d1fdf43d7c86befbd908e431204/lib/colorbrewer/colorbrewer.js to https://cdn.jsdelivr.net/gh/mbostock/d3/5348d911938a0d1fdf43d7c86befbd908e431204/lib/colorbrewer/colorbrewer.js

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

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

https://raw.github.com/mbostock/d3/5348d911938a0d1fdf43d7c86befbd908e431204/lib/colorbrewer/colorbrewer.js