-
Notifications
You must be signed in to change notification settings - Fork 0
/
maptest_fullscreen.html
62 lines (62 loc) · 2.27 KB
/
maptest_fullscreen.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image map test</title>
<link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="./node_modules/materialize-css/dist/css/materialize.min.css" />
<script type="text/javascript">
// these are required to make materialize transitions work
window.$ = window.jQuery = require('jquery');
window.Hammer = require('hammerjs');
</script>
<script src="./node_modules/leaflet/dist/leaflet.js"></script>
<script src="./js/materialize_custom.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="./css/map.css" />
</head>
<body>
<div id="map"></div>
<div id="slide-out" class="side-nav">
<ul>
<li>
<ul class="collapsible collapsible-accordion">
<li>
<div class="collapsible-header"><i class="material-icons">location_on</i>Markers</div>
<div class="collapsible-body"><ul class="collection" id="marker-list"></ul></div>
</li>
</ul>
</li>
</ul>
<div class="toggle-button-container">
<a class="toggle-button button-collapse" data-activates="slide-out">▶</a>
</div>
</div>
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a id="btnPlus" href="#" class="btn-floating btn-large red button-collapse">
<i class="material-icons">location_on</i></a>
</div>
<script type="text/javascript">
const url = require('url');
const ArtMap = require('./ArtMap.js');
function markerAdded(marker) {
let coords = artMap.latLngToXY(marker.getLatLng());
$('#marker-list').append(`<li class="collection-item">x = ${coords.x}, y = ${coords.y}</li>`);
}
let p = url.parse(window.location.href, true);
let m = JSON.parse(p.query["m"]);
let artMap = new ArtMap(L, m);
artMap.setFullscreen(window.innerWidth, window.innerHeight);
artMap.setBaseLayer(L, m);
artMap.addMarkerListener(markerAdded);
$(".button-collapse").sideNav({
open_complete: () => $(".toggle-button").html("◀"),
close_complete: () => $(".toggle-button").html("▶")
});
$("#btnPlus").on("click", () => {
$('#map').focus();
artMap.setMarkerMode(true);
});
</script>
</body>
</html>