index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Open Waters Seascape</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    #map {
      position: relative;
      flex: 1;
    }

    #controls {
      background: #fff;
      border-radius: 6px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      font: 13px/1.6 system-ui, sans-serif;
      display: flex;
      flex-direction: row-reverse;

    }

    #controls summary {
      list-style: none;
      cursor: pointer;
      width: 29px;
      height: 29px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-left: auto;
      z-index: 2;
    }

    #controls summary::-webkit-details-marker {
      display: none;
    }

    #controls-panel {
      padding: 8px 12px;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-right: -29px;
      z-index: 1;
    }

    #controls section {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    #controls label {
      cursor: pointer;
      /* display: flex;
      flex-direction: row;
      gap: 0.5rem;
      align-items: center; */
    }

    #controls label.row {
      display: flex;
      width: 100%;
      flex-direction: row;
      gap: 0.5rem;
      align-items: center;
      justify-content: space-between;
    }

    #controls input[type="checkbox"] {
      margin-right: 0.5rem;
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem;
      background: #fff;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      font: 14px/1.5 system-ui, sans-serif;
      z-index: 1;
    }

    header h1 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
    }

    header h1 em {
      font-weight: 400;
      color: #AAA;
      font-size: 0.8em;
    }

    nav {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    header a {
      color: inherit;
      text-decoration: none;
    }

    header .github {
      display: flex;
      align-items: center;
      gap: 6px;
      color: inherit;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <header>
    <h1>
      <a href="https://openwaters.io/charts/seascape">
        Seascape
        <em>• an Open Waters project</em>
      </a>
    </h1>

    <nav>
      <a href="https://openwaters.io/charts/seascape">
        About
      </a>
      <a class="github" href="https://github.com/openwatersio/seascape">
        <svg viewBox="0 0 16 16" width="18" height="18" aria-hidden="true">
          <path fill="currentColor"
            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
        </svg>
      </a>
    </nav>
  </header>
  <div id="map">
    <details id="controls" class="maplibregl-ctrl">
      <summary title="Settings" aria-label="Settings" role="button">&#9881;</summary>
      <div id="controls-panel">
        <section>
          <strong>Seascape Layers</strong>
          <label>
            <input type="checkbox" id="toggle-depth" checked /> Depth shading
          </label>
          <label>
            <input type="checkbox" id="toggle-hillshade" checked /> Ocean relief
          </label>
          <label>
            <input type="checkbox" id="toggle-contours" checked /> Contours
          </label>
          <label>
            <input type="checkbox" id="toggle-soundings" checked /> Soundings
          </label>
          <label>
            <input type="checkbox" id="toggle-sources" /> Source coverage
          </label>
          <strong>External Layers</strong>
          <label>
            <input type="checkbox" id="toggle-osm" checked /> Base (OpenStreetMap)
          </label>
          <label>
            <input type="checkbox" id="toggle-land" checked /> Land relief (Mapterhorn)
          </label>
          <label>
            <input type="checkbox" id="toggle-tiles" /> Tile grid
          </label>
        </section>

        <section>
          <strong>Settings</strong>
          <!-- bands reads the DEPARE layer, absent from production builds while SKIP_DEPARE holds -->
          <label id="shading-control" hidden class="row"
            title="Smooth raster relief, or vector ENC depth bands (crisp isobath edges, safety snapped to a charted level)">
            <span>Shading</span>
            <select id="shading-select">
              <option value="relief">Relief (raster)</option>
              <option value="bands">Bands (vector)</option>
            </select>
          </label>
          <label class="row">Units
            <select id="unit-select">
              <option value="m">metres</option>
              <option value="ft">feet</option>
              <option value="fm">fathoms</option>
            </select>
          </label>
          <label class="row" title="Draft + margin; water shallower than this is shaded as a hazard (0 = off)">
            Safety
            <div>
              <input type="number" id="safety-depth" min="0" step="1" value="2" style="width: 3.5em" /> m
            </div>
          </label>
        </section>
        <section>
          <label title="Current viewport (W,S,E,N) — edit and press Enter to zoom there">
            <div><strong>Bounding Box</strong></div>
            <input type="text" id="bbox-input" spellcheck="false" />
          </label>
        </section>
      </div>
    </details>
  </div>

  <script type="module" async src="./index.js"></script>
</body>

</html>