Skip to content

Instantly share code, notes, and snippets.

@rowanwins
Last active January 23, 2022 00:11
Show Gist options
  • Save rowanwins/d5d03621fc0f2cdfa073 to your computer and use it in GitHub Desktop.
Save rowanwins/d5d03621fc0f2cdfa073 to your computer and use it in GitHub Desktop.
Add/remove leaflet.js layer
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Demo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
<style>
html,body{height:100%;}
.overlay{
position:fixed;
top:25%;
left: 100px;
background-color: #073856;
padding: 20px;
border-radius: 5px;
}
.overlay label{
color: white;
margin:5px 0px;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
</style>
</head>
<body>
<div id="map" style="height:100%; width:100%"></div>
<div class ="overlay">
<label>
<input type="checkbox" value="polygon" checked> Polygon layer
</label><br>
<label>
<input type="checkbox" value="circle" checked> Circle layer
</label><br>
<label>
<input type="checkbox" value="marker" checked> Marker
</label>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-i875mjb7'
}).addTo(map);
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(map);
var circle = L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
var marker = L.marker([51.5, -0.09]).addTo(map);
$( "input" ).click(function( event ) {
layerClicked = window[event.target.value];
if (map.hasLayer(layerClicked)) {
map.removeLayer(layerClicked);
}
else{
map.addLayer(layerClicked);
} ;
});
</script>
</body>
</html>
@rowanwins
Copy link
Author

@carlosg1
Copy link

Esta roto el link
This link is broken

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment