MapVX Web Components is a web components library that provides interactive and accessible mapping solutions. Built with Lit, it offers a modern, lightweight, and framework-agnostic way to integrate maps into any web application.

A collection of interactive map components built with Lit and TypeScript.
- Interactive map visualization
- Floor navigation
- Route generation
- Accessibility support
- QR mode
``bash`
npm install @mapvx/web-components
``
https://unpkg.com/@mapvx/web-components/dist/iife/
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.mapvx.com
- Estrategia: PBF en CacheFirst (24h) y otros assets en StaleWhileRevalidate para dominios 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.
``
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.
A totem view for routes with QR code and animated route generation option. Includes origin and destination markers.
A map view that only shows the destination marker.
`javascript
// Import components
import '@mapvx/web-components/cjs/index.cjs';
// Use in your HTML
parentPlaceId="your-venue-id"
destinationId="your-destination-id"
...
>
parentPlaceId="your-venue-id"
...
>
`
#### route-view-totems
`html
parentPlaceId="your-venue-id"
destinationId="your-destination-id"
...
>
`
#### map-view-with-modal
`html
parentPlaceId="your-venue-id"
placeId="your-place-id"
...
>
``
This project is under Private License - only clients of Mapvx can use it.