-
Notifications
You must be signed in to change notification settings - Fork 0
/
Untitled-1.html
140 lines (110 loc) · 3.87 KB
/
Untitled-1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
http://www.gistechsolutions.com/leaflet/DEMO/baseball/
https://github.com/Leaflet/Leaflet.markercluster
<html>
<head><title>Example</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<style>
#map { width: 70%; height: 95%; float: left; }
</style>
Select on click within 150 miles.
<div id="map"></div>
<script>
var url = "BaseBallFinal.json";
//Defining variables for the selected points, circle, and click marker
var theMarker;
var theCircle;
var geojsonLayer;
var map = L.map('map').setView([42.736424, -73.762713], 5);
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);
var promise = $.getJSON(url);
promise.then(function(data) {
sites = L.geoJson(data, {
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
radius: 4, //expressed in pixels circle size
color: "red",
stroke: true,
weight: 7, //outline width increased width to look like a filled circle.
fillOpcaity: 1
});
}
});
map.fitBounds(sites.getBounds(), {padding: [30, 30]});
sites.addTo(map)
//layer control
var baseMaps = {
'Open StreetMap':osm
};
var overlayMaps = {
"Vendors":sites
};
L.control.layers(baseMaps, overlayMaps).addTo(map);
});
map.on('click',function(e){
lat = e.latlng.lat;
lon = e.latlng.lng;
console.log("You clicked the map at LAT: "+ lat+" and LONG: "+lon );
//Clear existing marker, circle, and selected points if selecting new points
if (theCircle != undefined) {
map.removeLayer(theCircle);
};
if (theMarker != undefined) {
map.removeLayer(theMarker);
};
if (geojsonLayer != undefined) {
map.removeLayer(geojsonLayer);
};
//Add a marker to show where you clicked.
theMarker = L.marker([lat,lon]).addTo(map); //Note: if lat/lon are strings then use parseFloat(lat), parseFloat(lon)
SelectPoints(lat,lon)
});
var selPts = [];
function SelectPoints(lat,lon){
xy = [lat,lon]; //center point of circle
dist = 150; // 150 miles,
var theRadius = dist * 1609.34 //1609.34 meters in a mile
selPts.length =0; //Reset the array if selecting new points
sites.eachLayer(function (layer) {
// Lat, long of current point as it loops through.
layer_lat_long = layer.getLatLng();
// Distance from our circle marker To current point in meters
distance_from_centerPoint = layer_lat_long.distanceTo(xy);
// See if meters is within radius, add the to array
if (distance_from_centerPoint <= theRadius) {
selPts.push(layer.feature);
}
});
// draw circle to see the selection area
theCircle = L.circle(xy, theRadius , { /// Number is in Meters
color: 'orange',
fillOpacity: 0,
opacity: 1
}).addTo(map);
//Symbolize the Selected Points
geojsonLayer = L.geoJson(selPts, {
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
radius: 4, //expressed in pixels circle size
color: "green",
stroke: true,
weight: 7, //outline width increased width to look like a filled circle.
fillOpcaity: 1
});
}
});
//Add selected points back into map as green circles.
map.addLayer(geojsonLayer);
//Take array of features and make a GeoJSON feature collection
var GeoJS = { type: "FeatureCollection", features: selPts };
//Show number of selected features.
console.log(GeoJS.features.length +" Selected features");
// show selected GEOJSON data in console
console.log(JSON.stringify(GeoJS));
} //end of SelectPoints function
</script>
</body>
</html>