Mapa

Un mapa centrado en una latitud/longitud. Proveedor: «Google Maps» u «Mapbox» (los dos necesitan una credencial del proyecto, sección "Google APIs" del menú) u «OpenStreetMap» (gratis, sin credencial: no hace falta configurar nada). La Vista previa del editor ya dibuja el mapa DE VERDAD en los tres (en el lienzo de edición, sin correr, se sigue viendo una vista de ejemplo); lo mismo en K-ode Play y en la app compilada. Mapbox necesita recompilar el APK (módulo nativo nuevo) para verse en el celular. «Mostrar mi ubicación» pinta el punto azul de GPS (pide permiso de ubicación la primera vez) — no mueve el centro del mapa, que lo sigue decidiendo Latitud/Longitud. «El mapa se puede mover» apagado lo deja fijo (sin arrastrar, hacer zoom ni girar) — útil para un mapa de solo mostrar. «Puntero fijo en el centro» pone un pin que NO se mueve con el mapa: el mapa se arrastra por debajo, el pin se queda quieto señalando siempre el mismo punto de la pantalla — por ejemplo, para que la persona elija una dirección arrastrando el mapa. Puedes ponerle tu propia imagen en «Imagen del puntero central» (vacío = el pin de siempre). Actívalo junto con «Al mover el mapa» (salida de este paso) para que, al soltar el mapa (o cambiar el zoom), te traiga la latitud/longitud que quedó justo bajo el puntero. MARCADORES/CÍRCULOS/POLÍGONOS (listas, para pintar VARIOS puntos a la vez — ej. conductores cercanos, zonas, rutas): no se editan a mano, se arman con «Modificar control» sobre este Mapa, poniendo como valor un JSON en texto (normalmente el resultado de un paso anterior, como «Buscar puntos cercanos» o «Escuchar puntos», pasado por «Operación aritmética»/«Code compute» si hay que darle forma). • Marcadores: [{"lat":19.43,"lng":-99.13,"title":"Conductor A","image":""}, …] — title e image son opcionales (sin image, el pin de fábrica). • Círculos: [{"lat":19.43,"lng":-99.13,"radius":500,"color":"#4f46e5","fillColor":"#4f46e5","fillOpacity":0.15}, …] — radius en METROS; color/fillColor/fillOpacity son opcionales. • Polígonos: [{"points":[{"lat":19.43,"lng":-99.13},{"lat":19.44,"lng":-99.12},{"lat":19.42,"lng":-99.11}],"color":"#4f46e5","fillColor":"#4f46e5","fillOpacity":0.15}, …] — mínimo 3 puntos; color/fillColor/fillOpacity opcionales. Si el JSON no se puede leer, el propio mapa te dice por qué (como en Gráfico). ⚠️ OpenStreetMap usa un servidor GRATUITO y público: no está pensado para mucho tráfico, así que puede fallar o verse lento si muchas personas usan tu app a la vez. Para un uso serio, mejor Google Maps o Mapbox (con su propia credencial). MODO NAVEGACIÓN: enciende una guía EN VIVO hacia «Navegación · destino» (ponlo fijo o con «Modificar control», ej. el resultado de «Buscar un lugar»): calcula la ruta de verdad con el proveedor del mapa, sigue tu posición (pide permiso de ubicación), dibuja el camino, muestra un letrero con la siguiente indicación y lo que falta, y RECALCULA sola si te desvías del camino. Al llegar (≈25 m del destino) corre «Al llegar» (salida de este paso) y el letrero dice «Llegaste». «Medio de transporte» solo aplica a Google/Mapbox: con OpenStreetMap el servidor gratuito solo calcula en Auto. El mapa gira para «apuntar hacia adelante» en Mapbox (siempre); en Google y OpenStreetMap el mapa no gira (limitación de esos dos sin configuración extra), pero el ÍCONO de tu posición sí rota para enseñar hacia dónde vas. Sin voz por ahora. Necesita HTTPS e internet; en poco señal el letrero se queda con la última indicación conocida. La línea del camino solo muestra lo que FALTA (se va recortando desde tu posición hacia el destino, sin pedir nada nuevo al proveedor — la ruta completa ya está calculada desde el inicio). «Color de la línea», «Zoom al seguir», «Imagen del vehículo» y «Leer las indicaciones en voz alta» son solo de este modo, no afectan el Zoom general ni a «Rutas». RUTAS (distinto de Modo navegación: esto es para MOSTRAR un recorrido ya hecho, no para guiar en vivo): línea recta, arco decorativo entre 2 puntos o la calle real, con tu color/grosor/estilo (sólida, guiones o punteada). Ver el "?" del campo «Rutas» para el formato exacto. ETIQUETAS: tarjetas flotantes ancladas a un punto (como los letreros de "5 min · Desde…" en Uber), con su propio evento «Al tocar una etiqueta». Ver el "?" del campo «Etiquetas».

Estilo

• Proveedor de mapa
• El mapa se puede mover (arrastrar y hacer zoom)
• Mostrar mi ubicación (punto azul)
• Puntero fijo en el centro (para elegir un punto)
• Modo navegación (seguir e indicar en vivo) — Enciende una guía EN VIVO hacia «Navegación · destino»: calcula la ruta real, sigue tu posición y dibuja el camino, muestra un letrero con la siguiente indicación y recalcula sola si te desvías. Ver el detalle completo en la ayuda de este componente (ⓘ del título).
• Navegación · medio de transporte — Solo aplica a Google Maps y Mapbox: cambia la ruta según cómo te mueves. Con OpenStreetMap este campo no aparece — su servidor gratuito solo calcula en Auto.
• Navegación · color de la línea — Color de la línea que marca el camino durante el Modo navegación. No es lo mismo que el color de «Rutas» (esa es para mostrar un recorrido ya hecho, aparte).
• Navegación · leer las indicaciones en voz alta — Lee cada indicación con la voz del dispositivo apenas cambia (no se repite en cada actualización del GPS). Sin costo ni servidor: usa la síntesis de voz del propio navegador/teléfono. Se puede prender o apagar en cualquier momento.

Data

• Credencial de Google Maps
• Credencial de Mapbox
• Latitud
• Longitud
• Zoom (1 a 20)
• Imagen del puntero central (vacío = el de fábrica)
• Marcadores (JSON, lista) — Varios pines a la vez (ej. conductores cercanos). No se escribe a mano: se llena con «Modificar control» sobre este Mapa, poniendo un JSON como el de abajo (normalmente el resultado de un paso anterior). Formato (lista, 1 objeto por marcador): [{"id":"c1","lat":19.43,"lng":-99.13,"title":"Conductor A","image":""}, …] • lat/lng — obligatorios, la posición del pin. • id — opcional, tu propia clave para identificarlo (ej. el id del conductor); si no lo pones, usa la pos
• Círculos (JSON, lista) — Varias zonas circulares a la vez (ej. radio de servicio). Se llena con «Modificar control» sobre este Mapa. Formato (lista, 1 objeto por círculo): [{"lat":19.43,"lng":-99.13,"radius":500,"color":"#4f46e5","fillColor":"#4f46e5","fillOpacity":0.15}, …] • lat/lng — obligatorios, el centro. • radius — obligatorio, el radio en METROS (no grados ni píxeles). • color — opcional, el color del borde (vacío = morado por defecto). • fillColor — opcional, el color de relleno (vací
• Polígonos (JSON, lista) — Varias zonas con forma libre a la vez (ej. una colonia, una zona de servicio). Se llena con «Modificar control» sobre este Mapa. Formato (lista, 1 objeto por polígono): [{"points":[{"lat":19.43,"lng":-99.13},{"lat":19.44,"lng":-99.12},{"lat":19.42,"lng":-99.11}],"color":"#4f46e5","fillColor":"#4f46e5","fillOpacity":0.15}, …] • points — obligatorio, mínimo 3 puntos {lat,lng} (el contorno, en orden). • color — opcional, el color del borde (vacío = morado por defecto). •
• Rutas (JSON, lista) — Dibuja un recorrido YA HECHO (no es para navegar en vivo — para eso usa Modo navegación): una línea recta, un arco decorativo entre 2 puntos (como la pantalla de "solicitar viaje" de Uber) o la calle real. Se llena con «Modificar control» sobre este Mapa. Formato (lista, 1 objeto por ruta): [{"points":[{"lat":19.43,"lng":-99.13},{"lat":19.45,"lng":-99.12}],"style":"straight","color":"#2563eb","width":4,"lineStyle":"solid"}, …] • points — obligatorio, mínimo 2 puntos. • st
• Etiquetas (JSON, lista) — Tarjetas flotantes ancladas a un punto del mapa (como "5 min · Desde Calle X" en Uber): siguen al mapa al arrastrar o hacer zoom. No son un pin: son una tarjeta con texto. Se llena con «Modificar control» sobre este Mapa. Formato (lista, 1 objeto por etiqueta): [{"id":"origen","lat":19.43,"lng":-99.13,"title":"Desde Calle Cheyene 424","subtitle":"","badge":"5 min","bg":"#ffffff","textColor":"#111111"}, …] • lat/lng/title — obligatorios. • id — opcional, tu propia clav
• Navegación · destino, latitud — Latitud del destino al que navegar. Puedes dejarlo fijo o cambiarlo con «Modificar control» (ej. el resultado de «Buscar un lugar» o un punto que el usuario eligió en otro Mapa).
• Navegación · destino, longitud — Longitud del destino al que navegar (junto con «Navegación · destino, latitud»).
• Navegación · zoom al seguir (1 a 20) — Qué tan cerca hace zoom el mapa SOLO mientras el Modo navegación está activo y te sigue (típico 16-18 para ver bien el trayecto de cerca). Fuera de Modo navegación sigue aplicando el «Zoom» general de arriba.
• Navegación · imagen del vehículo (vacío = flecha de fábrica) — Tu propia imagen (ej. un auto visto desde arriba) en vez de la flecha de fábrica, para marcar tu posición mientras navegas. En OpenStreetMap la imagen SÍ rota mostrando hacia dónde vas; en Mapbox el MAPA mismo gira (la imagen se queda quieta, apuntando siempre hacia arriba); en Google Maps ni el mapa ni la imagen rotan — su marcador clásico con imagen propia no admite rotación.

Eventos

• Al cargar — Cuando el componente aparece en pantalla
• Al tocar o hacer clic — Un toque o un clic
• Al mover el mapa (puntero fijo) — Solo con «Puntero fijo en el centro» activado: cuando sueltas el mapa después de arrastrarlo o hacer zoom, trae las coordenadas que quedaron justo bajo el puntero
• Al llegar (navegación) — Solo con «Modo navegación» activado: cuando la posición queda a unos 25 m del destino
• Al tocar un marcador — Cuando se toca uno de los pines de «Marcadores» (la lista). Dato del evento: toda la información de ESE marcador (id, latitud, longitud, título, imagen, posición en la lista)
• Al tocar una etiqueta — Cuando se toca una de las tarjetas de «Etiquetas» (la lista). Dato del evento: toda la información de ESA etiqueta (id, latitud, longitud, título, subtítulo, badge, posición en la lista)
• Al deslizar a la izquierda — Un deslizamiento del dedo hacia la izquierda sobre este componente
• Al deslizar a la derecha — Un deslizamiento del dedo hacia la derecha sobre este componente
• Al deslizar hacia arriba — Un deslizamiento del dedo hacia arriba sobre este componente
• Al deslizar hacia abajo — Un deslizamiento del dedo hacia abajo sobre este componente