Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar
Last active April 12, 2016 14:44
Show Gist options
  • Save ramiroaznar/340d54abbc47a011e855d17b9239039b to your computer and use it in GitHub Desktop.
Save ramiroaznar/340d54abbc47a011e855d17b9239039b to your computer and use it in GitHub Desktop.
Add Simple Geometries with Leaflet
<html>
<head>
<title>Add Simple Geometries with Leaflet</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<style type="text/css">
html, body, #map{
height: 100%;
padding: 0;
margin: 0;
}
#checkbox {
position: absolute;
right: 20;
top: 20;
background-color: white;
padding: 5px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="checkbox">
<input type="checkbox" name="geometry" value="myPoint"> Point
<input type="checkbox" name="geometry" value="myPolyline"> Line
<input type="checkbox" name="geometry" value="myTriangle"> Triangle
<input type="checkbox" name="geometry" value="myRectangle"> Rectangle
<input type="checkbox" name="geometry" value="myCircle"> Circle
</div>
<script type="text/javascript">
var options = {
center: [35.10418, -106.62987],
zoom: 10
}
var map = L.map('map', options);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: 'OSM'})
.addTo(map);
var myPoint = L.marker([35.10418, -106.62987],
{title: "myPoint", alt: "The Big I", draggable: true});
var myPolyline = L.polyline([[35.10418, -106.62987], [35.19738, -106.875]], {color: "red", weight: 8});
var myTriangle = L.polygon([[35.10418, -106.62987], [35.19738, -106.875], [35.07946, -106.80634]], {color: "blue", weight: 8, fillColor: "blue", fillOpacity: 1});
var myRectangle = L.rectangle([[35.19738, -106.875], [35.10418, -106.62987]], {color: "green", weight: 8, fillColor: "green"});
var myCircle = L.circle([35.10418, -106.62987], 8046.72, {color: "yellow", weight: 8, fillColor: "yellow"});
var buttons = document.getElementsByName("geometry");
function paintGeometry(event) {
var geometry = event.target.value;
if (geometry === "myPoint") {
myPoint.addTo(map);
}
else if (geometry === "myPolyline") {
myPolyline.addTo(map);
}
else if (geometry === "myTriangle") {
myTriangle.addTo(map);
}
else if (geometry === "myRectangle") {
myRectangle.addTo(map);
}
else {
myCircle.addTo(map);
}
console.log(geometry)
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("change", paintGeometry);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment