Atributos

<mapvx-website> recibe 11 entradas. Cada una está disponible como atributo HTML (kebab-case) y como propiedad JavaScript (camelCase) del elemento.

<mapvx-website
  api-key="YOUR_API_KEY"
  institution-id="YOUR_INSTITUTION_ID"
  default-to-map="true"
  show-city-filter="false"
  rows-per-page="3"
></mapvx-website>

Todos los atributos

• Escribe los nombres de los atributos en kebab-case. HTML convierte los nombres de atributos a minúsculas, así que defaultToMap="true" se convierte en defaulttomap y se ignora. Los nombres en camelCase solo funcionan como propiedades JavaScript.
• En HTML todos los valores son strings. Los booleanos y los números se interpretan como se explica en Atributos booleanos y Atributos numéricos.
• No hay otras entradas. El texto de la interfaz está solo en inglés, la posición y el zoom iniciales del mapa vienen de tu configuración de MapVX, y los colores se definen con variables CSS.

api-key

Tu API key de MapVX. El componente la usa para cargar los lugares, la configuración y las instituciones, y el mapa, la búsqueda, el detalle de los lugares y las rutas dependen de ella.

• Se lee una sola vez. El primer valor no vacío, sin los espacios de los extremos, inicializa el SDK de MapVX y empieza a cargar los datos. Los cambios posteriores se ignoran hasta que se recarga la página: no se vuelve a inicializar nada ni se vuelven a pedir los datos. Una API key que llega tarde también funciona, por ejemplo cuando el atributo empieza vacío y tu código lo define después.
• Compartida por toda la página. El SDK es uno solo para toda la página, así que gana la primera API key que se usa. Quitar el elemento y volver a agregarlo no cambia a una API key nueva. Usa un solo <mapvx-website> por página: varios elementos comparten una misma aplicación y se interfieren entre sí (Solución de problemas).
• No se valida. Sin API key, o con una incorrecta, no se carga nada de MapVX: aparecen el cuadro de búsqueda y los botones Grid View / Map View, pero la lista queda vacía (salvo los lugares que pases en initial-data), el mapa queda en blanco y el componente no muestra ningún mensaje de error (Solución de problemas).
• Es pública. Cualquiera puede leer la API key en el HTML o los scripts de tu página. En Seguridad y privacidad se describe qué envía el componente a MapVX y a terceros.

institution-id

El id de la institución (un centro comercial, un campus, un hub…) que muestra el directorio. El componente funciona sin él, pero varias funciones dependen de este valor, así que defínelo.

Qué controla:

• Pestañas de categorías: provienen de las categorías de la institución cuyo id coincide exactamente.
• Alcance por ciudad: se selecciona la opción de ciudad cuyo id de institución coincide (o, si ninguna coincide, la que coincide por id de filtro), y la cuadrícula y la búsqueda se acotan a ella.
• Selector de ciudad: cuando la institución pertenece a una ciudad (un hub o un centro comercial dentro de una ciudad), solo se ofrece esa ciudad, y un selector con una sola ciudad se oculta.
• Enlaces profundos ?destination=: la pantalla de ruta completa el destino solo con un lugar que pertenece a la institución actual (Eventos).

Cuando está vacío o no coincide con nada, no se muestra ningún error ni advertencia, y:

• La ciudad pasa a ser la primera opción de ciudad de tu configuración.
• No aparecen pestañas de categorías hasta que el visitante elige una ciudad o abre un lugar.
• Un enlace profundo ?destination= abre la pantalla de ruta con el destino vacío.

Pasa el id exactamente como te lo dio MapVX: con las mismas mayúsculas y minúsculas, y sin espacios en los extremos. Solo se recorta al buscar la opción de ciudad: la búsqueda de la institución compara el valor tal cual, así que un id con un espacio al inicio selecciona su ciudad pero no muestra pestañas de categorías.

Puedes cambiarlo en cualquier momento: las pestañas de categorías, el alcance por ciudad y el edificio del mapa se actualizan. Una ciudad que el visitante eligió a mano se reemplaza cuando cambia el atributo, y un id que no coincide con ninguna institución cargada conserva las pestañas de categorías anteriores. No quites el atributo; asígnale '' en su lugar (Quitar atributos).

initial-data

Un string JSON con datos que tu servidor obtuvo por adelantado, para que las tarjetas de lugares aparezcan antes de que terminen las solicitudes del propio componente. Genéralo con prepareInitialData de @mapvx/web-components-ssr-helpers y pasa el string que devuelve sin modificarlo (SSR y datos iniciales).

• Forma: el JSON de { availablePlaces, institutions } (tipo InitialData). Las demás claves se ignoran.
• Un string, no un objeto: como propiedad, pasa el string JSON. Un objeto lanza un TypeError dentro del componente.
• El JSON inválido se ignora sin ningún mensaje en la consola, y el componente carga desde la API como siempre.
• No reemplaza a la API: con api-key definida, el componente pide de todos modos los lugares, la configuración y las instituciones a MapVX. api-key sigue siendo obligatoria, porque el mapa, la búsqueda, el detalle de los lugares y las rutas la necesitan.
• Se vuelve a interpretar al cambiar: cada valor nuevo no vacío se interpreta. Los lugares se agregan a la lista, no la reemplazan; las instituciones reemplazan la lista anterior. La institución cuyo id es exactamente igual a institution-id pasa a ser la actual.

default-to-map

"true" abre el directorio en la vista de mapa; cualquier otro valor abre la cuadrícula. Solo decide la primera vista para los visitantes que todavía no eligieron una.

Vista recordada

Desde la versión 1.6.0, cuando un visitante hace clic en Grid View o Map View, la elección se guarda en localStorage con la clave mapvx:active-view y el valor grid o map. Desde ese momento:

• La vista guardada tiene prioridad sobre default-to-map en cada carga posterior, y cambiar default-to-map en tiempo de ejecución no tiene ningún efecto visible.
• La clave pertenece a tu origen, no a una página ni a una institución: todas las páginas y todos los <mapvx-website> del mismo origen la comparten.
• Si el almacenamiento no está disponible (navegación privada, datos del sitio bloqueados), la elección no se recuerda y default-to-map se aplica en cada carga.

Para probar default-to-map, borra la clave en las herramientas para desarrolladores del navegador, o ejecuta localStorage.removeItem('mapvx:active-view') y recarga. Para que default-to-map gane siempre, borra la clave antes de que se cree el elemento. Esto descarta la elección del visitante en cada carga:

<script>
  try {
    localStorage.removeItem('mapvx:active-view')
  } catch {}
</script>
<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>
 
<mapvx-website
  api-key="YOUR_API_KEY"
  institution-id="YOUR_INSTITUTION_ID"
  default-to-map="true"
></mapvx-website>

En Seguridad y privacidad se enumera todo lo que el componente guarda en el navegador.

show-category-filters

Valor por defecto true. Muestra la fila de categorías sobre la cuadrícula y filtra la lista según las categorías prendidas.

• Cada categoría es un botón que se prende y se apaga por su cuenta, y pueden estar varias prendidas a la vez. Un lugar que esté en cualquiera de las elegidas aparece listado: se suman, no se restringen entre sí.
• Al inicio no hay ninguna prendida, lo que significa sin filtrar por categoría: la lista muestra todos los lugares del alcance por ciudad actual. All se ofrece como forma de apagar el resto, no como una categoría que se guarde.
• Las categorías son las de la institución actual, que al inicio es la que coincide con institution-id. Sin una institución que coincida no hay nada que mostrar.
• Las categorías sin lugares que mostrar se omiten, y la fila se oculta cuando solo queda All, porque no habría nada que tildar. Una categoría que deja de estar en oferta también deja de estar seleccionada.
• Un parámetro ?tab= en la query string prende categorías concretas, varias separadas por comas (Eventos).
• "false" oculta la fila y desactiva el filtrado por categoría. Para conservar el filtrado pero dibujar el control por tu cuenta, ocultá la fila y manejala con selected-categories.

show-city-filter

Valor por defecto true. Muestra el selector de ciudad en el encabezado (un ícono de filtro en los diseños angostos) y acota la cuadrícula y el mapa a la ciudad seleccionada.

• El selector aparece solo cuando hay al menos dos ciudades disponibles. Con una sola ciudad se oculta, pero la lista sigue acotada a esa ciudad.
• "false" oculta el selector pero mantiene el alcance: la cuadrícula y el mapa siguen acotados a la ciudad en alcance, que sin nada elegido es la primera configurada. Ocultar un control no amplía lo que lista un embed. La búsqueda sigue acotada a esa misma ciudad.
• Para mover el alcance desde un control propio, escuchá citiesChange y escribí el id que te entrega en institution-id.

show-view-toggle

Valor por defecto true. Muestra el conmutador Grid View / Map View a la derecha del encabezado.

• "false" oculta el conmutador. La vista pasa a seguir a default-to-map, y se ignora la vista recordada, así que la vista es la que pediste y no la última que eligió el visitante.
• Combínalo con default-to-map="true" para fijar el componente en el mapa, o deja default-to-map sin definir para fijarlo en la cuadrícula.

show-search-bar

Valor por defecto true. Muestra la barra de búsqueda a la izquierda del encabezado.

• "false" oculta la barra y deja la búsqueda fuera de alcance, así que también se ignora el parámetro ?search=. Los demás enlaces profundos siguen funcionando.
• La fila del encabezado desaparece por completo cuando la barra de búsqueda, el selector de ciudad y el conmutador de vista están ocultos, así que no queda una barra vacía sobre el contenido.

show-drop-pin

Por defecto false. Con "true" se muestra el botón que arma el mapa para dejar un pin de origen, arriba de la columna de botones del mapa, en el directorio y en el perfil de un lugar.

• Apagado por defecto, a diferencia de los demás atributos show-*: el botón es nuevo, así que un embed lo recibe solo cuando la página lo pide.
• Tocar el botón arma el mapa, y queda armado: el primer toque sobre el mapa deja el pin y cada toque posterior lo mueve, así que el visitante lo corrige tocando en otro lado igual que arrastrándolo. Volver a tocar el botón es lo que desarma el mapa y lo devuelve a abrir lugares.
• El pin se usa como origen al abrir una ruta.
• Volver a apagarlo saca solo el botón. Un pin ya puesto se queda donde está, y la pantalla de ruta sigue dejando elegir el origen tocando su propio mapa.
• El botón no está en el mapa de la pantalla de ruta a propósito: ahí cualquier toque ya se toma como origen.

zoom

Por defecto, el zoom configurado para el lugar. El nivel de zoom con el que abre el mapa.

• Para un host que embebe el mismo lugar a más de una escala: una vista general en una landing, un acercamiento al lado de un lugar puntual.
• Si lo cambiás después de cargar, el mapa se mueve hasta ahí, así que el host puede manejar la cámara desde controles propios.
• Los límites de zoom configurados para el lugar siguen aplicando.
• Un valor que no es un número se ignora, y manda el zoom configurado.
• Para seguir el zoom en vez de fijarlo —un pellizco, los botones internos, el encuadre sobre los lugares de una ciudad— escuchá zoomChange. Devolver a este atributo lo que informa no mueve nada, así que un control propio puede ser lectura además de entrada.

center

Por defecto, el centro configurado para el lugar. Dónde se centra el mapa, como lat,lng.

<mapvx-website api-key="TU_KEY" zoom="17" center="42.3314,-83.0458"></mapvx-website>

• También acepta un objeto { lat, lng }, para un host que setea la propiedad en vez del atributo: el.center = { lat: 42.3314, lng: -83.0458 }.
• Las dos mitades tienen que poder leerse. Un 42.3314 solo se ignora en vez de tomarse como latitud: a una coordenada a la que le falta una mitad no apunta ni cerca del lugar.
• El botón de centrar el mapa vuelve acá y no al centro configurado, así que devuelve al visitante a la vista con la que abrió el embed.
• Para que el mapa siga al pin que deja el visitante, escuchá droppedPinChange y devolvé acá la coordenada que trae.
• Para poner el pin en la coordenada con la que abre el mapa, seteá además dropped-pin. Centrar solo deja el mapa vacío.

dropped-pin

Por defecto, ninguno: el pin lo sigue poniendo el visitante. Dónde está el pin, como lat,lng.

<mapvx-website
  api-key="TU_KEY"
  center="42.3314,-83.0458"
  dropped-pin="42.3314,-83.0458"
></mapvx-website>

• Es la mitad que escribe de droppedPinChange, para un pin que el visitante nunca tocó: una coordenada escrita en un campo propio, un resultado elegido en tu propio buscador, un lugar que viene de otra página.
• También acepta un objeto { lat, lng }, para un host que setea la propiedad en vez del atributo: el.droppedPin = { lat: 42.3314, lng: -83.0458 }.
• Las dos mitades tienen que poder leerse, igual que en center. Un valor vacío o ilegible deja en paz lo que ya está en el mapa, así que un embed que nunca lo setea se comporta como siempre.
• Devolverle directo lo que informa droppedPinChange es seguro. Un pin que ya está en esa coordenada no es un movimiento, así que el atributo y el mapa no se persiguen.
• Pone el pin sin mover la cámara. Para abrir también sobre el pin, dale a center la misma coordenada.
• El pin no necesita show-drop-pin. Ese atributo muestra el botón con el que el visitante deja un pin; este pone el pin directamente.

selected-categories

Por defecto vacío. Las categorías por las que se filtra el directorio, como una lista de nombres separados por comas.

Para un host que dibuja su propio control de categorías —casillas propias, por ejemplo— en lugar de la fila interna. Escondé esa fila con show-category-filters="false", escuchá categoriesChange para saber qué nombres ofrecer, y devolvé acá los elegidos.

<mapvx-website
  api-key="TU_KEY"
  show-category-filters="false"
  selected-categories="Shopping,Hotels"
></mapvx-website>

• Varias categorías se suman: un lugar que esté en cualquiera de ellas aparece listado.
• Vacío significa sin filtrar por categoría, y All también: es la entrada que representa “sin filtro”, no una categoría propia.
• Los nombres que no están en oferta se descartan, en vez de vaciar el directorio. Los espacios alrededor de las comas se ignoran.
• Fija el filtro, no lo congela. Si dejás visible la fila interna, el visitante puede cambiar la selección desde ahí, y select-filter lo informa.

search-term

Por defecto vacío. Ejecuta una búsqueda con ese término, para un host que pone su propia caja de búsqueda fuera del componente.

<mapvx-website api-key="TU_KEY" show-search-bar="false" search-term="coffee"></mapvx-website>

• Al asignarlo se abre la vista de búsqueda con el término; al vaciarlo se limpia la búsqueda y se vuelve al directorio.
• A diferencia del enlace profundo ?search=, funciona con show-search-bar="false": un host que esconde la barra interna para poner la suya igual tiene que poder buscar.
• No pelea con la barra interna. Si el visitante escribe ahí, la búsqueda cambia sin que cambie este atributo, y el componente sigue al visitante.

full-width-map

Valor por defecto false. Solo afecta a la vista de mapa.

• "true" oculta la lista de tarjetas que acompaña al mapa y deja que el mapa ocupe todo el ancho del componente.
• La vista de cuadrícula no cambia: allí la lista de tarjetas es la vista misma, así que nunca se oculta.
• Para incrustar solo el mapa, combínalo con default-to-map="true" y show-view-toggle="false".

hide-unselected-markers

Valor por defecto false. Solo afecta al mapa mientras hay un perfil de lugar abierto.

• "true" deja en el mapa únicamente el marcador del lugar abierto y oculta todos los demás, así el visitante ve dónde está ese lugar sin los vecinos alrededor.
• Los otros marcadores se ocultan, no se quitan, así que volver a la lista los trae de vuelta sin recargar nada.
• Cambiarlo con un perfil ya abierto surte efecto de inmediato sobre ese perfil, en ambos sentidos.

hide-deals y show-deal-labels

Los lugares pueden tener banners etiquetados como ofertas o eventos.

• hide-deals (por defecto false): "true" oculta la sección Deals + Events de los perfiles de lugares y la etiqueta de las tarjetas. Tiene prioridad sobre show-deal-labels.
• show-deal-labels (por defecto false): "true" muestra una etiqueta Deals + Events sobre la imagen de la tarjeta de los lugares que tienen uno de esos banners, una vez que la imagen terminó de cargar. No tiene efecto mientras hide-deals sea "true".

Con ambos valores por defecto, los perfiles de lugares muestran la sección de ofertas y las tarjetas no muestran ninguna etiqueta.

inherit-font-family

Valor por defecto false: el texto usa 'Open Sans', sans-serif, salvo dentro de algunos botones, como se explica más abajo. El paquete no carga Open Sans, así que, a menos que tu página la cargue o el visitante la tenga instalada, se usa la fuente sans-serif por defecto del navegador (Personalización).

"true" cambia el componente a font-family: inherit, así que usa la familia tipográfica que <mapvx-website> hereda de tu página (o la que le asignes). Solo cambia la familia: los tamaños y los pesos de la fuente siguen siendo los del componente. Las etiquetas del mapa las dibuja el mapa y no cambian.

Con cualquiera de los dos valores, el texto dentro de muchos botones del componente (por ejemplo, los títulos y las direcciones de las tarjetas de lugares, las etiquetas Back, la ciudad seleccionada en el selector de ciudad, los botones Pedestrian-friendly directions y Start Route, y los controles de la ruta) usa la fuente por defecto que el navegador les da a los botones, porque el componente no define una familia tipográfica en esos botones. A menos que tu CSS ya defina font-family: inherit en los botones, como hacen muchos resets de CSS, agrega esta regla para que ese texto también siga la fuente del componente (Fuentes):

mapvx-website button {
  font-family: inherit;
}

card-width

El ancho mínimo de una columna de tarjetas en la cuadrícula, en píxeles, escrito sin unidad. Las tarjetas se estiran para llenar cada fila, así que normalmente son más anchas que este valor.

• Sin definir: 237 px, o 170 px cuando el propio componente mide 640 px de ancho o menos. El punto de quiebre es el ancho del componente, no el del viewport (Personalización).
• Un valor personalizado reemplaza ambos valores por defecto, así que el diseño angosto también lo usa.
• También determina cuántas tarjetas caben en una fila y, por lo tanto, cuántas tarjetas tiene una página.
• 0, los valores negativos y los no numéricos usan el valor por defecto (Atributos numéricos).

rows-per-page

Filas de tarjetas por página. El valor por defecto es 2 y se limita al rango de 1 a 10. Se aplica a la cuadrícula, a la lista de tarjetas de la vista de mapa y a los resultados de búsqueda.

Tarjetas por página = tarjetas que caben en una fila × rows-per-page. Una página muestra menos filas cuando no hay suficientes lugares.

Atributos booleanos

Once atributos son booleanos: show-category-filters, show-city-filter, show-view-toggle, show-search-bar, show-drop-pin, full-width-map, hide-unselected-markers, default-to-map, inherit-font-family, hide-deals y show-deal-labels. Un valor de tipo string es verdadero solo cuando es exactamente "true":

Un atributo sin valor es el error más común. show-category-filters y show-city-filter son verdaderos por defecto, así que <mapvx-website show-city-filter> desactiva el filtro de ciudad. Escribe siempre el valor.

Como propiedades JavaScript, los booleanos reales se usan tal cual (el.showCityFilter = false) y los strings se interpretan igual que los atributos. Los demás valores no se convierten (por ejemplo, 1 cuenta como verdadero), así que pasa booleanos.

Bindings en frameworks

Cada framework convierte los valores booleanos en atributos a su manera. Los strings "true" y "false" funcionan en todos.

<!-- Correcto -->
<mapvx-website default-to-map="true" show-city-filter="false"></mapvx-website>
 
<!-- Incorrecto: ambos atributos valen "", que se lee como falso -->
<mapvx-website default-to-map show-category-filters></mapvx-website>

// React 19 renderiza {true} como default-to-map="" (falso) y omite {false},
// así que se aplica el valor por defecto. Pasa strings:
<mapvx-website default-to-map="true" show-city-filter="false" />
 
// Desde una variable
<mapvx-website default-to-map={String(showMap)} />

<script setup>
import { ref } from 'vue'
 
const showMap = ref(true)
</script>
 
<template>
  <!-- Vue escribe los booleanos enlazados como "true" y "false" -->
  <mapvx-website :default-to-map="showMap" :show-city-filter="false" />
</template>

import { Component, CUSTOM_ELEMENTS_SCHEMA, signal } from '@angular/core'
 
@Component({
  selector: 'app-directory',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <mapvx-website
      [attr.default-to-map]="showMap()"
      [attr.show-city-filter]="false"
    ></mapvx-website>
  `,
})
export class DirectoryComponent {
  showMap = signal(true)
}

Con cualquier otro framework, inspecciona el elemento renderizado en las herramientas para desarrolladores del navegador y comprueba que cada atributo booleano contenga el string "true" o "false".

Atributos numéricos

card-width y rows-per-page interpretan los strings con parseInt: el valor se lee hasta el primer carácter que no es un dígito, y los decimales se truncan.

Como propiedades JavaScript, los números no se redondean. cardWidth conserva los decimales, y rowsPerPage se limita al rango de 1 a 10 pero no se redondea, así que pasa números enteros. El cero y los números negativos usan los valores por defecto, igual que con los strings.

Tus propios controles

La caja de búsqueda y la fila de categorías se pueden reemplazar por controles propios: para que sigan el diseño de tu sitio, para ponerlos en otro lugar de la página, o para combinarlos con filtros que el componente no conoce. Ocultá los internos y manejá el componente por su API pública.

Son tres piezas:

<input id="q" type="search" placeholder="Buscar lugares…" />
<div id="categories"></div>
 
<mapvx-website
  id="directory"
  api-key="TU_API_KEY"
  institution-id="TU_INSTITUTION_ID"
  show-search-bar="false"
  show-category-filters="false"
></mapvx-website>

const directory = document.querySelector('#directory')
const selected = new Set()
 
// 1. Dibujar una casilla por categoría, con la lista que resuelve el componente.
directory.addEventListener('categoriesChange', (event) => {
  const categories = event.detail.filter((category) => category.name !== 'All')
 
  // Una categoría que ya no se ofrece tiene que dejar de estar seleccionada.
  for (const name of selected) {
    if (!categories.some((category) => category.name === name)) selected.delete(name)
  }
 
  document.querySelector('#categories').replaceChildren(
    ...categories.map((category) => {
      const label = document.createElement('label')
      const box = document.createElement('input')
      box.type = 'checkbox'
      box.checked = selected.has(category.name)
      box.addEventListener('change', () => {
        box.checked ? selected.add(category.name) : selected.delete(category.name)
        // 2. Devolver la selección completa.
        directory.setAttribute('selected-categories', [...selected].join(','))
      })
      label.append(box, category.name)
      return label
    }),
  )
})
 
// 3. Búsqueda.
document.querySelector('#q').addEventListener('input', (event) => {
  directory.setAttribute('search-term', event.target.value)
})

• Dejá que el componente resuelva las categorías. categoriesChange informa la lista que realmente ofrece: las categorías cuyos lugares esta API key nunca devuelve ya vienen descartadas, y All ya viene agregado. Deducirlo por tu cuenta desde initial-data implica reproducir reglas que pueden cambiar.
• All no es una casilla. Vaciar la selección significa lo mismo, así que un botón de “limpiar” suele ser mejor control. Si igual la dibujás, tildala cuando no haya ninguna otra prendida.
• Los dos controles pueden convivir. Dejar visible la fila interna está bien: si el visitante la cambia, se emite select-filter con filters, que podés usar para mantener tus casillas al día.
• Limpiar. Un selected-categories vacío significa sin filtro de categoría; un search-term vacío limpia la búsqueda y vuelve al directorio.

Propiedades JavaScript

Cada atributo tiene una propiedad en camelCase en el elemento (consulta la tabla). Las propiedades son cómodas cuando los valores vienen de tu código; los atributos también cubren todas las opciones.

const el = document.createElement('mapvx-website')
el.apiKey = 'YOUR_API_KEY' // string; solo se usa el primer valor no vacío
el.institutionId = 'YOUR_INSTITUTION_ID' // string
el.defaultToMap = true // los booleanos se usan tal cual
el.showCityFilter = false
el.cardWidth = 280 // ancho mínimo de columna en px
el.rowsPerPage = 3 // limitado a 1–10
// el.initialData = initialDataJson // string JSON de prepareInitialData, no un objeto
document.querySelector('#directory').append(el)

• Tipos: apiKey, institutionId e initialData deben ser strings: un número o un objeto lanza un TypeError dentro del componente. Los booleanos aceptan true o false, y cardWidth y rowsPerPage aceptan números o strings numéricos.
• Antes de que el elemento esté definido: puedes asignar propiedades antes de que main.js registre <mapvx-website>, en un elemento que ya está en la página o en uno que creaste. Los valores se aplican cuando el navegador actualiza el elemento (upgrade). Para ejecutar código después del registro, consulta Instalación.
• Lectura: cuando el elemento ya está en la página y en funcionamiento, una propiedad devuelve el valor interpretado (por ejemplo, rowsPerPage devuelve 10 después de asignarle '15'). Antes de eso, devuelve el valor que asignaste.
• Sin reflejo en el atributo: asignar una propiedad no cambia el atributo, así que getAttribute() sigue devolviendo el valor anterior. Define cada entrada de una sola forma, como atributo o como propiedad.
• TypeScript: el paquete no incluye un tipo para el elemento. Declara uno como se muestra en Tipos TypeScript.
• React 19: una prop en camelCase como apiKey se asigna como propiedad solo si el elemento ya está definido cuando React renderiza. Si no, React escribe un atributo en minúsculas (apikey), que el componente ignora. Usa atributos en kebab-case en JSX.

Cambios después de la inicialización

Los cambios de atributos y propiedades se aplican sin ninguna llamada adicional. Algunas entradas solo importan al inicio:

Quitar atributos

Quitar un atributo no restaura su valor por defecto: el componente recibe null.

Los bindings de los frameworks también quitan atributos: los de React, los de Vue y los bindings [attr.*] de Angular quitan un atributo cuando su valor enlazado pasa a ser null o undefined (React 19 también lo quita con false). Mantén definidos los valores enlazados.

const el = document.querySelector('mapvx-website')
 
// Evita esto: lanza un TypeError dentro del componente
el.removeAttribute('institution-id')
 
// En su lugar
el.setAttribute('institution-id', '') // la ciudad pasa a la primera opción
el.setAttribute('show-city-filter', 'true') // vuelve al valor por defecto

Con institution-id en '', el alcance por ciudad pasa a la primera opción de ciudad y se mantienen las pestañas de categorías de la institución anterior. Consulta también Solución de problemas.

Ejemplo completo

Todos los atributos salvo initial-data (que normalmente renderiza tu servidor), incluidos los que quedan con su valor por defecto, y la misma configuración como propiedades:

<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"
  show-category-filters="true"
  show-city-filter="false"
  show-view-toggle="true"
  show-search-bar="true"
  show-drop-pin="true"
  selected-categories=""
  search-term=""
  full-width-map="false"
  hide-unselected-markers="false"
  default-to-map="false"
  inherit-font-family="true"
  hide-deals="false"
  show-deal-labels="true"
  card-width="260"
  rows-per-page="3"
></mapvx-website>

// La página también carga main.js y styles.css, como en la pestaña HTML.
// Este código puede ejecutarse antes o después de que main.js registre el elemento.
const el = document.createElement('mapvx-website')
el.apiKey = 'YOUR_API_KEY'
el.institutionId = 'YOUR_INSTITUTION_ID'
el.showCategoryFilters = true
el.showCityFilter = false
el.showDropPin = true
el.selectedCategories = '' // o 'Shopping,Hotels'
el.searchTerm = ''
el.defaultToMap = false
el.inheritFontFamily = true
el.hideDeals = false
el.showDealLabels = true
el.cardWidth = 260
el.rowsPerPage = 3
// el.initialData = initialDataJson // string JSON preparado en tu servidor
document.querySelector('#directory').append(el)

Fija en las URL la versión exacta que probaste (aquí 1.6.1). Para reaccionar a lo que hacen los visitantes, consulta Eventos; para cargar los datos en tu servidor, consulta SSR y datos iniciales.