Leaflet Playground
HTML
<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css">
<form id="myLocationForm" style="display:none;">
<input type="text" name="lat">
<input type="text" name="lng">
<input type="submit" value="Submit">
</form>
<div id="map"></div>
CSS
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
JavaScript
(function($) {
$(document).ready(function() {
// map center point
var centerLat = 46.3065080,
centerLng = 7.2088839;
// geolocation boundaries
var northBound = 50,
southBound = 30,
eastBound = -60,
westBound = -120;
// base map layers
var basic = L.tileLayer('http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png'),
watercolor = L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png');
// switchable layers
var extra1 = L.tileLayer('http://35.204.100.19/tiles/2/{z}/{x}/{y}.png?key=56bef3b069013b4ac19799e94d79d6d16b9184e5'),
extra2 = L.tileLayer('http://api.tiles.mapbox.com/v3/djcase.glacial_lakes/{z}/{x}/{y}.png'),
extra3 = L.tileLayer('http://api.tiles.mapbox.com/v3/djcase.glacial_lakes/{z}/{x}/{y}.png');
// layer groupings for map
var baseMaps = {
"Watercolor": watercolor,
"Basic": basic
};
var overlayMaps = {
"Extra 1": extra1,
"Extra 2": extra2,
"Extra 3": extra3
};
// get user location and update marker
var myLocation = L.marker([centerLat, centerLng]).bindPopup('Default you are here.');
var pointOfInterest = {};
if (navigator.geolocation) {
var location_timeout = setTimeout("geolocFail()", 10000);
navigator.geolocation.getCurrentPosition(function(position) {
clearTimeout(location_timeout);
var lat = position.coords.latitude;
var lng = position.coords.longitude;
//perform check to see if user is outside of designated area
if (lat > northBound || lat < southBound || lng < westBound || lng > eastBound) {
// do nothing
}
else {
myLocation.setLatLng(new L.LatLng(lat, lng));
myLocation.unbindPopup();
myLocation.bindPopup("You are here: " + lat + ', ' + lng);
$('input[name="lat"]').val(lat);
$('input[name="lng"]').val(lng);
$('#myLocationForm').submit(function() {
console.log('%c Handler for .submit() called.', 'background: #bada55;...