-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
95 lines (77 loc) · 3.76 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>DMZ Key map</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<!-- <div>
<h3>Al-Bagra Barrack key</h6>
<p><b>Description:</b> Used to unlock barracks of the al-bagra group in the fortess</p>
<img class="popupImg" src="./Location for the Al-Bagra Barrack KEY! Warzone 2! MW2 DMZ! 0-1 screenshot.png">
</div> -->
</div>
<div id="map"></div>
<div>
Click on the map to get precise position.
</div>
<script>
let mapSettings = {
crs: L.CRS.Simple,
minZoom: -0.5,
maxZoom: 4,
zoomDelta: 0.5,
zoomSnap: 0,
wheelPxPerZoomLevel: 75,
}
let bounds = [[0, 0], [1200, 1200]];
let attribution = { attribution: '<a href="https://github.com/3ncy/DMZmap">Support and Contribute on GitHub</a>' }
let map = L.map('map', mapSettings);
let image = L.imageOverlay('warzone-2-al-mazrah-map-cropped.jpg', bounds, attribution).addTo(map);
map.fitBounds(bounds);
// map.setView([611, 595], 0); //set view to center around the surface layer
let popup = L.popup();
function onMapClick(e) {
console.log("You clicked the map at " + e.latlng);
popup
.setLatLng(e.latlng)
.setContent(/*"You clicked the map at " + */e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
fetch('./keys.json')
.then((response) => response.json())
.then((keys) => {
for (let keyInfo of keys) {
let markerHTML = generateKeyHTML(keyInfo);
//TODO: add icons to the keys that have special icons
L.marker(L.latLng(keyInfo.coords)).addTo(map).bindPopup(markerHTML);
//TODO: prolly save the markers to a list, so their popups can be opened with code - when user serarches the name of the key. Or something like that
}
});
//TODO: create a bigger size of the images in popups:
//a big div that is opened when you click the smaller image and has set img src to the image. Then you can close it by either hitting ESC or sth like that
//TODO: searching for keys -
//look them up in the keys.json.
// When the matching key is found, open it's popup via map.openPopup(generateKeyHTML(findKey("keyname")))
// ------ functions: ------
function generateKeyHTML(keyInfo) {
let markerHTML = `<div><h3>${keyInfo.name}</h3>
<p><b>Description: </b>${keyInfo.description}</p>
<p><b>Behind the lock: </b>${keyInfo.behindTheLock}</p>`;
//NOTE: in case this becomes map for more than keys, repurpuse this. There's prolly gonna be only the "Desc" variable and it will include all the needed HTML for formatting.
for (let path of keyInfo.imagePaths) {
markerHTML += `<img class="popupImg" src="./images/${path}"></div>`;
}
return markerHTML;
}
</script>
</body>
</html>