Skip to content

Instantly share code, notes, and snippets.

@tlimpanont

tlimpanont/index.html

Created March 14, 2016 19:15
Show Gist options
  • Save tlimpanont/2a629d5d01d72916a2ee to your computer and use it in GitHub Desktop.
Save tlimpanont/2a629d5d01d72916a2ee to your computer and use it in GitHub Desktop.
Download ZIP
This example answers the question: "Which markers (points), are positioned in the drawn polygons?"
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="which points are in the polygons?">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link href="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.css" rel="stylesheet" type="text/css" />
<script src="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
<meta charset="utf-8">
<title>Leaflet JS Bin</title>
<style>
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id='map'></div>
</body>
</html>
Raw
script.js
function pointInPolygon(point, vs) {
// ray-casting algorithm based on
// http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
var x = point[0],
y = point[1];
var inside = false;
for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
var xi = vs[i][0],
yi = vs[i][1];
var xj = vs[j][0],
yj = vs[j][1];
var intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
if (intersect) inside = !inside;
}
return inside;
};
var myCenter = new L.LatLng(50.5, 30.51);
var map = new L.Map('map', {
center: myCenter,
zoom: 10
});
var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
var markersLayer = new L.FeatureGroup([
new L.Marker(myCenter),
new L.Marker(new L.LatLng(50.6, 30.52))
]).addTo(map);
markersLayer.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>");
// Initialise the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
draw: {
polyline: false,
polygon: true,
circle: false,
rectangle: true,
marker: false
},
edit: {
featureGroup: drawnItems,
edit: false,
remove: false
},
});
map.addControl(drawControl);
// create an orange rectangle
L.rectangle(markersLayer.getBounds(), {
color: "#ff7800",
weight: 1
}).addTo(map);
map.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
drawnItems.addLayer(layer);
var polygons = [];
drawnItems.eachLayer(function(LLayer) {
var polygon = [];
LLayer.getLatLngs().forEach(function(latLng) {
latLng.forEach(function(_latLng) {
polygon.push([_latLng.lat, _latLng.lng]);
});
});
polygons.push(polygon);
});
polygons.forEach(function(vector) {
markersLayer.eachLayer(function(LLayer) {
var point = [LLayer.getLatLng().lat, LLayer.getLatLng().lng];
console.log(vector);
if (pointInPolygon(point, vector)) {
LLayer.setIcon(new L.Icon({
iconUrl: 'https://cdn4.iconfinder.com/data/icons/Free-Medical-Icons-Set/32x32/Select.png'
}));
}
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment