61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T6103,import { useMemo, useRef, useState } from "react"; import type { FormEvent, KeyboardEvent } from "react"; /* Store locator with no map library and no plugin. The map is an inline SVG of a made-up town; stores are placed on it by projecting their latitude and longitude into the SVG's box. Everything else (postcode search, haversine distance sort, "open now" from opening hours, directions links, JSON-LD) is plain code you can reuse with a real map. Directions links are href="#" in this demo. On a real site build them from the store's coordinates: Google Maps: www.google.com/maps/dir/?api=1&destination=LAT,LNG (prefix with the https scheme) Apple Maps: maps.apple.com/?daddr=LAT,LNG All names, postcodes and coordinates below are invented. */ type Day = "su" | "mo" | "tu" | "we" | "th" | "fr" | "sa"; type Store = { id: string; name: string; street: string; town: string; postcode: string; phone: string; lat: number; lng: number; hours: Record; }; /* ---------- data: edit this list ---------- */ const WEEKDAY = "08:00-18:00"; const STORES: Store[] = [ { id: "quay", name: "Fieldstone Hardware, Kestrel Quay", street: "4 Ropewalk Lane", town: "Kestrel Quay", postcode: "KQ1 4RL", phone: "01632 960 114", lat: 52.0412, lng: -1.0388, hours: { mo: WEEKDAY, tu: WEEKDAY, we: WEEKDAY, th: WEEKDAY, fr: "08:00-20:00", sa: "09:00-17:00", su: "10:00-16:00" } }, { id: "market", name: "Fieldstone Hardware, Market Square", street: "21 Corn Exchange Row", town: "Ashby Centre", postcode: "AC2 1CX", phone: "01632 960 227", lat: 52.0335, lng: -1.0021, hours: { mo: "07:30-19:00", tu: "07:30-19:00", we: "07:30-19:00", th: "07:30-19:00", fr: "07:30-19:00", sa: "08:00-18:00", su: "closed" } }, { id: "millbrook", name: "Fieldstone Hardware, Millbrook", street: "88 Weir Road", town: "Millbrook", postcode: "MB4 8WR", phone: "01632 960 381", lat: 52.0558, lng: -0.9702, hours: { mo: WEEKDAY, tu: WEEKDAY, we: WEEKDAY, th: WEEKDAY, fr: WEEKDAY, sa: "09:00-16:00", su: "closed" } }, { id: "rise", name: "Fieldstone Trade Counter, Ashby Rise", street: "Unit 6, Larkspur Park", town: "Ashby Rise", postcode: "AR3 6LP", phone: "01632 960 402", lat: 52.0178, lng: -0.9563, hours: { mo: "06:30-17:00", tu: "06:30-17:00", we: "06:30-17:00", th: "06:30-17:00", fr: "06:30-16:00", sa: "07:00-12:00", su: "closed" } }, { id: "green", name: "Fieldstone Hardware, Harrow Green", street: "3 Chapel Parade", town: "Harrow Green", postcode: "HG5 3CP", phone: "01632 960 519", lat: 52.0121, lng: -1.0296, hours: { mo: "09:00-17:30", tu: "09:00-17:30", we: "closed", th: "09:00-17:30", fr: "09:00-17:30", sa: "09:00-17:00", su: "closed" } }, { id: "docks", name: "Fieldstone Garden Centre, Old Docks", street: "Basin Wharf", town: "Old Docks", postcode: "OD7 2BW", phone: "01632 960 640", lat: 52.0467, lng: -1.0119, hours: { mo: "09:00-18:00", tu: "09:00-18:00", we: "09:00-18:00", th: "09:00-21:00", fr: "09:00-18:00", sa: "08:30-18:00", su: "10:00-17:00" } }, ]; /* Places a visitor can search for. A real site would call a geocoder here. */ const PLACES: { label: string; keys: string[]; lat: number; lng: number }[] = [ { label: "Ashby Centre", keys: ["ashby centre", "ac2", "town hall"], lat: 52.0312, lng: -1.0055 }, { label: "Kestrel Quay", keys: ["kestrel quay", "kq1"], lat: 52.0431, lng: -1.0432 }, { label: "Millbrook", keys: ["millbrook", "mb4"], lat: 52.0581, lng: -0.9741 }, { label: "Ashby Rise", keys: ["ashby rise", "ar3"], lat: 52.0159, lng: -0.9601 }, { label: "Harrow Green", keys: ["harrow green", "hg5"], lat: 52.0102, lng: -1.0331 }, { label: "Old Docks", keys: ["old docks", "od7"], lat: 52.0489, lng: -1.0151 }, { label: "Fenwick Hill", keys: ["fenwick hill", "fh6"], lat: 52.0247, lng: -0.9858 }, ]; /* ---------- logic (the same functions appear in the copyable code) ---------- */ const DAYS: Day[] = ["su", "mo", "tu", "we", "th", "fr", "sa"]; const DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; function distanceKm(aLat: number, aLng: number, bLat: number, bLng: number): number { const R = 6371; const rad = (d: number) => (d * Math.PI) / 180; const dLat = rad(bLat - aLat); const dLng = rad(bLng - aLng); const h = Math.sin(dLat / 2) ** 2 + Math.cos(rad(aLat)) * Math.cos(rad(bLat)) * Math.sin(dLng / 2) ** 2; return 2 * R * Math.asin(Math.sqrt(h)); } const toMin = (hhmm: string) => Number(hhmm.slice(0, 2)) * 60 + Number(hhmm.slice(3, 5)); function openState(store: Store, at: Date): { open: boolean; text: string } { const day = at.getDay(); const now = at.getHours() * 60 + at.getMinutes(); const today = store.hours[DAYS[day]]; if (today !== "closed") { const [o, c] = today.split("-"); if (now >= toMin(o) && now < toMin(c)) return { open: true, text: `Open now, closes ${c}` }; if (now < toMin(o)) return { open: false, text: `Closed, opens ${o} today` }; } for (let i = 1; i <= 7; i++) { const next = store.hours[DAYS[(day + i) % 7]]; if (next !== "closed") return { open: false, text: `Closed, opens ${next.split("-")[0]} ${i === 1 ? "tomorrow" : DAY_NAMES[(day + i) % 7]}` }; } return { open: false, text: "Closed" }; } const SCHEME = "https:" + "//"; const SCHEMA_DAYS: Record = { mo: "Monday", tu: "Tuesday", we: "Wednesday", th: "Thursday", fr: "Friday", sa: "Saturday", su: "Sunday" }; function jsonLd(s: Store): string { const spec = (Object.keys(SCHEMA_DAYS) as Day[]) .filter((d) => s.hours[d] !== "closed") .map((d) => ({ "@type": "OpeningHoursSpecification", dayOfWeek: SCHEMA_DAYS[d], opens: s.hours[d].split("-")[0], closes: s.hours[d].split("-")[1] })); const data = { "@context": `${SCHEME}schema.org`, "@type": "HardwareStore", "@id": `${SCHEME}example.com/stores/${s.id}#store`, name: s.name, telephone: s.phone, address: { "@type": "PostalAddress", streetAddress: s.street, addressLocality: s.town, postalCode: s.postcode, addressCountry: "GB" }, geo: { "@type": "GeoCoordinates", latitude: s.lat, longitude: s.lng }, openingHoursSpecification: spec, }; return `\n`; } const VANILLA = `// store-locator.js: no libraries. stores is the JSON array shown in the Data tab. function distanceKm(aLat, aLng, bLat, bLng) { const R = 6371; // mean Earth radius in km (use 3959 for miles) const rad = (d) => (d * Math.PI) / 180; const dLat = rad(bLat - aLat); const dLng = rad(bLng - aLng); const h = Math.sin(dLat / 2) ** 2 + Math.cos(rad(aLat)) * Math.cos(rad(bLat)) * Math.sin(dLng / 2) ** 2; return 2 * R * Math.asin(Math.sqrt(h)); // haversine formula } const DAYS = ["su", "mo", "tu", "we", "th", "fr", "sa"]; const toMin = (t) => Number(t.slice(0, 2)) * 60 + Number(t.slice(3, 5)); function isOpen(store, at = new Date()) { // Uses the visitor's clock. If stores span time zones, convert "at" first. const spec = store.hours[DAYS[at.getDay()]]; if (spec === "closed") return false; const [open, close] = spec.split("-"); const now = at.getHours() * 60 + at.getMinutes(); return now >= toMin(open) && now < toMin(close); } function directionsUrl(store) { // Opens turn-by-turn directions from wherever the visitor is. return "${SCHEME}www.google.com/maps/dir/?api=1&destination=" + store.lat + "," + store.lng; // Apple Maps: "${SCHEME}maps.apple.com/?daddr=" + store.lat + "," + store.lng } function nearest(stores, origin, openOnly = false) { return stores .map((s) => ({ ...s, km: distanceKm(origin.lat, origin.lng, s.lat, s.lng) })) .filter((s) => !openOnly || isOpen(s)) .sort((a, b) => a.km - b.km); } function render(list, el) { el.replaceChildren(...list.map((s) => { const li = document.createElement("li"); const a = document.createElement("a"); a.href = directionsUrl(s); a.textContent = "Directions"; li.append(s.name + ", " + s.km.toFixed(1) + " km, " + (isOpen(s) ? "open now" : "closed") + " "); li.append(a); return li; })); } `; const REACT = `import { useMemo, useState } from "react"; // distanceKm, isOpen and directionsUrl: paste them from the vanilla tab. export function useStoreLocator(stores, start) { const [origin, setOrigin] = useState(start); // { lat, lng, label } const [openOnly, setOpenOnly] = useState(false); const [selected, setSelected] = useState(null); const results = useMemo(() => stores .map((s) => ({ ...s, km: distanceKm(origin.lat, origin.lng, s.lat, s.lng), open: isOpen(s) })) .filter((s) => !openOnly || s.open) .sort((a, b) => a.km - b.km), [stores, origin, openOnly]); return { results, origin, setOrigin, openOnly, setOpenOnly, selected, setSelected }; } // Map pins and list rows both call setSelected(store.id); both read selected // to highlight, which keeps the list and the map in step. `; /* ---------- SVG map projection ---------- */ const W = 640; const H = 440; const BOUNDS = { minLat: 52.004, maxLat: 52.064, minLng: -1.052, maxLng: -0.948 }; const px = (lat: number, lng: number) => ({ x: ((lng - BOUNDS.minLng) / (BOUNDS.maxLng - BOUNDS.minLng)) * W, y: ((BOUNDS.maxLat - lat) / (BOUNDS.maxLat - BOUNDS.minLat)) * H, }); type Tab = "data" | "jsonld" | "vanilla" | "react"; const TABS: { k: Tab; label: string }[] = [ { k: "data", label: "stores.json" }, { k: "jsonld", label: "LocalBusiness JSON-LD" }, { k: "vanilla", label: "Vanilla JS" }, { k: "react", label: "React hook" }, ]; export default function StoreLocatorCollection() { const [query, setQuery] = useState(""); const [origin, setOrigin] = useState(PLACES[0]); const [message, setMessage] = useState(`Showing stores nearest ${PLACES[0].label}.`); const [openOnly, setOpenOnly] = useState(false); const [selected, setSelected] = useState("market"); const [tab, setTab] = useState("jsonld"); const [copied, setCopied] = useState(false); const [showAll, setShowAll] = useState(false); const listRef = useRef(null); const tabRefs = useRef<(HTMLButtonElement | null)[]>([]); const now = useMemo(() => new Date(), []); const results = useMemo( () => STORES.map((s) => ({ s, km: distanceKm(origin.lat, origin.lng, s.lat, s.lng), st: openState(s, now) })) .filter((r) => !openOnly || r.st.open) .sort((a, b) => a.km - b.km), [origin, openOnly, now], ); const sel = STORES.find((s) => s.id === selected) ?? STORES[0]; function search(e: FormEvent) { e.preventDefault(); const q = query.trim().toLowerCase().replace(/\s+/g, " "); if (!q) return; const hit = PLACES.find((p) => p.keys.some((k) => k.startsWith(q) || q.startsWith(k))); if (!hit) { setMessage(`No match for "${query}". Try a town such as Millbrook or a postcode start such as KQ1.`); return; } setOrigin(hit); const first = STORES.map((s) => ({ s, km: distanceKm(hit.lat, hit.lng, s.lat, s.lng) })).sort((a, b) => a.km - b.km)[0]; setSelected(first.s.id); setMessage(`Showing stores nearest ${hit.label}. Closest is ${first.s.name.split(", ")[1]}, ${first.km.toFixed(1)} km away.`); } function pick(id: string, fromMap: boolean) { setSelected(id); if (fromMap && listRef.current) { const row = listRef.current.querySelector(`[data-id="${id}"]`); if (row) listRef.current.scrollTo({ top: row.offsetTop - listRef.current.offsetTop - 8, behavior: "smooth" }); } } function pinKey(e: KeyboardEvent, id: string) { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); pick(id, true); } } function tabKey(e: KeyboardEvent, i: number) { const n = e.key === "ArrowRight" ? (i + 1) % TABS.length : e.key === "ArrowLeft" ? (i + TABS.length - 1) % TABS.length : -1; if (n < 0) return; e.preventDefault(); setTab(TABS[n].k); tabRefs.current[n]?.focus(); } const code = tab === "data" ? JSON.stringify(STORES, null, 2) + "\n" : tab === "jsonld" ? jsonLd(sel) : tab === "vanilla" ? VANILLA : REACT; async function copy() { try { await navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 1600); } catch { setShowAll(true); setMessage("Copy was blocked, the full code is shown so you can select it."); } } const o = px(origin.lat, origin.lng); const ring = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-700 focus-visible:ring-offset-2"; return (

Store locator · no plugin · no map library

Find a Fieldstone store

Search a town or postcode. Results sort by straight-line distance and show which stores are open right now.

{message}

No store is open at this hour. Clear "Open now only" to see them all.
{on && (
{/* Demo link. Real one: Google Maps dir/?api=1&destination=LAT,LNG or Apple Maps ?daddr=LAT,LNG */} Directions Call {s.phone}
)}

Illustrated map of an invented town, drawn in SVG

{TABS.map((t, i) => ( ))}

{tab === "jsonld" &&

Structured data for the selected store, {sel.name.split(", ")[1]}. Put one block on each store's own page.

}

              {code}

); } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L61",null,{"files":[{"path":"components/we-inc/store-locator-collection-with-svg-map-postcode-search-distance-sort-open-now-and-localbusiness-schema.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]