Embedded Files
En este tutorial se explica cómo crear un proceso reutilizable para dibujar rutas y marcadores en un mapa, algo muy usado en apps de:
🚚 Delivery
🚕 Taxis
📍 Seguimiento en tiempo real
🧭 Geolocalización
La idea es crear una función simple que reciba:
👉 Dirección de origen
👉 Dirección de destino
👉 El mapa
Y automáticamente dibuje la ruta y los marcadores.
🎯 Objetivo del proceso
🎯 Objetivo del proceso
Mostrar en el mapa:
📍 Marcador de origen
📍 Marcador de destino
🛣️ Ruta entre ambos
Este proceso se reutiliza en muchas pantallas de una app.
🪜 Paso a paso del proceso
🪜 Paso a paso del proceso
1️⃣ Preparar el mapa y las direcciones
1️⃣ Preparar el mapa y las direcciones
Primero se tiene:
Un mapa en pantalla
Dos campos de texto (origen y destino)
Datos guardados en base local o base de datos
💡 Las direcciones pueden venir de:
Base de datos
GPS
Usuario
Pedido de delivery
En el ejemplo, se guardan en base local para ver cambios en tiempo real.
2️⃣ Enviar datos al proceso
2️⃣ Enviar datos al proceso
El proceso necesita:
Latitud origen
Longitud origen
Latitud destino
Longitud destino
El elemento mapa
⚠️ Importante:
El mapa siempre debe enviarse como call element completo.
Si no se envía así, el proceso no funcionará.
3️⃣ Dibujar la ruta en el mapa 🛣️
3️⃣ Dibujar la ruta en el mapa 🛣️
El sistema calcula la ruta entre origen y destino.
Luego modifica el mapa:
Agrega la ruta
Usa latitud y longitud
Se dibuja automáticamente
Por defecto:
Ruta roja
Marcadores rojos
4️⃣ Agregar marcadores 📍
4️⃣ Agregar marcadores 📍
Se colocan dos marcadores:
Origen
Destino
Cada marcador necesita:
Latitud
Longitud
Esto permite ver en el mapa:
Dónde inicia el recorrido
Dónde termina
5️⃣ Automatizar el proceso en tiempo real 🔄
5️⃣ Automatizar el proceso en tiempo real 🔄
Cuando se actualizan las direcciones:
Se guardan en base local
Se ejecuta el proceso
El mapa se actualiza solo
💡 Ideal para tracking en vivo.
🔧 Opciones avanzadas del proceso
🔧 Opciones avanzadas del proceso
🎨 Cambiar color de la ruta
🎨 Cambiar color de la ruta
Puedes enviar:
Color personalizado
Estilo de ruta
Ejemplo:
Ruta azul
Ruta verde
⚠️ Si no se configura bien, no cambia el color.
Hay que enviar correctamente la propiedad dentro del mapa.
🖼️ Cambiar iconos de marcadores
🖼️ Cambiar iconos de marcadores
Puedes usar:
Icono conductor
Icono cliente
Logo personalizado
Esto se configura enviando imágenes al marcador.
💡 Recomendación: guardar imágenes en Firebase o base de datos.
🏷️ Agregar nombres a los marcadores
🏷️ Agregar nombres a los marcadores
Puedes mostrar:
Nombre del conductor
Dirección destino
Nombre del usuario
Ejemplo:
“Driver”
“Casa”
🛣️ Usar múltiples rutas en un mismo mapa
🛣️ Usar múltiples rutas en un mismo mapa
Esto es clave 👇
Cada ruta tiene un nombre interno.
Si usas el mismo nombre:
❌ Se sobrescribe la ruta anterior
Si usas nombres distintos:
✅ Puedes mostrar varias rutas
Ejemplo:
Ruta conductor → tienda
Ruta tienda → casa
Esto se logra enviando un nombre de ruta único.
⚙️ Cómo funciona internamente
⚙️ Cómo funciona internamente
El proceso modifica propiedades del mapa:
routes.nombreRuta.origin.lat
routes.nombreRuta.destination.lat
markers.nombre.lat
markers.nombre.lng
Se usan concatenaciones para indicar qué parte del mapa modificar.
💡 Es una estructura dinámica para reutilizar el proceso.
⏱️ Centrar el mapa correctamente
⏱️ Centrar el mapa correctamente
Después de crear los marcadores:
Se recomienda agregar un delay de 1-2 segundos.
Luego ejecutar:
👉 center markers
¿Por qué?
Porque a veces el mapa intenta centrarse antes de que los marcadores existan.
🧠 Buenas prácticas
🧠 Buenas prácticas
✔️ Enviar siempre latitud y longitud
✔️ Enviar el mapa como elemento completo
✔️ Usar nombres únicos para rutas
✔️ Guardar iconos en base de datos
✔️ Agregar delay antes de centrar
🚀 Casos de uso reales
🚀 Casos de uso reales
Este proceso sirve para:
Apps de taxi
Apps de delivery
Seguimiento de repartidores
Tracking en tiempo real
Mapas logísticos
Es una función que se reutiliza en muchas pantallas.
❓ Dudas comunes
❓ Dudas comunes
🤔 ¿De dónde salen las direcciones?
🤔 ¿De dónde salen las direcciones?
De base de datos, GPS o inputs del usuario.
🤔 ¿Puedo usar varias rutas?
🤔 ¿Puedo usar varias rutas?
Sí, usando nombres distintos para cada ruta.
🤔 ¿Puedo cambiar iconos?
🤔 ¿Puedo cambiar iconos?
Sí, enviando imágenes personalizadas.
🤔 ¿Es complejo?
🤔 ¿Es complejo?
No. Es un proceso simple pero muy reutilizable.
🏁 Conclusión
🏁 Conclusión
En este tutorial se creó un proceso para:
Dibujar rutas
Agregar marcadores
Personalizar mapas
Reutilizar lógica
Es una función esencial en apps con geolocalización.
Aunque es sencilla, se usa constantemente en proyectos reales.
Síguenos para más contenido de desarrollo y no-code
Web: https://www.lionsoft.app/
TikTok: TikTok - Make Your Day
Facebook: LionSoft - Casa de desarrollo | San Francisco CA
Telegram: @lionsoftapp
Page updated
Google Sites
Report abuse