TopOSM2/index.html.templ at master · Ahlzen/TopOSM2 · GitHub

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>

<!--
Test page for TopOSM2 layers.

Change tileurl below to match your setup.
-->

<head>
<title>MapViewer</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<!--[if lte IE 8]>
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
<![endif]-->
<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%; }
a { color: #adf; text-decoration: none; }
a:hover { text-decoration: underline; }
#infobar span { margin: 2px 6px; }
</style>
</head>

<body>
<div id="map"></div>
<div id="infobar">
   <span id="latlon"></span> &bull; <span id="zoom"></span>
   &bull;
   <span>Data from <a href="http://www.openstreetmap.org">OpenStreetMap</a>
   (&copy; OSM contributors - <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.5/leaflet.js"></script>
<script type="text/javascript">

var tileurl = 'http://localhost:8080/{name}/{z}/{x}/{y}.png';
var maxzoom = 18;

var blank = L.tileLayer(tileurl, {name: 'blank'});
var hillshade = L.tileLayer(tileurl, {name: 'hillshade'});
var hillshadeX = L.tileLayer(tileurl, {name: 'hillshade-x'});
var hillshadeXlight = L.tileLayer(tileurl, {name: 'hillshade-x-light'});
var hillshadeXimhofA = L.tileLayer(tileurl, {name: 'hillshade-x-imhofA'});
var hillshadeXimhofB = L.tileLayer(tileurl, {name: 'hillshade-x-imhofB'});
var landcover = L.tileLayer(tileurl, {name: 'landcover'});
var landcoverLightened = L.tileLayer(tileurl, {name: 'landcover-lightened'});
var landcoverRaw = L.tileLayer(tileurl, {name: 'landcover-raw'});
var contoursMask = L.tileLayer(tileurl, {name: 'contours-mask'});
var contours = L.tileLayer(tileurl, {name: 'contours'});
var ocean = L.tileLayer(tileurl, {name: 'ocean'});
var hydro = L.tileLayer(tileurl, {name: 'hydro'});
var features = L.tileLayer(tileurl, {name: 'features'});

var toposmCarto2 = L.tileLayer(tileurl, {name: 'toposmCarto2'});
var toposmCarto2B = L.tileLayer(tileurl, {name: 'toposmCarto2B'});

// Get map coordinates from URL, or use defaults:
var lat = getUrlVars()["lat"] || 37.83;
var lon = getUrlVars()["lon"] || -119.46;
var z = getUrlVars()["z"] || 13;

var map = L.map('map', {
  center: new L.LatLng(lat, lon),
  zoom: z,
  layers: [toposmCarto2B]
});

var baseLayers = {
  "Blank": blank,
  "Hillup: Hillshade": hillshade,
  "Hillup: Hillshade (exp)": hillshadeX,
  "Hillup: Hillshade (exp, light)": hillshadeXlight,
  "Hillup: Hillshade (exp, Imhof A)": hillshadeXimhofA,
  "Hillup: Hillshade (exp, Imhof B)": hillshadeXimhofB,
  "TopOSM Carto2": toposmCarto2,
  "TopOSM Carto2B": toposmCarto2B
};
var overlays = {
  "landcover": landcover,
  "landcover-lightened": landcoverLightened,
  "landcover-raw": landcoverRaw,
  "contours-mask": contoursMask,
  "contours": contours,
  "ocean": ocean,
  "hydro": hydro,
  "features": features
};
L.control.layers(baseLayers, overlays).addTo(map);

// Update page
updateZoomLevel();
updateLatLong(map.getCenter());

// Hook up events
map.on('zoomend', updateZoomLevel);
map.on('mousemove', function(e){updateLatLong(e.latlng)});

function updateZoomLevel() {
   z = map.getZoom();
   document.getElementById('zoom').innerHTML = 'z' + z;
}

function updateLatLong(ll) {
   document.getElementById('latlon').innerHTML =
      ll.lat.toFixed(3) + ', ' + ll.lng.toFixed(3);
}

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
    function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

</script>
</body>
</html>