Skip to content

Instantly share code, notes, and snippets.

@rowanwins
Created March 22, 2016 22:09
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save rowanwins/97188a36a10ea3143b13 to your computer and use it in GitHub Desktop.
Layer toggle with layer group
<!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="layerGroup" checked> Layer Group
</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>
var map = L.map('map').setView([51.505, -0.09], 13);
var tilelayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
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>',
maxZoom: 18
}).addTo(map);
var marker = L.marker([51.5, -0.09]);
var polygon = L.polygon([
[51.509, -0.1],
[51.503, -0.06],
[51.51, -0.047]
]);
var layerGroup = L.layerGroup([]).addTo(map)
layerGroup.addLayer(polygon);
layerGroup.addLayer(marker);
var circle = L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment