A Store Locator for BookNest

The new /stores route, linked from the cart as Find a bookshop, lists three fictional BookNest shops on real streets near the emulator's default position (the Googleplex in Mountain View). src/stores/data.ts holds them and a haversine distanceKm(), the great-circle distance on a 6,371 km sphere. The screen asks for the position once, sorts the shops by distance, puts a marker on the map for each, and frames them all with fitToCoordinates() in onMapReady:

src/app/stores.tsx: position, sorting, and the map (excerpt)TSX

      const { status } = await Location.requestForegroundPermissionsAsync();
      console.log('location permission:', status);
      if (status !== 'granted') return setNote('Location is off: showing every shop.');
      const { coords } = await Location.getCurrentPositionAsync({
        accuracy: Location.Accuracy.Balanced });
// ...
  const sorted = useMemo(() => here
    ? [...stores].sort((a, b) => distanceKm(here, a) - distanceKm(here, b)) : stores, [here]);
// ...
      <MapView ref={map} style={{ flex: 1 }} provider={PROVIDER_GOOGLE} showsUserLocation
// ...
        {stores.map((s) => (
          <Marker key={s.id} ref={(m) => { markers.current[s.id] = m; }} coordinate={s}
            title={s.name} description={s.address} pinColor="#1565c0" />
        ))}

Tapping a row calls animateToRegion() and showCallout() for that shop. On the emulator the list worked and the map, as react-native-maps Fundamentals explained, stayed empty:

Android's location prompt, and the store locator with its list sorted by distance (the map needs a Google API key)

Output of 213

map ready
'location permission:', 'granted'
'you are at', '37.4220', '-122.0841'

The distances, 3.2, 7.3 and 16.5 km, are straight lines, not driving routes; say so in the interface, or call a routing service when it matters. A valid key is the only missing piece; the code stays the same.

MENU

A Store Locator for BookNest