@eviav/maps

Cliente JavaScript oficial de Eviav Maps — wrapper sobre MapLibre GL JS con autenticación, helpers y branding Eviav incluidos.

npm install @eviav/maps

Quickstart

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

const map = new EviavMap({
  container: "map",
  apiKey: import.meta.env.VITE_EVIAV_API_KEY,
  style: "streets",         // 'streets' | 'satellite' | 'terrain' | 'hybrid' | URL custom
  center: [-78.48, -0.18],  // [lon, lat]
  zoom: 12,
});

// Helpers Eviav:
map.addEviavMarkers([
  { lon: -78.48, lat: -0.18, label: "Quito centro" },
  { lon: -78.51, lat: -0.22, label: "Aeropuerto" },
]);

await map.addEviavRoute([
  [-78.51, -0.22],
  [-78.48, -0.18],
]);

API

new EviavMap(options)

Extiende maplibre-gl.Map. Todas las opciones, métodos, eventos y plugins de MapLibre siguen disponibles.

Opciones extra de Eviav:

• apiKey (string, requerido) — API key con scope tiles mínimo. Restringí dominios en el dashboard.
• style (string, opcional) — "streets", "satellite", "terrain", "hybrid" o URL absoluta. Default: "streets".
• baseUrl (string, opcional) — Base URL del API. Default: "https://api.eviav.com".

map.addEviavMarkers(markers)

Agrega N markers al mapa de una. Cada marker: { lon, lat, label?, color? }. Devuelve los Marker para poder removerlos.

await map.addEviavRoute([[lon, lat], [lon, lat], …])

Pide una ruta a /v1/directions con la misma API key, la dibuja como línea naranja Eviav, y centra el viewport.

map.fitBoundsToCoords(coords, { padding? })

Centra el viewport para que contenga todas las coordenadas dadas.

MapLibre re-exportado

Todo el API de MapLibre está disponible via la misma instancia:

map.addSource("custom", { type: "geojson", data: { ... } });
map.addLayer({ id: "custom-layer", type: "fill", source: "custom", ... });
map.on("click", "custom-layer", (e) => { console.log(e.features); });

Y también podés importar utilidades de MapLibre desde @eviav/maps:

import { Popup, NavigationControl, GeolocateControl } from "@eviav/maps";

Seguridad — API key en el browser

Para apps web, usá una API key con scope tiles únicamente y configurá restricción de dominio en el dashboard Eviav. Una key con scopes completos NUNCA debe ir al browser.

Para geocoding, routing, places, etc., usá @eviav/api-client desde tu backend.

Recursos

• 📖 Documentación completa: https://eviav.com/docs
• 💬 Soporte: [email protected]
• 🐛 Issues: https://github.com/eviav-platform/sdk-js/issues

Licencia

MIT