ACTOMap/index.html at main · Trailblaze-Software/ACTOMap · GitHub

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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ACT O Map</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
      crossorigin=""
    />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <header class="chrome">
      <div class="brand">
        <span class="brand-title">ACT O Map</span>
        <span class="brand-sub">Created with <a href="https://trailblaze-software.github.io/Blaze/" rel="noopener noreferrer">Blaze</a>. LIDAR data from ACT Government aerial survey and topographic data from NSW Spatial Services.</span>
      </div>
      <button type="button" class="btn ghost" id="toggle-controls" aria-expanded="true">
      Options
      </button>
    </header>

    <aside class="controls" id="controls">
      <section>
        <h2>Map view</h2>
        <label class="check">
          <input type="checkbox" id="map-magnetic-north" />
          <span>Orient map to magnetic north (WMM2020)</span>
        </label>
        <p class="hint">
          Rotates the <strong>tile map</strong> so the top of the window aligns with magnetic north at the map centre (declination updates as you pan)
        </p>
      </section>

      <section>
        <details id="export-details" class="export-details">
          <summary class="export-details-summary btn primary">Export to PDF…</summary>
          <div class="export-details-body">
            <div
              class="export-sidebar-panel"
              role="region"
              aria-labelledby="export-sidebar-title"
            >
            <h3 id="export-sidebar-title" class="export-panel-heading">Export settings</h3>
            <p class="hint export-hint">
              Adjust options below, then <strong>drag the orange outline</strong> on the map to position the print area. Download when ready.
            </p>
            <fieldset class="row">
              <legend class="sr-only">Paper size</legend>
              <label class="radio">
                <input type="radio" name="paper" value="A4" checked />
                <span>A4</span>
              </label>
              <label class="radio">
                <input type="radio" name="paper" value="A3" />
                <span>A3</span>
              </label>
            </fieldset>
            <fieldset class="row">
              <legend class="sr-only">Orientation</legend>
              <label class="radio">
                <input type="radio" name="orient" value="portrait" checked />
                <span>Portrait</span>
              </label>
              <label class="radio">
                <input type="radio" name="orient" value="landscape" />
                <span>Landscape</span>
              </label>
            </fieldset>
            <label class="field">
              <span>Scale (denominator)</span>
              <select id="scale-den">
                <option value="5000">1 : 5 000</option>
                <option value="10000">1 : 10 000</option>
                <option value="15000">1 : 15 000</option>
                <option value="25000" selected>1 : 25 000</option>
                <option value="50000">1 : 50 000</option>
                <option value="100000">1 : 100 000</option>
                <option value="250000">1 : 250 000</option>
              </select>
            </label>
            <div id="pdf-magnetic-export-wrap" class="export-magnetic-pdf" hidden aria-hidden="true">
              <label class="check">
                <input type="checkbox" id="pdf-magnetic-north" />
                <span>Orient PDF to magnetic north (WMM2020)</span>
              </label>
              <p class="hint export-hint">
                Rotates the export so <strong>page top ≈ magnetic north</strong>.
              </p>
            </div>
            <div class="export-actions">
              <button type="button" class="btn ghost" id="export-cancel">Cancel</button>
              <button type="button" class="btn primary" id="export-pdf">Download PDF</button>
            </div>
            <p class="status" id="export-status" role="status"></p>
            </div>
          </div>
        </details>
      </section>
    </aside>

    <main class="map-wrap">
      <div id="map-magnetic-wrap" class="map-magnetic-wrap">
        <div id="map-magnetic-rotor" class="map-magnetic-rotor">
          <div id="map" class="map" aria-label="Map view"></div>
        </div>
      </div>
      <div id="utm-readout" class="utm-readout" aria-live="polite" title="WGS 84 → UTM 55S"></div>
    </main>

    <div id="export-stage" class="export-stage" aria-hidden="true"></div>

    <script
      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
      crossorigin=""
    ></script>
    <!-- html2canvas before jsPDF so nothing overwrites window.html2canvas -->
    <script src="https://unpkg.com/html2canvas@1.4.1/dist/html2canvas.min.js" crossorigin=""></script>
    <script src="https://unpkg.com/jspdf@2.5.2/dist/jspdf.umd.min.js" crossorigin=""></script>
    <script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js" crossorigin=""></script>
    <script src="https://unpkg.com/proj4@2.11.0/dist/proj4.js" crossorigin=""></script>
    <script src="./vendor/geomag.js"></script>
    <!-- Bump ?v= when app.js changes so browsers don’t keep an old cached copy -->
    <script src="./app.js?v=20260503b"></script>
  </body>
</html>