' + String(i + 1).padStart(2, "0") + '

' + '

' + titleCase(s.name) + '

' + '

' + s.distanceKm.toFixed(1) + ' km de distancia

' + '

' + s.address + '

' + '' + '

'; return li; } function renderNextPage(){ if (renderedCount >= currentStores.length) return false; var sentinel = document.getElementById("listSentinel"); var next = currentStores.slice(renderedCount, renderedCount + PAGE_SIZE); next.forEach(function(s){ var idx = renderedCount; storeListEl.insertBefore(renderStoreCard(s, idx), sentinel); renderedCount++; }); return true; } function ensureRenderedThrough(index){ while (renderedCount <= index && renderNextPage()){} } function initStoreList(){ storeListEl.innerHTML = ""; renderedCount = 0; var sentinel = document.createElement("li"); sentinel.className = "list-sentinel"; sentinel.id = "listSentinel"; storeListEl.appendChild(sentinel); if (listObserver) listObserver.disconnect(); listObserver = new IntersectionObserver(function(entries){ if (entries[0].isIntersecting) renderNextPage(); }, { root: storeListEl, rootMargin: "150px" }); listObserver.observe(sentinel); renderNextPage(); } function smoothScrollTo(container, targetTop, duration){ var startTop = container.scrollTop; var change = targetTop - startTop; var startTime = null; function step(timestamp){ if (!startTime) startTime = timestamp; var progress = Math.min((timestamp - startTime) / duration, 1); var eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic container.scrollTop = startTop + change * eased; if (progress < 1) requestAnimationFrame(step); } requestAnimationFrame(step); } function smoothScrollWindowTo(targetY, duration){ var startY = window.pageYOffset; var change = targetY - startY; var startTime = null; function step(timestamp){ if (!startTime) startTime = timestamp; var progress = Math.min((timestamp - startTime) / duration, 1); var eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic window.scrollTo(0, startY + change * eased); if (progress < 1) requestAnimationFrame(step); } requestAnimationFrame(step); } function scrollToStoreCard(index){ ensureRenderedThrough(index); var card = document.getElementById("store-card-" + index); if (!card) return; smoothScrollTo(storeListEl, card.offsetTop, 500); card.classList.add("highlight"); setTimeout(function(){ card.classList.remove("highlight"); }, 1500); } function popupHtml(s, index){ return "" + titleCase(s.name) + "
" + s.address + "
" + s.distanceKm.toFixed(1) + " km" + ''; } function renderMap(userLat, userLng, stores){ resultsEl.hidden = false; if (!map){ map = L.map("chetaLocMap"); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 19, attribution: "" }).addTo(map); } markers.forEach(function(m){ map.removeLayer(m); }); markers = []; var userIcon = L.divIcon({ className: "", html: '

', iconSize: [26,26], iconAnchor: [13,13] }); var userMarker = L.marker([userLat, userLng], { icon: userIcon }).addTo(map).bindPopup("Tu ubicación"); markers.push(userMarker); var bounds = [[userLat, userLng]]; stores.forEach(function(s, i){ var storeIcon = L.divIcon({ className: "", html: '

' + '' + (i+1) + '

', iconSize: [24,24], iconAnchor: [12,24] }); var m = L.marker([s.lat, s.lng], { icon: storeIcon }) .addTo(map) .bindPopup(popupHtml(s, i)); m.on("click", function(){ scrollToStoreCard(i); }); markers.push(m); bounds.push([s.lat, s.lng]); }); map.fitBounds(bounds, { padding: [40, 40] }); setTimeout(function(){ map.invalidateSize(); }, 50); } function handleLocation(lat, lng, label){ currentStores = sortStoresByDistance(lat, lng); listHeading.textContent = "Tiendas más cercanas"; initStoreList(); renderMap(lat, lng, currentStores); setStatus(""); var mapTop = document.getElementById("chetaLocMap").getBoundingClientRect().top + window.pageYOffset - 24; smoothScrollWindowTo(mapTop, 1400); } function geocodeAddress(address){ var url = "https://nominatim.openstreetmap.org/search?format=json&limit=1&accept-language=es&q=" + encodeURIComponent(address); return fetch(url, { headers: { "Accept": "application/json" } }) .then(function(res){ if (!res.ok) throw new Error("network"); return res.json(); }) .then(function(data){ if (!data || !data.length) throw new Error("not_found"); return { lat: parseFloat(data[0].lat), lng: parseFloat(data[0].lon), label: data[0].display_name }; }); } // --------------------------------------------------------------- // Address autocomplete // --------------------------------------------------------------- function hideSuggestions(){ suggestionsEl.hidden = true; suggestionsEl.innerHTML = ""; suggestionItems = []; activeSuggestionIndex = -1; } function renderSuggestions(items){ suggestionItems = items; activeSuggestionIndex = -1; if (!items.length){ hideSuggestions(); return; } suggestionsEl.innerHTML = ""; items.forEach(function(item, i){ var btn = document.createElement("button"); btn.type = "button"; btn.textContent = item.label; btn.addEventListener("mousedown", function(e){ // mousedown (not click) so it fires before the input's blur handler e.preventDefault(); selectSuggestion(item); }); suggestionsEl.appendChild(btn); }); suggestionsEl.hidden = false; } function selectSuggestion(item){ suppressNextSuggestions = true; addressInput.value = item.label; hideSuggestions(); handleLocation(item.lat, item.lng, item.label); } function fetchSuggestions(query){ if (currentAbortController) currentAbortController.abort(); currentAbortController = new AbortController(); var url = "https://nominatim.openstreetmap.org/search?format=json&limit=5&addressdetails=0&accept-language=es&countrycodes=ar&q=" + encodeURIComponent(query); fetch(url, { headers: { "Accept": "application/json" }, signal: currentAbortController.signal }) .then(function(res){ return res.ok ? res.json() : []; }) .then(function(data){ var items = (data || []).map(function(d){ return { label: d.display_name, lat: parseFloat(d.lat), lng: parseFloat(d.lon) }; }); renderSuggestions(items); }) .catch(function(err){ if (err.name !== "AbortError") hideSuggestions(); }); } addressInput.addEventListener("input", function(){ if (suppressNextSuggestions){ suppressNextSuggestions = false; return; } var query = addressInput.value.trim(); clearTimeout(debounceTimer); if (query.length < 3){ hideSuggestions(); return; } debounceTimer = setTimeout(function(){ fetchSuggestions(query); }, 400); }); addressInput.addEventListener("keydown", function(e){ if (!suggestionsEl.hidden && suggestionItems.length){ var buttons = suggestionsEl.querySelectorAll("button"); if (e.key === "ArrowDown"){ e.preventDefault(); activeSuggestionIndex = Math.min(activeSuggestionIndex + 1, suggestionItems.length - 1); buttons.forEach(function(b, i){ b.classList.toggle("active", i === activeSuggestionIndex); }); return; } if (e.key === "ArrowUp"){ e.preventDefault(); activeSuggestionIndex = Math.max(activeSuggestionIndex - 1, 0); buttons.forEach(function(b, i){ b.classList.toggle("active", i === activeSuggestionIndex); }); return; } if (e.key === "Enter" && activeSuggestionIndex >= 0){ e.preventDefault(); selectSuggestion(suggestionItems[activeSuggestionIndex]); return; } if (e.key === "Escape"){ hideSuggestions(); return; } } if (e.key === "Enter") searchBtn.click(); }); addressInput.addEventListener("blur", function(){ setTimeout(hideSuggestions, 100); }); // --------------------------------------------------------------- searchBtn.addEventListener("click", function(){ hideSuggestions(); var address = addressInput.value.trim(); if (!address){ setStatus("Por favor ingresá una dirección.", true); return; } setBusy(true); setStatus("Buscando dirección…"); geocodeAddress(address) .then(function(loc){ handleLocation(loc.lat, loc.lng, address); }) .catch(function(err){ if (err.message === "not_found"){ setStatus("No pudimos encontrar esa dirección. Probá agregando ciudad y país.", true); } else { setStatus("Ocurrió un error al buscar esa dirección. Intentá de nuevo.", true); } }) .finally(function(){ setBusy(false); }); }); geoBtn.addEventListener("click", function(){ hideSuggestions(); if (!navigator.geolocation){ setStatus("Tu navegador no admite geolocalización.", true); return; } setBusy(true); setStatus("Obteniendo tu ubicación…"); navigator.geolocation.getCurrentPosition( function(pos){ handleLocation(pos.coords.latitude, pos.coords.longitude, "tu ubicación actual"); setBusy(false); }, function(){ setStatus("No pudimos acceder a tu ubicación. Por favor ingresá tu dirección.", true); setBusy(false); }, { timeout: 10000 } ); }); } // --------------------------------------------------------------- // Leaflet isn't bundled here (this field only runs inline JS, no //

Cheta, más cerca que nunca!