Mapvx Web Components


A collection of interactive map components built with Lit and TypeScript.

Features

- Interactive map visualization
- Floor navigation
- Route generation
- Accessibility support
- QR mode

Installation

$3

``bash
npm install @mapvx/web-components
`

$3

`
https://unpkg.com/@mapvx/web-components/dist/iife/
`

Service Worker (cache de tiles/assets)

Los componentes registran automáticamente un Service Worker en /mvx-tiles-sw.js si existe en la raíz del sitio (HTTPS).

- Última versión lista para copiar: https://unpkg.com/@mapvx/web-components@latest/dist/sw/mvx-tiles-sw.js
- Estrategia: PBF en CacheFirst (24h) y otros assets en StaleWhileRevalidate para dominios .mapvx.com y .lazarillo.app.

Guía completa (scripts para Drupal, ejemplos y snippet del SW) en la documentación: ver docs/pages/es/examples.mdx o docs/pages/en/examples.mdx.

Build Structure

`
dist/
├── es/ # Build for ES modules
│ ├── index.js
│ ├── map-view-with-modal.js
│ ├── route-view-totems.js
│ └── assets/
├── cjs/ # Build for CommonJS
│ ├── index.cjs
│ ├── map-view-with-modal.cjs
│ └── route-view-totems.cjs
├── iife/ # Build for IIFE
│ ├── route-view-totems.js
│ └── map-view-with-modal.js
└── sw/
└── mvx-tiles-sw.js
`

The build directory structure is organized as follows:

- dist/es/: Contains the ES (ECMAScript) modules build. Includes the main components and an assets/ folder with required resources.

- dist/cjs/: Contains the CommonJS build, which allows using the components in Node.js environments.

- dist/iife/: Contains the IIFE (Immediately Invoked Function Expression) build, which encapsulates all code in a self-executing function to avoid polluting the global scope.

- dist/sw/: Contains the Service Worker file that you can copy to your site's root.

Available Components

$3

A totem view for routes with QR code and animated route generation option. Includes origin and destination markers.

$3

A map view that only shows the destination marker.

Usage

$3

`javascript
// Import components
import '@mapvx/web-components/cjs/index.cjs';

// Use in your HTML
apiKey="your-api-key"
parentPlaceId="your-venue-id"
destinationId="your-destination-id"
...
>

apiKey="your-api-key"
parentPlaceId="your-venue-id"
...
>
`

$3

#### route-view-totems

`html




apiKey="your-api-key"
parentPlaceId="your-venue-id"
destinationId="your-destination-id"
...
>
`

#### map-view-with-modal

`html


apiKey="your-api-key"
parentPlaceId="your-venue-id"
placeId="your-place-id"
...
>
``

License

This project is under Private License - only clients of Mapvx can use it.