Example I’m trying to find the nearest markers on a map of a specific location with Leaflet, want to show popup info on user created marker which is find nearest point, popup info should be include with nearest point properties from the geojson data layer. example maker.bindpopup(feature.properties.name).addTo(map)
JavaScript
x
127
127
1
(function() {
2
3
var geojosn1= 'url1';
4
var geojsonn2= 'url2';
5
6
var stations,
7
$body = $('body'),
8
$locate = $('#locate'),
9
$findNearest = $('#find-nearest'),
10
$status = $('#status');
11
12
$.getJSON(geojosn1, function(data) {
13
14
//$('#loader').fadeOut();
15
$body.addClass('loaded');
16
17
stations = L.geoJson(data, {
18
19
pointToLayer : function(feature, latlng) {
20
return L.circleMarker(latlng, {
21
stroke : false,
22
fillColor : 'orange',
23
fillOpacity : 1,
24
radius: 2
25
});
26
}
27
}).addTo(map);
28
29
30
$locate.fadeIn().on('click', function(e) {
31
32
$status.html('finding your location');
33
34
if (!navigator.geolocation){
35
alert("<p>Sorry, your browser does not support Geolocation</p>");
36
return;
37
}
38
39
$body.removeClass('loaded');
40
41
navigator.geolocation.getCurrentPosition(success, error);
42
43
$locate.fadeOut();
44
45
});
46
});
47
48
function success(position) {
49
50
$body.addClass('loaded');
51
52
var currentPos = [position.coords.latitude,position.coords.longitude];
53
54
map.setView(currentPos, zoomLevel);
55
56
var myLocation = L.marker(currentPos)
57
.addTo(map)
58
.bindTooltip("you are here")
59
.openTooltip();
60
61
62
$findNearest.fadeIn()
63
.on('click', function(e) {
64
65
$findNearest.fadeOut();
66
67
$status.html('finding your nearest locations')
68
69
queryFeatures(currentPos, 5);
70
71
myLocation.unbindTooltip();
72
73
74
});
75
76
};
77
78
79
function queryFeatures(currentPos, numResults) {
80
81
var distances = [];
82
83
stations.eachLayer(function(l) {
84
85
var distance = L.latLng(currentPos).distanceTo(l.getLatLng())/1000;
86
87
distances.push(distance);
88
89
});
90
91
distances.sort(function(a, b) {
92
return a - b;
93
});
94
95
var stationsLayer = L.featureGroup();
96
97
98
stations.eachLayer(function(l) {
99
100
var distance = L.latLng(currentPos).distanceTo(l.getLatLng())/1000;
101
102
if(distance < distances[numResults]) {
103
104
l.bindTooltip(distance.toLocaleString() + ' km from current location.');
105
106
L.polyline([currentPos, l.getLatLng()], {
107
color : 'orange',
108
weight : 2,
109
opacity: 1,
110
dashArray : "5, 10"
111
}).addTo(stationsLayer);
112
113
}
114
});
115
116
map.flyToBounds(stationsLayer.getBounds(), {duration : 3, easeLinearity: .1 });
117
118
map.on('zoomend', function() {
119
120
map.addLayer(stationsLayer);
121
})
122
123
}
124
125
})()
126
127
Advertisement
Answer
Try this:
JavaScript
1
37
37
1
function queryFeatures(currentPos, numResults) {
2
var stationsLayer = L.featureGroup();
3
4
var result = {
5
layer: null,
6
dis: 0,
7
marker: null
8
};
9
10
stations.eachLayer(function(l) {
11
var distance = L.latLng(currentPos).distanceTo(l.getLatLng())/1000;
12
if(result.layer == null || distance < result.dis) {
13
var line = L.polyline([currentPos, l.getLatLng()], {
14
color : 'orange',
15
weight : 2,
16
opacity: 1,
17
dashArray : "5, 10"
18
});
19
20
result = {
21
layer: line,
22
dis: distance,
23
marker: l
24
};
25
}
26
});
27
28
result.marker.bindTooltip(result.dis.toLocaleString() + ' km from current location.');
29
result.layer.addTo(stationsLayer);
30
31
map.flyToBounds(stationsLayer.getBounds(), {duration : 3, easeLinearity: .1 });
32
33
map.on('zoomend', function() {
34
map.addLayer(stationsLayer);
35
});
36
}
37