-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
82 lines (69 loc) · 2.59 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
<!DOCTYPE html>
<html>
<head>
<title>Map Object Partitioner</title>
<style type="text/css">
#map {
border: 1px solid black;
}
ul {
list-style-type: none;
}
</style>
<link rel="stylesheet" href="kbd.css" />
</head>
<body>
<div style="float: right; text-align: right;">
<p>
<div class="bold">Current coordinates:</div>
<div><span id="coordinates">???</span></div>
</p>
<p>
<div class="bold">Current polygons:</div>
<div>
<ul id="polygon-list">
</ul>
</div>
</p>
</div>
<div>
<canvas id="map" width="600" height="600"></canvas>
</div>
<p>
Scroll to zoom. Click and drag to pan. <br />
Double-click to begin to draw an area, then continue to double-click at points to shape out the area. Right-click to complete, <kbd>ESC</kbd> to cancel and <kbd>SHIFT</kbd> + right click to undo last point. <b>NB!</b> Self-intersecting polygons are invalid and may cause the program to not function properly. <br />
When you click update below, all objects will be sorted by which polygon(s) they are contained in. If an object is contained in no polygon, or in more than one polygon, it will be highlighted on the map. When you click save, you will get a list sorted by the first polygon each object appear in.
</p>
<p>
The objects are color coded as follows:
<ul>
<li><span style="font-weight: bold; color: #ff0000;">Red</span> is <code>AddStaticVehicle</code></li>
<li><span style="font-weight: bold; color: #00cc00;">Green</span> is <code>AddStaticVehicleEx</code></li>
<li><span style="font-weight: bold; color: #cccc00;">Yellow</span> is <code>CreateDynamicObject</code></li>
<li><span style="font-weight: bold; color: #cc6600;">Orange</span> is <code>CreateObject</code></li>
</ul>
</p>
<p>
<div>
<button id="load-btn">Load file</button> <input type="file" id="file-input" style="display:none;" />
<button id="zoom-out-btn">Zoom out</button>
<button id="update-btn">Update</button>
<button id="save-btn">Save</button>
</div>
<div>
<label for="hide-valid">
<input type="checkbox" id="hide-valid" /> Hide objects in valid polygon
</label>
</div>
</p>
<p>
<div class="bold">Log:</div>
<textarea disabled id="log-output" style="resize:none;" rows="20" cols="80"></textarea>
</p>
<p>
<small>Copyright © 2016 Fredrik Østrem. <a href="https://github.com/frxstrem/map-object-partitioner/">View source on GitHub</a>.</small>
</p>
<!-- scripts -->
<script src="index.js"></script>
</body>
</html>