Here is some rough code I used to prototypef. The idea was to find addresses (points) within a distance of ___. Since my Address source had over a million points, I created a circle and used it's bounds to select the points, then used a function to select points inside the circle. Finally drawing them based on the quad they were in and creating a CSV of the points.
<html>
<head>
<meta charset=utf-8 />
<title>test App</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet.esri.geocoder/2.0.3/esri-leaflet-geocoder.css">
<script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet-src.js"></script>
<script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0/esri-leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/leaflet.esri.geocoder/2.0.3/esri-leaflet-geocoder.js"></script>
<style>
body { margin:0; padding:0; }
#map { position: absolute; top:40; bottom:0; right:0; left:0; max-height:640px; max-width:950px}
</style>
</head>
<body>
<div id="header">
<div id="Point" class="leaflet-bar">
<label>
Search Coordinates:
<input id="Ypt" class="leaflet-bar" placeholder="Latitude" />
<input id="Xpt" class="leaflet-bar" placeholder="Longitude" />
</label>
</label>
Search Radius:
<input id="Rdistance" class="leaflet-bar" placeholder="Radius (Yards)"size="6" />
<button id="goBtn" onClick="goBtn()" class="leaflet-bar">Go</button>
</div>
</div>
<div id="map"></div>
<script>
document.getElementById("Rdistance").value = 200;
var map = L.map('map').setView([43, -75], 7);
var theRadius;
//start Basemaps
var layer1 = L.esri.basemapLayer('Topographic');
var layer2 = L.esri.basemapLayer('Streets');
var layer3 = L.esri.basemapLayer('NationalGeographic');
// maps with labels
var layer4 = L.layerGroup([
L.esri.basemapLayer('Imagery'),
L.esri.basemapLayer('ImageryLabels')
]);
var layer6 = L.layerGroup([
L.esri.basemapLayer('Oceans'),
L.esri.basemapLayer('OceansLabels')
]);
var layer7 = L.layerGroup([
L.esri.basemapLayer('Gray'),
L.esri.basemapLayer('GrayLabels')
]);
var layer8 = L.layerGroup([
L.esri.basemapLayer('DarkGray'),
L.esri.basemapLayer('DarkGrayLabels')
]);
var layer9 = L.layerGroup([
L.esri.basemapLayer('Terrain'),
L.esri.basemapLayer('TerrainLabels')
]);
var osm = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// end basemaps
function goBtn() {
var theLatValue = document.getElementById("Ypt").value;
var theLonValue = document.getElementById("Xpt").value;
var theRadiusValue = document.getElementById("Rdistance").value;
theRadius = parseFloat(theRadiusValue) * 0.9144;
if (theRadius !== 0) {
console.log("Button Pressed, coords are: " + theLatValue + ", " + theLonValue);
console.log("Radius is: " + theRadius + " Meters");
// Call function to pass it an X,Y, and have it run.
Mapit(theLonValue, theLatValue, theRadius); // LAT: 42.76346 and LONG: -73.78285
} else {
alert("Radius is Zero Length, Please change value");
}
}
alert("To test coord entry use LAT: 42.76346 and LONG: -73.78285 Distance is Yards");
var thelatlng;
var clickCircle;
var bounds;
var geojsonLayer;
var PointX = 0;
var PointY = 0;
function Mapit(x, y, theRadius) {
console.log(x + ", " + y + " Values");
PointX = parseFloat(x);
PointY = parseFloat(y);
var latY = parseFloat(y);
var longX = parseFloat(x);
if (latY === 0 || longX === 0) {
alert("Invalid Coordinate value , Please check value");
}
var thelatlng = L.latLng(latY, longX);
theCircle = L.circle(thelatlng, theRadius, {
color: 'blue',
fillOpacity: 0,
opacity: 0.5
}).addTo(map);
//Zoom to Circle //I use the bounds of the circle to query against to avoid a 1 million point query.
map.fitBounds(theCircle.getBounds());
var bounds = theCircle.getBounds();
var query = L.esri.query({
url: 'http://gisservices.dhses.ny.gov/arcgis/rest/services/SAM_Address_Points/MapServer/1'
});
query.within(bounds);
query.run(function(error, featureCollection, response) {
console.log('Found ' + featureCollection.features.length + ' features');
if (featureCollection.features.length < 1) {
alert("No Addresses in the selected zone");
}
var myGeoJSON = JSON.stringify(featureCollection);
//Symbolize the Points
var geojsonMarkerOptions = {
radius: 8,
fillColor: "green",
color: "#green",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
geojsonLayer = L.geoJson(featureCollection, {
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
},
onEachFeature: function(feature, layer) {
}
}); //.addTo(map); //no need to add to map, these are the points from the bounds query
var test = [];
var theCenterPt = thelatlng; // bounds.getCenter(); // layer.getLatLng();
//var theRadius = theRadius;
var counter_points_in_circle = 0;
var marker = L.marker(thelatlng).bindPopup("CTR").addTo(map);
// Loop through each point in GeoJSON file //var allPoints = L.geoJson(data);
geojsonLayer.eachLayer(function(layer) {
// Lat, long of current point
layer_lat_long = layer.getLatLng();
// Distance from our circle marker To current point in meters
distance_from_centerPoint = layer_lat_long.distanceTo(theCenterPt);
// See if meters is within radius
if (distance_from_centerPoint <= theRadius) {
counter_points_in_circle += 1;
test.push(layer.feature);
}
});
console.log(test.length + " Points in Circle");
var myGeoJSON2 = JSON.stringify(test); //data from the buffer query
dataExport(test, theCenterPt);
//Symbolize the Points
var geojsonMarkerOptions2 = {
radius: 8,
fillColor: "red",
color: "red",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
geojsonLayer2 = L.geoJson(test, {
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions2);
},
onEachFeature: function(feature, layer) {}
});
});
// creating a CSV file from selection
function dataExport(response, theCenter) {
var homes = new L.LayerGroup();
var thebounds = new L.LatLngBounds();
var i;
var str = "Record, Longitude, Latitude, Street, City, Quad \r\n ";
for (i = 0; i < response.length; i++) {
var city = response.properties.CityTownName;
var theQuad = quad(response.geometry.coordinates);
var add = '';
if (response.properties.AP_Flag !== null) {
add = response.properties.AddressLabel.replace(/(\r\n|\n|\r)/gm, " ").replace(response.properties.AP_Flag, '');
} else {
add = response.properties.AddressLabel.replace(/(\r\n|\n|\r)/gm, " ");
}
response.properties.Record = (i + 1); //Adding in Record to GeoJSON
response.properties.Quad = theQuad; //Adding in Quad to GeoJSON
response.properties.FullAdd = add.trim();
var line = '';
line += (i + 1) + ", " +
response.geometry.coordinates + ", " +
add.trim() + ", " +
city + ", " +
theQuad;
str += line + '\r\n';
}
sites(response);
function sites(response5) {
function getColor(d) {
return d == 'NE' ? '#0000CD' :
d == 'SE' ? '#008000' :
d == 'SW' ? '#FFFF00' :
d == 'NW' ? '#FF0000' :
'#A9A9A9';
}
geojsonLayer3 = L.geoJson(response5, {
pointToLayer: function(feature, latlng) {
var markerStyle = {
fillColor: getColor(feature.properties.Quad),
color: "#696969",
fillOpacity: 0.8,
opacity: 0.9,
weight: 1,
radius: 8
};
return L.circleMarker(latlng, markerStyle);
},
onEachFeature: function(feature, layer) {
layer.bindPopup("<p>Record: " + feature.properties.Record + "</br>Address: " + feature.properties.FullAdd + "</br> Quad: " + feature.properties.Quad + "</p>").addTo(map),
layer.addTo(map);
}
});
map.addLayer(geojsonLayer3);
map.fitBounds(geojsonLayer3.getBounds()); //Zoom to selected set
}
var exportFilename = "MapData.csv";
var csvData = new Blob([str], {
type: 'text/csv;charset=utf-8;'
});
//IE11 & Edge
if (navigator.msSaveBlob) {
navigator.msSaveBlob(csvData, exportFilename);
} else {
//In FF link must be added to DOM to be clicked
var link = document.createElement('a');
link.href = window.URL.createObjectURL(csvData);
link.setAttribute('download', exportFilename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
// Takes the point coords and determines if they are NE,SE,SW, or NW of the center Pt
function quad(value) {
var theValue = "";
var theAddress = value.toString().split(',');
var addresslatC = theAddress[0];
var addresslongC = theAddress[1];
var theY = parseFloat(addresslongC);
var theX = parseFloat(addresslatC);
var theCentY = PointY;
var theCentX = PointX;
if (theX > theCentX) {
if (theY > theCentY) {
theValue = "NE";
} else {
theValue = "SE";
}
} else {
if (theY > theCentY) {
theValue = "NW";
} else {
theValue = "SW";
}
}
return theValue;
// End of Quad function
}
}
}
// create the geocoding control and add it to the map
var arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider();
var searchControl = L.esri.Geocoding.geosearch({
providers: [arcgisOnline]
}).addTo(map);
var results = L.layerGroup().addTo(map);
// listen for the results event and add every result to the map
searchControl.on("results", function(data) {
results.clearLayers();
for (var i = data.results.length - 1; i >= 0; i--) {
// results.addLayer(L.marker(data.results[0].latlng));
var home = data.results[0].latlng;
// alert(home);
var coord = home.toString().split(',');
var lat = coord[0].split('(');
var long1 = coord[1].split(')');
if (i < 1) {
var theRadiusValue = document.getElementById("Rdistance").value;
theRadius = parseFloat(theRadiusValue) * 0.9144;
Mapit(long1[0], lat[1], theRadius);
}
}
});
//layer control
var baseMaps = {
'Topographic': layer1,
'Streets': layer2,
'NationalGeographic': layer3,
'Imagery': layer4,
'Oceans': layer6,
'Gray': layer7,
'DarkGray': layer8,
'Terrain': layer9
};
var overlayMaps = { };
L.control.layers(baseMaps, overlayMaps, {
autoZIndex: "true"
}).addTo(map);
////////////// end layer control
</script>
</body>
</html>