Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@mollietaylor

mollietaylor/index.html

Last active August 29, 2015 13:55
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mollietaylor/8700934 to your computer and use it in GitHub Desktop.
Save mollietaylor/8700934 to your computer and use it in GitHub Desktop.
Download ZIP
Append Layer to overlayMaps in Leaflet
Raw
index.html
<!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 &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://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