all repos — onyx @ 1a0497887a424251f799a123c70ce3dfdef40b37

minimal map annotation and location data sharing tool

static/index.html (raw)

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
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='description' content='map annotation tool'/>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<link rel='stylesheet' type="text/css" href="./leaflet.css">
<link rel='stylesheet' type='text/css' href='./style.css?v=0.2.1'>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<link rel='shortcut icon' href='/favicon.png'>
<link rel='manifest' href='/manifest.json'>
<title>ONYX</title>
</head>
<body>
<noscript>
  <div id="noscript-container">
    <p>This is a javascript application - <a href="https://nilfm.cc/git/onyx">ONYX</a>;</p>
    <p>You must enable javascript in your browser to use it.</p>
  </div>
</noscript>
<div id="map"></div>

<div id="mapControls">
  <button id="home-btn">&#8962;</button>
  <button id="addPoint-btn">&middot;</button>
  <button id="addCircle-btn">&compfn;</button>
  <button id="addPolygon-btn">&diamond;</button>
  <div id="subControls">
    <button id="tiles-btn">&#10070;</button>
  <button id="save-btn">&darr;</button>
  <button id="clear-btn">x</button>
  <button id="restore-btn">&olarr;</button>
  <button id="menu-btn">&equiv;</button>
  </div>
</div>

<div id="createOverlay-container">
  <div class="modalHeader">
  <button class="closeBtn" id="createOverlay-closeBtn">x</button>
  <h2 id="createOverlay-title"></h2>
  </div>
  <form id="createOverlay-content">
    <label for="createOverlay-name">Name</label><br/>
    <input type="text" id="createOverlay-name" required ><br/>
    <label for="createOverlay-desc">Description</label><br/>
    <textarea id="createOverlay-desc"></textarea><br/>
    <div id="radius-container">
      <label for="createOverlay-radius">Radius (meters)</label><br/>
      <input type="number" step="1" id="createOverlay-radius" value="500" required><br/>
    </div>
    <div id="close-poly-container">
      <input type="checkbox" id="close-poly-checkbox">
      <label for="close-poly-checkbox">Close polyline</label><br/>
    </div>
    <div class="multiBtn-container" id="edit-extra-btns">
      <button id="goto-btn">Go Here</button>
      <button id="export-btn">Export</button>
      <button id="delete-btn">Delete</button>
    </div>
  <button type="submit" class="positive-btn" id="createOverlay-submitBtn">OK</button>
  </form>
</div>

<div id="cancel-container">
  <span id="cancel-msg"></span>
  <div class="multiBtn-container">
  <button class="negative-btn" id="cancel-btn">Cancel</button>
  </div>
</div>

<div id="info-container">
  <button class="closeBtn" id="info-closeBtn">x</button>
  <div id="info-content">
  </div>
</div>

<div id="confirm-container">
  <span id="confirm-msg"></span>
  <div class="multiBtn-container">
    <button class="positive-btn" id="yes-btn">OK</button>
    <button class="negative-btn" id="no-btn">Cancel</button>
  </div>
</div>

<div id="import-export-container">
  <div clas="modalHeader">
  <h2 id="import-export-title"></h2>
  </div>
  <div id="import-export-content">
  <textarea id="import-export-textarea"></textarea>
  <span id="import-export-error"></span>
  <div class="multiBtn-container">
    <button class="positive-btn" id="import-export-ok-btn">OK</button>
    <button class="negative-btn" id="import-export-cancel-btn">Cancel</button>
  </div>
  </div>
</div>

<div id="overlays-menu-container">
  <div id="overlays-list">
    <details id="markers-wrapper" open><summary>Markers</summary><ul id="markers-list"></ul></details>
    <details id="circles-wrapper" open><summary>Circles</summary><ul id="circles-list"></ul></details>
    <details id="polygons-wrapper" open><summary>Paths</summary><ul id="polygons-list"></ul></details>
  </div>
  <div class="multiBtn-container">
    <button id="set-home-btn">Set Home</button>
    <button id="import-btn">Import</button>
    <button id="export-all-btn">Export All</button>
  </div>
</div>

</body>
<script src="./leaflet.js?v=1.8.0"></script>
<script src="./onyx.js?v=0.2.1"></script>
</html>