-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathleaflet-painting.html
64 lines (54 loc) · 1.43 KB
/
leaflet-painting.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
<!DOCTYPE html>
<html>
<head>
<title>Using Leaflet map tech to explore intricate paintings and large photos</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="lib/leaflet.css" alt="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="lib/leaflet.js" alt="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="lib/leaflet-hash.js"></script>
<style>
html, body, #map {
height: 100%;
width: 100%;
margin:0px;
}
#map {
background: black;
}
</style>
</head>
<body>
<div id="map"></div>
<script src='config.js'></script>
<script>
var imgMap = new L.tileLayer(tilePath + '/{z}/{x}/{y}' + extension, {
noWrap: true,
attribution: attributionHTML});
var map = L.map('map', {
'center': [0,0],
'zoom': 1,
'layers': imgMap,
'maxZoom': maxZoom
});
// URL hash so permalinks are possible. https://github.com/mlevans/leaflet-hash
var hash = new L.Hash(map);
// Show lat-long
var popup = L.popup();
function onMapClick(e) {
zoom = map.getZoom();
lat = e.latlng.lat.toFixed(2);
lng = e.latlng.lng.toFixed(2);
link = window.location.protocol + '//' + window.location.host + window.location.pathname +
'#' + zoom + '/' + lat + '/' + lng;
popup
.setLatLng(e.latlng)
.setContent('x: ' + lng +
', y: ' + lat +
'<br>Zoom: ' + zoom +
' | <a href="' + link + '" title="right-click and copy">copy link</a>')
.openOn(map);
}
map.on('click', onMapClick);
</script>
</body>
</html>