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

NPM

npm install @mapvx/web-components

CDN (iife)

https://unpkg.com/@mapvx/web-components/dist/iife/<component>

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

route-view-totems

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

map-view-with-modal

A map view that only shows the destination marker.

Usage

CJS (Recommended)

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

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

<map-view-with-modal
  apiKey="your-api-key"
  parentPlaceId="your-venue-id"
  ...
></map-view-with-modal>

IIFE (CDN)

route-view-totems

<!-- Add the script -->
<script src="https://unpkg.com/@mapvx/web-components/dist/iife/route-view-totems.js"></script>

<!-- Use the components -->
<route-view-totems
  apiKey="your-api-key"
  parentPlaceId="your-venue-id"
  destinationId="your-destination-id"
  ...
></route-view-totems>

map-view-with-modal

<script src="https://unpkg.com/@mapvx/web-components/dist/iife/map-view-with-modal.js"></script>

<map-view-with-modal
  apiKey="your-api-key"
  parentPlaceId="your-venue-id"
  placeId="your-place-id"
  ...
></map-view-with-modal>

License

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