Last active
August 29, 2015 13:55
-
-
Save mollietaylor/8700934 to your computer and use it in GitHub Desktop.
Append Layer to overlayMaps in Leaflet
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> | |
| <meta charset="utf-8"> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /> | |
| <!--[if lte IE 8]> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" /> | |
| <![endif]--> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> | |
| <style type="text/css"> | |
| #map { | |
| height: 500px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1></h1> | |
| <div id="map"></div> | |
| <script type="text/javascript"> | |
| var marker = L.marker([51.5, -0.09]); | |
| var circle = L.circle([51.508, -0.11], 500, { | |
| color: 'red', | |
| fillColor: '#f03', | |
| fillOpacity: 0.5 | |
| }); | |
| var polygon = L.polygon([ | |
| [51.509, -0.08], | |
| [51.503, -0.06], | |
| [51.51, -0.047] | |
| ]); | |
| // map: | |
| var map = L.map('map', { | |
| center: [51.505, -0.09], | |
| zoom: 13, | |
| layers: [marker, circle, polygon] | |
| }); | |
| var overlayMaps = { | |
| "Marker": marker, | |
| "Circle": circle, | |
| "Polygon": polygon | |
| }; | |
| L.tileLayer('http://tile.cloudmade.com/[API-KEY]/29889/256/{z}/{x}/{y}.png', { | |
| 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://cloudmade.com">CloudMade</a>', | |
| maxZoom: 18 | |
| }).addTo(map); | |
| // geolocation: | |
| map.locate({setView: false, maxZoom: 12}); | |
| function onLocationFound(e) { | |
| yourLocation = L.marker(e.latlng); | |
| overlayMaps["You"] = yourLocation; | |
| L.control.layers(null, overlayMaps).addTo(map); | |
| } | |
| map.on('locationfound', onLocationFound); | |
| function onLocationError(e) { | |
| alert(e.message); | |
| L.control.layers(null, overlayMaps).addTo(map); | |
| } | |
| map.on('locationerror', onLocationError); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment