-
Notifications
You must be signed in to change notification settings - Fork 0
/
hikemap.html
123 lines (108 loc) · 2.87 KB
/
hikemap.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<html>
<head>
<title>Hikemap</title>
<meta id="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 rel="icon" type="image/png" href="http://toposm.ahlzen.com/favicon64.png" />
<style type="text/css" rel="stylesheet">
body {
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
#map {
witdh: 100%;
height: 100%;
}
#infobar {
font-size: 8pt;
text-align: right;
color: #ffe;
background-color: #000;
opacity: 0.7;
z-index: 1000;
position: absolute;
bottom: 0px;
width: 100%;
}
#infobar span {
margin: 2px 6px;
}
a {
color: #adf;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
div.leaflet-control-scale.leaflet-control {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="infobar">
<span id="projected"></span> •
<span id="lonlat"></span> •
<span id="zoom"></span>
•
<span>Data © <a href="http://www.openstreetmap.org">OpenStreetMap</a>
(<a href="http://opendatacommons.org/licenses/odbl/">ODbL</a>) and <a href="http://www.usgs.gov">USGS</a></span>
</div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.3/proj4.js" type="text/javascript"></script>
<script type="text/javascript">
// Use .jpg or .png tiles depending on settings
var tileurlbase = 'tiles/composite/{z}/{x}/{y}.png';
// Map layers
var hikemap_composite = L.tileLayer(tileurlbase);
// Get map coordinates from URL, or use defaults:
//var lat = getUrlVars()["lat"] || 44.14;
//var lon = getUrlVars()["lon"] || -71.68;
var lat = getUrlVars()["lat"] || 39;
var lon = getUrlVars()["lon"] || -120;
var z = getUrlVars()["z"] || 8;
var map = L.map('map', {
center: new L.LatLng(lat, lon),
zoom: z,
layers: [hikemap_composite],
minZoom: 8,
maxZoom: 15
});
// Add scale bar
var s = L.control.scale({
position: 'bottomleft',
maxWidth: 200,
imperial: true,
metric: false
}).addTo(map);
// Update page
updateZoomLevel();
updateCoords(map.getCenter());
// Hook up events
map.on('zoomend', updateZoomLevel);
map.on('mousemove', function(e){updateCoords(e.latlng)});
function updateZoomLevel() {
z = map.getZoom();
document.getElementById('zoom').innerHTML = 'z' + z;
}
function updateCoords(ll) {
document.getElementById('lonlat').innerHTML =
ll.lng.toFixed(3) + '°, ' + ll.lat.toFixed(3) + '°';
var projected = proj4('WGS84','EPSG:3857').forward([ll.lng, ll.lat]);
document.getElementById('projected').innerHTML =
Math.round(projected[0]) + ", " +
Math.round(projected[1]);
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
</body>
</html>