Mapa

Un mapa muestra las filas de una consulta como marcadores sobre un mapa dibujado con Leaflet: cada fila necesita una latitud y una longitud, y una etiqueta opcional que se abre al pulsar su marcador. Pulsar un marcador selecciona su fila. Debajo está el mapa real del cliente React de AWE. Pulsa los marcadores, arrastra y haz zoom en el mapa, y cambia los atributos: el XML de debajo se actualiza.

Vista previa en vivo

ClaroOscuro

Controles

Vista inicial

Ajustar a los marcadoresPenínsula ibéricaUna ciudad

Etiqueta del marcador

NingunaTiendaCiudad

XML

<map id="demo"
     marker-label="name"
     latitude="latitude"
     longitude="longitude"
     initial-load="query"
     target-action="Stores" />

Atributos

Los controles de arriba escriben estos atributos. La referencia lista todos los atributos, con su tipo y valor por defecto. Atributos en la referencia XSD

Atributo	Control	Valores
center-latitude, center-longitude and zoom	Vista inicial	fitiberiacity
marker-label	Etiqueta del marcador	namecity

Eventos y acciones

Evento	Descripción
select-row	Se pulsa un marcador: se selecciona su fila y se ejecutan las dependencias del mapa.

Acción (type)	Qué hace
filter	Recarga los marcadores desde la consulta del mapa, con los criterios de la pantalla.
polyline	Dibuja una ruta sobre el mapa en lugar de los marcadores.

Referencia completa

• Documentación completa de este componente
• Referencia XSD del elemento

Los datos son de ejemplo y las teselas necesitan red

En una pantalla, las filas vienen de una consulta (initial-load="query"). Aquí son 12 tiendas de una cadena inventada, colocadas en las coordenadas reales de sus ciudades. El mapa dibuja las teselas que usa el cliente por defecto, que son las de OpenStreetMap, así que necesita conexión a internet: sin ella, el fondo queda gris pero los marcadores siguen funcionando. Una aplicación puede usar sus propias teselas con el ajuste mapTileUrl.

Recetas

Tiendas con su nombre

marker-label es el campo de la fila que se abre en una burbuja al pulsar su marcador. latitude y longitude nombran los campos que guardan las coordenadas (latitude y longitude por defecto). Sin centro, el mapa se ajusta a todos los marcadores.

<map id="stores" latitude="latitude" longitude="longitude" marker-label="name"
     initial-load="query" target-action="Stores" />

Empezar en una ciudad

center-latitude, center-longitude y zoom fijan la vista inicial en lugar de ajustarla a los marcadores. Un zoom mayor es más cercano: 4 es un país y 11 una ciudad.

<map id="stores" latitude="latitude" longitude="longitude" marker-label="city"
     center-latitude="40.4168" center-longitude="-3.7038" zoom="11"
     initial-load="query" target-action="Stores" />

Un marcador seleccionado

La fila seleccionada en el modelo se dibuja de otro color, igual que el marcador que pulsa el lector. El mapa es un selector: con una dependencia sobre select-row, otro componente (un grid, una tarjeta) puede mostrar los datos de la tienda elegida.

<map id="stores" latitude="latitude" longitude="longitude" marker-label="name"
     initial-load="query" target-action="Stores" />

Eventos y acciones

Pulsar un marcador selecciona su fila y lanza select-row, así que se ejecutan las dependencias y los botones que escuchan al mapa. Estos ejemplos seleccionan de verdad; las acciones de abajo necesitan una pantalla y aquí no se ejecutan.

• filter: recarga los marcadores desde la consulta del mapa.
• polyline: dibuja una ruta sobre el mapa en lugar de los marcadores.

Más

• Documentación completa de los mapas: cada atributo, los campos de la consulta y la parte de servidor.
• Referencia XSD del elemento map.