@eviav/maps-react

Componentes y hooks de React para Eviav Maps, sobre @eviav/maps (MapLibre GL JS).

npm install @eviav/maps-react @eviav/maps maplibre-gl react react-dom

Quickstart

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

export function App() {
  return (
    <EviavMap
      apiKey={process.env.NEXT_PUBLIC_EVIAV_API_KEY!}
      center={[-78.48, -0.18]}
      zoom={12}
      height={500}
    />
  );
}

SSR-safe: el mapa solo monta en el cliente, así que funciona con Next.js, Remix, etc.

Hooks

useEviavGeocoder(query, opts)

Autocompletado con debounce — ideal para un input de búsqueda de direcciones.

import { useEviavGeocoder } from "@eviav/maps-react";

function AddressSearch({ apiKey }: { apiKey: string }) {
  const [q, setQ] = useState("");
  const { results, loading } = useEviavGeocoder(q, { apiKey, lat: -0.18, lon: -78.48 });

  return (
    <>
      <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar dirección…" />
      {loading && <span>Buscando…</span>}
      <ul>{results.map((r) => <li key={r.place_id}>{r.label}</li>)}</ul>
    </>
  );
}

useEviavRoute(coordinates, opts)

Calcula la ruta entre 2+ puntos [lon, lat] y devuelve distancia, duración y geometría.

const { route, loading } = useEviavRoute(
  [[-78.51, -0.22], [-78.48, -0.12]],
  { apiKey, profile: "driving" }
);
// route.distance_m, route.duration_s, route.geometry

useEviavMap()

Dentro de <EviavMap>, accede a la instancia del mapa (la clase EviavMap de @eviav/maps, que extiende maplibregl.Map).

import { EviavMap, useEviavMap } from "@eviav/maps-react";

function RouteLayer() {
  const { map } = useEviavMap();
  useEffect(() => {
    map?.addEviavRoute([[-78.51, -0.22], [-78.48, -0.12]]);
  }, [map]);
  return null;
}

// <EviavMap apiKey={KEY}><RouteLayer /></EviavMap>

Licencia

MIT © Eviav