Site Builder

Editing: locate.js

writable 0666

/*  locate.js  –  shared geolocation helper
 *  ------------------------------------------------------------
 *  Expects:
 *    • <button id="locateBtn">     triggers locateMe()
 *    • hidden  #lat  and #lon      receive coordinates
 *    • text    #city #state #zip   filled/locked automatically
 *    • <div id="location-tags">    wrapper for visual chips
 *    • <input id="addTag">         lets user add more chips
 *    • <form id="social-form">     is revealed once a fix is found
 *  ------------------------------------------------------------ */

let userLat = '', userLon = '', userState = '', userCity = '', userCities = [];
let chips = [];

/* lock the location fields after lookup so users don’t edit by accident */
function lockCityState() {
  ['city', 'state'].forEach(id => {
    const el = document.getElementById(id);
    if (el) { el.readOnly = true; el.classList.add('locked-input'); }
  });
}

/* chip helpers -------------------------------------------------------- */
function renderChips() {
  const wrap = document.getElementById('location-tags');
  const hidden = document.getElementById('location_tags');
  if (!wrap || !hidden) return;

wrap.innerHTML = '';
  chips.forEach((tag, i) => {
    const chip = document.createElement('span');
    chip.className = 'location-tag';
    chip.textContent = tag;

const del = document.createElement('span');
    del.className = 'del'; del.innerHTML = '&times;';
    del.onclick = () => { chips.splice(i, 1); renderChips(); };

chip.appendChild(del); wrap.appendChild(chip);
  });
  hidden.value = chips.join(', ');
}

function addTagsFromInput() {
  const inp = document.getElementById('addTag');
  if (!inp || !inp.value.trim()) return;
  inp.value.split(',').map(t => t.trim()).filter(Boolean).forEach(t => {
    if (!chips.includes(t)) chips.push(t);
  });
  inp.value = ''; renderChips();
}

/* main geolocation routine ------------------------------------------- */
function locateMe() {
  if (!navigator.geolocation) { alert('Geolocation not supported'); return; }

const geoStat = document.getElementById('geo-status');
  if (geoStat) geoStat.textContent = 'Locating…';

navigator.geolocation.getCurrentPosition(pos => {
    userLat = pos.coords.latitude;
    userLon = pos.coords.longitude;

document.getElementById('lat').value = userLat;
    document.getElementById('lon').value = userLon;

/* 1️⃣  Which state am I in? (bounds box test) */
    fetch('/geo/json-data/states-bounds.json')
      .then(r => r.json()).then(bounds => {
        let foundState = '';
        bounds.forEach(b => {
          if (userLat >= b.minLat && userLat <= b.maxLat &&
              userLon >= b.minLon && userLon <= b.maxLon) {
            foundState = b.state;   // 2‑letter code
          }
        });
        if (!foundState) { geoStat.textContent = 'Outside USA'; return; }

userState = foundState;
        document.getElementById('state').value = foundState;

/* 2️⃣  Find nearest city inside that state list */
        fetch('/geo/json-data/' + foundState + '.json')
          .then(r => r.json()).then(cities => {
            userCities = cities;
            let best = null, bestDist = 1e9;
            cities.forEach(c => {
              const d = Math.hypot(userLat - c.lat, userLon - c.lon);
              if (d < bestDist) { bestDist = d; best = c; }
            });
            if (!best) { geoStat.textContent = 'City lookup failed'; return; }

/* fill + lock */
            document.getElementById('city').value = best.city;
            document.getElementById('zip').value  = best.zip ?? '';
            document.getElementById('lat').value  = best.lat;
            document.getElementById('lon').value  = best.lon;
            if (geoStat) geoStat.innerHTML =
              `Location found: <b>${best.city}, ${foundState}</b>`;

lockCityState();

/* default tags: city, state + 5 nearest cities */
            const dists = cities
              .map(c => ({ name: c.city, d: Math.hypot(userLat - c.lat, userLon - c.lon) }))
              .sort((a,b) => a.d - b.d)
              .slice(0,6)
              .map(o => o.name);
            chips = Array.from(new Set([best.city, foundState, ...dists]));
            renderChips();

/* finally reveal the form */
            const f = document.getElementById('social-form');
            if (f) f.style.display = 'block';
          });
      });
  }, () => { if (geoStat) geoStat.textContent = 'Failed'; });
}

/* ------- tag‑input keyboard handler (comma / enter / backspace) ----- */
document.addEventListener('DOMContentLoaded', () => {
  const add = document.getElementById('addTag');
  if (!add) return;
  add.addEventListener('keydown', e => {
    if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); addTagsFromInput(); }
    if (e.key === 'Backspace' && !add.value && chips.length) {
      chips.pop(); renderChips();
    }
  });
  add.addEventListener('blur', addTagsFromInput);
});

Site Builder

Editing: locate.js

Site Builder