BHF/data-view.html at main · educelab/BHF · 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
131
132
133
134
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>BHF Data View</title>

  <!-- Leaflet (demo map behavior) -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

  <link rel="stylesheet" href="css/data-view.css"/>
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 64 64%27%3E%3Crect width=%2764%27 height=%2764%27 fill=%27%23121c2b%27/%3E%3Cpath d=%27M16 44l16-28 16 28H16z%27 fill=%27%23e8eefc%27/%3E%3C/svg%3E">
</head>

<body>

  <!-- Inline SVG icon set (no external icon/fonts) -->
  <svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden">
    <symbol id="i-caret" viewBox="0 0 24 24">
      <path d="M9 6l8 6-8 6V6z"></path>
    </symbol>
    <symbol id="i-refresh" viewBox="0 0 24 24">
      <path d="M20 12a8 8 0 1 1-2.3-5.7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      <path d="M20 4v6h-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </symbol>
    <symbol id="i-help" viewBox="0 0 24 24">
      <path d="M12 18h.01" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      <path d="M9.1 9a3 3 0 1 1 4.8 2.4c-.9.6-1.4 1.1-1.4 2.6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M12 22a10 10 0 1 0-10-10 10 10 0 0 0 10 10z" fill="none" stroke="currentColor" stroke-width="2"/>
    </symbol>
    <symbol id="i-map" viewBox="0 0 24 24">
      <path d="M9 18l-6 3V6l6-3 6 3 6-3v15l-6 3-6-3z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
      <path d="M9 3v15" fill="none" stroke="currentColor" stroke-width="2"/>
      <path d="M15 6v15" fill="none" stroke="currentColor" stroke-width="2"/>
    </symbol>
    <symbol id="i-info" viewBox="0 0 24 24">
      <path d="M12 22a10 10 0 1 0-10-10 10 10 0 0 0 10 10z" fill="none" stroke="currentColor" stroke-width="2"/>
      <path d="M12 10v6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      <path d="M12 7h.01" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
    </symbol>
    <symbol id="i-zoom" viewBox="0 0 24 24">
      <path d="M10.5 18a7.5 7.5 0 1 1 7.5-7.5A7.5 7.5 0 0 1 10.5 18z" fill="none" stroke="currentColor" stroke-width="2"/>
      <path d="M21 21l-4.2-4.2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      <path d="M10.5 7.5v6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      <path d="M7.5 10.5h6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
    </symbol>
    <symbol id="i-hand" viewBox="0 0 24 24">
      <path d="M7 11V6a1 1 0 0 1 2 0v5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      <path d="M9 11V5a1 1 0 0 1 2 0v6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      <path d="M11 11V6a1 1 0 0 1 2 0v5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      <path d="M13 11V7a1 1 0 0 1 2 0v7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      <path d="M7 11v6a3 3 0 0 0 3 3h3.5a3.5 3.5 0 0 0 3.3-2.4l1.1-3.4a1.3 1.3 0 0 0-1.2-1.7H15" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
    </symbol>
    <symbol id="i-cube" viewBox="0 0 24 24">
      <path d="M12 2l9 5-9 5-9-5 9-5z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
      <path d="M21 7v10l-9 5-9-5V7" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
      <path d="M12 12v10" fill="none" stroke="currentColor" stroke-width="2"/>
    </symbol>
    <symbol id="i-pin" viewBox="0 0 24 24">
      <path d="M12 22s7-4.5 7-12a7 7 0 1 0-14 0c0 7.5 7 12 7 12z" fill="none" stroke="currentColor" stroke-width="2"/>
      <path d="M12 10.5a2.5 2.5 0 1 0-2.5-2.5 2.5 2.5 0 0 0 2.5 2.5z" fill="none" stroke="currentColor" stroke-width="2"/>
    </symbol>
    <symbol id="i-comment" viewBox="0 0 24 24">
      <path d="M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
    </symbol>
    <symbol id="i-check" viewBox="0 0 24 24">
      <path d="M20 6L9 17l-5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </symbol>
    <symbol id="i-x" viewBox="0 0 24 24">
      <path d="M18 6L6 18M6 6l12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
    </symbol>
  </svg>

  <div class="app" id="appRoot">
    <div id="map"></div>

    <div class="rightRail">
      <div id="sideToggle" class="toggle center" title="Toggle panel"
           style="touch-action: pan-y; user-select: none; display: block;" data-title="Collapse">
        <svg class="ico ico-caret" aria-hidden="true"><use href="#i-caret"></use></svg>
      </div>

      <div id="sideElement">
        <div id="infoHeader" class="inline col12" style="touch-action: none; user-select: none;">
          <div class="titlePill">
            <span>BHF Revolutionary War Collection</span>
            <span id="activeCountLabel">0 active</span>
          </div>

          <div class="infoHeaderIcon" id="btnResetAll" title="Reset all overlays">
            <svg class="ico" aria-hidden="true"><use href="#i-refresh"></use></svg>
          </div>
          <div class="infoHeaderIcon" id="btnHelp" title="Help">
            <svg class="ico" aria-hidden="true"><use href="#i-help"></use></svg>
          </div>
        </div>

        <div class="sideScroll">
          <ul id="recordsTable" class="searchReturns noSort noselect"></ul>
        </div>

        <div class="attributionFooter">
          Basemap tiles: USGS The National Map (USGSTopo, USGSShadedReliefOnly). Map UI: Leaflet. Overlay rendering: GeoRasterLayer.
        </div>
      </div>
    </div>
  </div>

  <div id="citeModal" class="citeModal hidden" aria-hidden="true">
    <div class="citeModalBackdrop" id="citeModalBackdrop"></div>
    <div class="citeModalPanel" role="dialog" aria-modal="true" aria-labelledby="citeModalTitle">
      <div class="citeModalHeader">
        <div id="citeModalTitle">Citation</div>
        <button type="button" class="citeCloseBtn" id="citeCloseBtn" aria-label="Close">×</button>
      </div>

      <div class="citeModalBody">
        <textarea id="citeTextarea" readonly spellcheck="false"></textarea>
        <div class="citeModalActions">
          <button type="button" class="citeActionBtn" id="citeCopyBtn">Copy</button>
          <button type="button" class="citeActionBtn secondary" id="citeSelectBtn">Select All</button>
        </div>
      </div>
    </div>
  </div>

<script src="https://unpkg.com/geotiff@2.1.3/dist-browser/geotiff.js"></script>
<script src="https://unpkg.com/georaster/dist/georaster.browser.bundle.min.js"></script>
<script src="https://unpkg.com/georaster-layer-for-leaflet@4.1.2/dist/georaster-layer-for-leaflet.min.js"></script>

<script type="module" src="js/data-view/main.js"></script>

</body>