Skip to Content
Introducción

Introducción

<mapvx-website> agrega a cualquier sitio web un directorio de lugares de MapVX con mapa de interiores. Los visitantes recorren y buscan los lugares de una institución (una ciudad, o un centro comercial o hub dentro de ella), abren el detalle de un lugar y obtienen indicaciones para llegar a pie en el mapa, sin salir de tu página.

Es un custom element estándar, así que funciona con HTML simple y con cualquier framework (React, Vue, Angular, Next.js, Nuxt, SvelteKit…). Se publica en npm como @mapvx/web-components-ssr. Esta documentación describe la versión 1.6.1, la actual.

Inicio rápido

<link
  rel="stylesheet"
  href="https://unpkg.com/@mapvx/web-components-ssr@1.6.1/dist/browser/styles.css"
/>
<script
  type="module"
  src="https://unpkg.com/@mapvx/web-components-ssr@1.6.1/dist/browser/main.js"
></script>
 
<style>
  mapvx-website {
    display: block;
    width: 100%;
  }
</style>
 
<mapvx-website api-key="YOUR_API_KEY" institution-id="YOUR_INSTITUTION_ID"></mapvx-website>

Reemplaza YOUR_API_KEY y YOUR_INSTITUTION_ID por los valores que te entregó MapVX, y fija la versión exacta que probaste. En Instalación se explican npm, el alojamiento propio y cada framework.

type="module" y styles.css son obligatorios: main.js es un módulo ES, y la hoja de estilos trae la configuración de colores y fuentes, los estilos del mapa y los de los íconos.

Qué incluye

  • Directorio: una cuadrícula paginada de tarjetas de lugares con pestañas de categorías, búsqueda y, cuando hay más de una ciudad, un filtro de ciudad. Los visitantes alternan entre la cuadrícula y una vista de mapa.
  • Perfil del lugar: imagen, categoría, el horario de hoy y el de toda la semana, ofertas y eventos, descripción, dirección, teléfonos y sitio web.
  • Mapa de interiores: marcadores de los lugares listados, un selector de piso dentro de los edificios con más de un piso, una brújula que muestra la rotación del mapa y controles de zoom, recentrado y ubicación actual.
  • Indicaciones: rutas a pie entre dos lugares, o desde la ubicación actual del visitante, con guía paso a paso y los pisos por los que pasa la ruta. El perfil del lugar también enlaza a indicaciones para llegar en auto en Google Maps.
  • Rutas desde un pin: un botón del mapa deja que el visitante ponga un pin en cualquier punto y lo arrastre, y la ruta arranca desde ahí en vez de desde un lugar listado. El pin se puede poner antes de elegir el destino, o después.
  • Puntos de integración: un evento userAction cuando los visitantes eligen una categoría, buscan, abren un lugar, piden indicaciones o vuelven a la pantalla de inicio, el evento heredado cardSelected para los clics en tarjetas, y enlaces profundos mediante parámetros de la query string.

Cómo funciona

  • El elemento es una aplicación Angular empaquetada como custom element. Cargas un módulo ES (main.js) y una hoja de estilos global (styles.css). Angular y el SDK de mapas vienen incluidos dentro de main.js, así que tu página no necesita ninguna otra biblioteca; main.js carga sus archivos chunk-*.js desde su propia carpeta cuando los necesita.
  • Se renderiza en el DOM normal de la página, no en un Shadow DOM: sus propios estilos están acotados, pero el CSS de tu página puede llegar a su interior. Consulta Aislamiento de estilos.
  • Solo se renderiza en el navegador. Los sitios con renderizado en el servidor pueden preparar el atributo initial-data en el servidor; consulta SSR y datos iniciales.
  • Al cargar main.js también se carga Google Analytics para MapVX, y el SDK de mapas incluido reporta sus errores a MapVX. Consulta Seguridad y privacidad.
  • La interfaz está en inglés.
  • Usa un solo <mapvx-website> por página: varios elementos comparten una misma aplicación (router, datos cargados, mapa y SDK) y se interfieren entre sí. Consulta Varias instancias.

Requisitos

  • Una API key y un id de institución entregados por MapVX.
  • Un navegador con custom elements, módulos ES y container queries de CSS. El mapa necesita WebGL; cuenta con que necesitarás WebGL2 (consulta Instalación).
  • Si tu sitio envía una Content Security Policy, permite las fuentes que se indican en Seguridad y privacidad.

Paquetes

PaqueteUso
@mapvx/web-components-ssrEl elemento <mapvx-website> y sus tipos TypeScript.
@mapvx/web-components-ssr-helpersHelper para el servidor que prepara el atributo initial-data.

Próximos pasos

Última actualización:
Instalación