ramiroaznar/index.html

## index.html
<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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<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>