Last active
May 1, 2026 20:29
-
-
Save rowanwins/d5d03621fc0f2cdfa073 to your computer and use it in GitHub Desktop.
Add/remove leaflet.js layer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 © <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> |
Author
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
See tutorial here
http://rowanwinsemius.id.au/blog/add-and-remove-layers-with-leaflet-js/