thermograph/static/mappicker.js

"use strict";
// Shared modal "location picker". Every view's Find button opens this overlay:
// a search box + a Leaflet map. Searching a place jumps the map (and a matching
// result selects it immediately); tapping anywhere on the map drops a pin the user
// can fine-tune before confirming. Picking closes the overlay and hands the chosen
// lat/lon back to the page via the onPick callback.
//
// Loaded on every page AFTER leaflet.js and BEFORE that page's own script. The map
// itself is created lazily the first time the picker opens (and reused after), so
// pages that never open it pay nothing.
(function () {
  let overlay, mapEl, map, marker, pin = null, onPickCb = null, pinIcon = null;
  let searchForm, searchInput, sugEl, confirmBtn, hintEl;

  const PIN_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>`;

  function build() {
    overlay = document.createElement("div");
    overlay.className = "mp-overlay";
    overlay.hidden = true;
    overlay.innerHTML = `
      <div class="mp-modal" role="dialog" aria-modal="true" aria-label="Pick a location">
        <div class="mp-head">
          <h2>Find a location</h2>
          <button type="button" class="mp-close" aria-label="Close">&times;</button>
        </div>
        <form class="mp-search" autocomplete="off">
          <input type="text" placeholder="Search a US or Canadian place…" autocomplete="off" />
          <button type="submit">Search</button>
          <ul class="mp-sug" hidden></ul>
        </form>
        <div class="mp-map"></div>
        <div class="mp-foot">
          <span class="mp-hint">Search above, or tap the map to drop a pin.</span>
          <button type="button" class="mp-confirm" disabled>Use this location</button>
        </div>
      </div>`;
    document.body.appendChild(overlay);

    mapEl = overlay.querySelector(".mp-map");
    searchForm = overlay.querySelector(".mp-search");
    searchInput = searchForm.querySelector("input");
    sugEl = overlay.querySelector(".mp-sug");
    confirmBtn = overlay.querySelector(".mp-confirm");
    hintEl = overlay.querySelector(".mp-hint");

    overlay.querySelector(".mp-close").onclick = close;
    // Tapping the dimmed backdrop (outside the modal) closes the picker.
    overlay.addEventListener("pointerdown", (e) => { if (e.target === overlay) close(); });
    confirmBtn.onclick = () => finish(pin);

    searchForm.addEventListener("submit", async (e) => {
      e.preventDefault();
      const q = searchInput.value.trim();
      if (!q) return;
      try {
        const res = await fetch(`api/v2/geocode?q=${encodeURIComponent(q)}`);
        const d = await res.json();
        renderSug(d.results || []);
      } catch (err) { /* leave the map as the fallback way to pick */ }
    });
    // Hide the suggestions when tapping elsewhere in the modal (but not the map,
    // which has its own tap handler).
    overlay.addEventListener("pointerdown", (e) => {
      if (!e.target.closest(".mp-search")) sugEl.hidden = true;
    }, true);
    document.addEventListener("keydown", (e) => {
      if (overlay && !overlay.hidden && e.key === "Escape") close();
    });
  }

  function renderSug(list) {
    const usca = list.filter((r) => ["US", "CA"].includes(r.country_code));
    const shown = usca.length ? usca : list;
    sugEl.innerHTML = "";
    if (!shown.length) { sugEl.hidden = true; return; }
    shown.forEach((r) => {
      const li = document.createElement("li");
      li.innerHTML = `${r.name}<span class="sub"> — ${[r.admin1, r.country].filter(Boolean).join(", ")}</span>`;
      // A picked search result is an unambiguous choice — drop the pin, recenter,
      // and select it right away (the map is there for manual/fine picks).
      li.onclick = () => {
        sugEl.hidden = true;
        searchInput.value = r.name;
        setPin(r.lat, r.lon, 10);
        finish({ lat: r.lat, lon: r.lon });
      };
      sugEl.appendChild(li);
    });
    sugEl.hidden = false;
  }

  function setPin(lat, lon, zoom) {
    pin = { lat, lon };
    if (marker) marker.setLatLng([lat, lon]);
    else marker = L.marker([lat, lon], pinIcon ? { icon: pinIcon } : undefined).addTo(map);
    map.setView([lat, lon], zoom || map.getZoom());
    confirmBtn.disabled = false;
    hintEl.textContent = "Pin set — confirm below, or tap elsewhere to move it.";
  }

  function finish(p) {
    if (!p) return;
    const cb = onPickCb;
    close();
    if (cb) cb(p.lat, p.lon);
  }

  function open(cur, onPick) {
    if (!overlay) build();
    onPickCb = onPick;
    pin = null;
    confirmBtn.disabled = true;
    sugEl.hidden = true;
    searchInput.value = "";
    hintEl.textContent = "Search above, or tap the map to drop a pin.";
    overlay.hidden = false;

    if (!map) {
      map = L.map(mapEl, { worldCopyJump: true, zoomControl: true }).setView([44.5, -95], 4);
      // Colorful CARTO "Voyager" basemap (no key needed), split into two raster
      // layers so road weight and label size can be tuned independently:
      //  • the label-free base is requested one zoom lower and drawn at 512px
      //    (tileSize 512 + zoomOffset -1) so roads read bold and prominent;
      //  • the labels-only layer is drawn on top at its natural size, keeping city
      //    names small and crisp rather than scaled up with the roads.
      // @2x keeps both sharp; a darken/saturate filter (style.css, .mp-base only)
      // deepens the roads while leaving the label text at full contrast.
      const CARTO = "https://{s}.basemaps.cartocdn.com/rastertiles";
      const ATTRIB = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>';
      L.tileLayer(`${CARTO}/voyager_nolabels/{z}/{x}/{y}@2x.png`, {
        subdomains: "abcd", maxZoom: 20, tileSize: 512, zoomOffset: -1,
        className: "mp-base", attribution: ATTRIB,
      }).addTo(map);
      L.tileLayer(`${CARTO}/voyager_only_labels/{z}/{x}/{y}@2x.png`, {
        subdomains: "abcd", maxZoom: 20, className: "mp-labels",
      }).addTo(map);
      // Branded accent teardrop pin (the same glyph the Find button uses), styled
      // in style.css — replaces Leaflet's default blue raster marker.
      pinIcon = L.divIcon({
        className: "mp-pin", html: PIN_ICON, iconSize: [32, 32], iconAnchor: [16, 30],
      });
      map.on("click", (e) => setPin(e.latlng.lat, e.latlng.lng));
    }
    // Leaflet measures the container on creation; it's zero-sized while hidden, so
    // recalc once the modal is actually visible and (if reopening on a known spot)
    // drop a pin there as the starting point.
    setTimeout(() => {
      map.invalidateSize();
      if (cur && cur.lat != null && cur.lon != null) setPin(cur.lat, cur.lon, 10);
      searchInput.focus();
    }, 60);
  }

  function close() { if (overlay) overlay.hidden = true; }

  window.LocationPicker = { open, PIN_ICON };
})();