Site Builder

Editing: state-index.php

writable 0666

<?php
/* ───────── PATH PARSING ─────────
   Expected patterns
     /geo/                  (root selector)
     /geo/USA/              (country folder)
     /geo/USA/FL/           (state folder -> pre‑select FL)
────────────────────────────────── */
$uriParts = array_values(array_filter(explode('/', trim($_SERVER['REQUEST_URI'],'/'))));   // e.g. ['geo','USA','FL']

$preState = '';
if (count($uriParts) >= 3 && $uriParts[0] === 'geo') {
    // The third segment is the two‑letter state code
    $preState = strtoupper($uriParts[2]);
}

/*  Load state bounds once (always from the canonical /geo/json-data folder)  */
$bounds_file = $_SERVER['DOCUMENT_ROOT'] . '/geo/json-data/states-bounds.json';
$bounds_data = file_exists($bounds_file) ? json_decode(file_get_contents($bounds_file), true) : [];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Find the Closest City in the USA | BestDealOn Geo Directory</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Instantly locate the nearest US city to you and browse every city in every state. Ultra-fast location search for travel, deals, or finding your local BestDealOn partner!">
<link rel="canonical" href="https://www.bestdealon.com/geo/">
<meta property="og:title" content="BestDealOn - Find Your Closest City in the USA">
<meta property="og:description" content="Find your nearest US city fast, browse by state, or use your phone's location. Perfect for deals, local businesses, and travel.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bestdealon.com/geo/">
<meta property="og:site_name" content="BestDealOn Geo Directory">
<meta name="robots" content="index, follow">
<style>
/* … —‑‑‑‑‑‑‑‑ (same CSS you already had) ‑‑‑‑‑‑‑‑… */
body{background:#f7fafc;font-family:'Segoe UI',Arial,sans-serif;color:#2e3a4c;margin:0;min-height:100vh;}
.card{background:#fff;max-width:520px;margin:3rem auto 2rem;padding:2.2rem 2rem 1.5rem;border-radius:18px;
      box-shadow:0 2px 14px 0 rgba(48,65,105,.09),0 .5px 2px 0 rgba(50,50,50,.03);text-align:center;}
.card-title{font-size:2.1rem;font-weight:800;color:#31548a;letter-spacing:1px;margin-bottom:.2rem;}
.card-slogan{font-size:1.11rem;color:#568ad6;margin-bottom:1.2rem;font-weight:500;}
.geo-ui{max-width:520px;margin:0 auto;background:#fff;border-radius:13px;
        box-shadow:0 1.5px 8px 0 rgba(70,100,140,.10);padding:1.2rem 1.3rem 2rem;}
select,button{padding:.3em 1em;font-size:1rem;border-radius:8px;border:1px solid #d0dae8;background:#f6fafd;
              color:#2e3a4c;margin-bottom:1rem;} select:focus,button:focus{outline:2px solid #6ab1ff;}
#city-list ul{list-style:none;padding-left:.2em;margin:0;} #city-list li{line-height:1.9;font-size:1.12em;
              text-align:left;margin-left:.2em;margin-bottom:.07em;}
#city-list a{text-decoration:none;color:#3972c6;font-weight:600;padding-left:.10em;} #city-list a:hover{text-decoration:underline;}
#nearest-city{margin:1em 0;font-size:1.15em;color:#23486b;} #nearby-cities{margin:.6em 0 1em;color:#6b7892;}
@media(max-width:600px){.card,.geo-ui{max-width:97vw;padding:1rem;}#city-list li{font-size:1.03em;}}
</style>
</head>
<body>
<div class="card">
  <div class="card-title">BestDealOn</div>
  <div class="card-slogan">Find the Closest City Fast!</div>

<button id="locate-btn" style="margin-bottom:1em;">📍 Locate Me</button>

<div id="state-wrapper">
      <label for="state-select"><b>State:</b></label>
      <select id="state-select">
          <option value="">— Select a State —</option>
          <?php foreach($bounds_data as $b): ?>
              <option value="<?= htmlspecialchars($b['state']) ?>"><?= htmlspecialchars($b['name']) ?></option>
          <?php endforeach; ?>
      </select>
  </div>

/*  UTIL  */
function loadJSON(url, cb){ fetch(url).then(r=>r.json()).then(cb); }
function capitalizeFirstSlug(str){
  return str.replace(/\/([^\/]+)\/?$/, (m,slug)=>'/'+slug.charAt(0).toUpperCase()+slug.slice(1)+'/');
}

const stateSelect = document.getElementById('state-select');
const cityUI      = document.getElementById('city-ui');

/* ─── AUTO‑PRESELECT IF ALREADY IN A STATE FOLDER ─── */
if (PRESELECT_STATE){
  stateSelect.value = PRESELECT_STATE;
  document.getElementById('state-wrapper').style.display = 'none';   // hide dropdown
  stateSelect.dispatchEvent(new Event('change'));                    // auto‑load cities
}

/* ─── LOCATE ME BUTTON ─── */
document.getElementById('locate-btn').onclick = function(){
  if (!navigator.geolocation){ alert("Geolocation not supported."); return; }
  navigator.geolocation.getCurrentPosition(pos=>{
     const {latitude:lat, longitude:lon} = pos.coords;
     const found = STATE_BOUNDS.find(st => lat>=st.minLat && lat<=st.maxLat && lon>=st.minLon && lon<=st.maxLon);
     if (!found){ alert('State not detected from location.'); return; }
     stateSelect.value = found.state;
     stateSelect.dispatchEvent(new Event('change'));
     setTimeout(()=>findNearestCity(found.state, lat, lon), 400);
  }, err=>alert("Location failed: "+err.message));
};

/* ─── ON STATE CHANGE : LOAD CITIES ─── */
stateSelect.addEventListener('change', function(){
  const st = this.value;
  if (!st){ cityUI.innerHTML=''; return; }
  cityUI.innerHTML='<em>Loading cities...</em>';
  loadJSON(JSON_BASE + st + '.json', function(cities){
     let groups = {};
     cities.forEach(c=>{
       const letter = c.city[0].toUpperCase();
       (groups[letter] = groups[letter] || []).push(c);
     });
     let html = '<div id="nearest-city"></div><div id="nearby-cities"></div><div id="city-list">';
     Object.keys(groups).sort().forEach(letter=>{
        html += `<div style="font-size:1.09em;font-weight:700;margin-top:1em;">${letter}</div><ul>`;
        groups[letter].sort((a,b)=>a.city.localeCompare(b.city))
                      .forEach(c=>{html += `<li><a href="${capitalizeFirstSlug(c.url)}">${c.city}</a> <span style="color:#b8c6de;font-size:.98em;">(${c.lat},${c.lon})</span></li>`;});
        html += '</ul>';
     });
     html += '</div>';
     cityUI.innerHTML = html;
  });
});

/* ─── NEAREST / NEARBY CITIES ─── */
function findNearestCity(state, lat, lon){
  loadJSON(JSON_BASE + state + '.json', function(cities){
    let nearest = null, dists = [];
    cities.forEach(c=>{
      const d = Math.hypot(lat-c.lat, lon-c.lon);
      dists.push({c,d}); if(!nearest || d<nearest.d) nearest={c,d};
    });
    dists.sort((a,b)=>a.d-b.d);
    const near = dists.slice(1,5);
    document.getElementById('nearest-city').innerHTML =
      nearest ? `Closest city: <b><a href="${capitalizeFirstSlug(nearest.c.url)}">${nearest.c.city}</a></b> <span style="color:#b8c6de;font-size:.98em;">(${nearest.c.lat},${nearest.c.lon})</span>`
              : '';
    document.getElementById('nearby-cities').innerHTML =
      near.length ? 'Nearby cities: ' + near.map(nb=>`<a href="${capitalizeFirstSlug(nb.c.url)}" style="font-size:1em;margin:0 .7em 0 0">${nb.c.city}</a>`).join('') : '';
  });
}
</script>
</body>
</html>

Site Builder

Editing: state-index.php

Site Builder