Cartografía

Galería de mapas de la cuenca del Toltén y del lago Villarrica. Las láminas muestran el contexto espacial, la red de estaciones usada en el estudio y el dominio del modelo hidrológico SWAT+. Cada miniatura abre una versión ampliada; el enlace PNG descarga el original.

man = await FileAttachment("../cartografia/manifest.json").json()

gruposOrden = [
  {
    id: "Contexto espacial",
    nota: "Ubicación de la cuenca, relieve, batimetría del lago y cobertura nival."
  },
  {
    id: "Red de observación",
    nota: "Estaciones meteorológicas, fluviométricas y de calidad de agua usadas en el estudio."
  },
  {
    id: "Dominio SWAT+",
    nota: "Subcuencas, unidades de respuesta hidrológica y láminas del armado SWAT+."
  }
]

vista = {
  const dlg = document.createElement("dialog")
  dlg.id = "carto-luz"
  const cerrar = document.createElement("button")
  cerrar.type = "button"
  cerrar.textContent = "Cerrar"
  cerrar.addEventListener("click", () => dlg.close())
  const img = document.createElement("img")
  img.alt = ""
  const tit = document.createElement("p")
  const ley = document.createElement("p")
  const orig = document.createElement("a")
  orig.target = "_blank"
  orig.rel = "noopener"
  dlg.append(cerrar, img, tit, ley, orig)

  const abrir = (m) => {
    img.src = `../cartografia/${m.web}`
    img.alt = m.titulo
    tit.textContent = m.titulo
    ley.textContent = m.leyenda
    orig.href = `../cartografia/${m.original}`
    orig.textContent = `PNG original (${m.archivo})`
    dlg.showModal()
  }

  const wrap = document.createElement("div")
  for (const g of gruposOrden) {
    const items = man
      .filter((m) => m.grupo === g.id)
      .sort((a, b) => (a.orden ?? 0) - (b.orden ?? 0))
    if (!items.length) continue

    const sec = document.createElement("section")
    sec.className = "carto-seccion"
    const h = document.createElement("h2")
    h.textContent = g.id
    const nota = document.createElement("p")
    nota.textContent = g.nota
    const grid = document.createElement("div")
    grid.className = "carto-grid"

    for (const m of items) {
      const btn = document.createElement("button")
      btn.type = "button"
      btn.className = "carto-card"
      const thumb = document.createElement("img")
      thumb.src = `../cartografia/${m.mini}`
      thumb.alt = m.titulo
      thumb.loading = "lazy"
      const fuerte = document.createElement("strong")
      fuerte.textContent = m.titulo
      const sub = document.createElement("span")
      sub.textContent = m.leyenda
      btn.append(thumb, fuerte, sub)
      btn.addEventListener("click", () => abrir(m))
      grid.append(btn)
    }

    sec.append(h, nota, grid)
    wrap.append(sec)
  }
  wrap.append(dlg)
  return wrap
}