Store locator con Next.js y Eviav

En este tutorial armás un store locator: el usuario escribe su dirección, geocodificamos, calculamos la sucursal más cercana y la mostramos en un mapa Eviav.

1. Instalar

npm install @eviav/maps @eviav/api-client maplibre-gl

2. Geocodificar la dirección del usuario

import { EviavClient } from "@eviav/api-client";

const client = new EviavClient({ apiKey: process.env.EVIAV_API_KEY! });

const { results } = await client.geocode({ q: direccionDelUsuario });
const origen = { lat: results[0].lat, lon: results[0].lon };

3. Encontrar la sucursal más cercana

Con la lista de sucursales [{ id, lon, lat }], usá la matriz de tiempos para ordenar por proximidad real (no en línea recta):

const coords = [[origen.lon, origen.lat], ...sucursales.map(s => [s.lon, s.lat])];
const { durations } = await client.matrix({ coordinates: coords });
// durations[0] = tiempo desde el origen a cada sucursal
const idxMasCercana = durations[0]
  .slice(1)
  .reduce((best, d, i) => (d < durations[0][best + 1] ? i : best), 0);

4. Mostrar el mapa

import { EviavMap } from "@eviav/maps";
import "maplibre-gl/dist/maplibre-gl.css";

const map = new EviavMap({
  container: "map",
  apiKey: NEXT_PUBLIC_EVIAV_API_KEY,
  center: [origen.lon, origen.lat],
  zoom: 13,
});
map.addEviavMarkers([
  { lon: origen.lon, lat: origen.lat, label: "Vos", color: "#2F6DBE" },
  { lon: sucursal.lon, lat: sucursal.lat, label: sucursal.nombre },
]);

Listo

Tenés un store locator funcional. Para producción: cacheá el geocoding por dirección, y si tenés muchas sucursales usá /v1/isochrone para filtrar solo las que están dentro de X minutos antes de llamar a la matriz.