Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 29, 2015 15:26
Show Gist options
  • Save anonymous/316088cde6d33792c0c5 to your computer and use it in GitHub Desktop.
Save anonymous/316088cde6d33792c0c5 to your computer and use it in GitHub Desktop.
Download ZIP
marker intersection with leaflet
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet Draw</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js'></script>
<script src="https://raw.githubusercontent.com/mapbox/leaflet-pip/gh-pages/leaflet-pip.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
#map { width: 1000px; height: 500px }
</style>
</head>
<body>
<div id='map'></div>
<span id="out">
...empty...
</span>
<script>
var last_e,feat;
var map = L.map('map')
.setView([50.5, 30.5], 17);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var featureGroup = L.featureGroup().addTo(map);
var markers = [
L.marker([50.5, 30.5]),
L.marker([50.5, 30.503]),
L.marker([50.501, 30.503]),
]
for (var i=0;i<markers.length;i++) {
markers[i].addTo(map);
}
var drawControl = new L.Control.Draw({
edit: {
featureGroup: featureGroup
},
draw: {
marker: false,
circle: false,
polyline: false
}
}).addTo(map);
map.on('draw:drawstart', function(e) {
featureGroup.clearLayers();
});
map.on('draw:created', function(e) {
$("#out").empty();
featureGroup.addLayer(e.layer);
for (var i=0;i<markers.length;i++) {
markers[i].bindPopup("no intersection");
var res = leafletPip.pointInLayer(markers[i].getLatLng(), featureGroup)
if (res.length > 0) {
markers[i].bindPopup("intersection!");
$("#out").append("<p>intersection with marker "+i+"</p>");
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment