--- title: "Cree mapas personalizados en aplicaciones móviles" date: "2019-09-18" categories: - "mobile" - "mobile-development" - "mobiletogether" - "xquery" tags: - "app-development" - "maps" - "mobile-development" - "mobiletogether" - "xquery" description: Descubra cómo crear mapas personalizados e interactivos en aplicaciones móviles utilizando expresiones XQuery con MobileTogether, adaptando las geolocalizaciones en tiempo real en función de la información proporcionada por el usuario. --- Status: #blog Tags: #app-development #maps #mobile-development #mobiletogether #xquery Categories: [mobile-development](/blog/es/category/mobile-development.md) | [mobile-development](/blog/es/category/mobile-development.md) | [mobile-development](/blog/es/category/mobile-development.md) | [xpath+xquery](/blog/es/category/xpathxquery.md) # Cree mapas personalizados en aplicaciones móviles En una publicación anterior, describimos cómo [integrar mapas en aplicaciones móviles multiplataforma](https://www.altova.com/blog/integrate-maps-into-mobile-apps/) utilizando la aplicación de mapas nativa de cada dispositivo del usuario final. Nuestra aplicación de ejemplo generaba un mapa con marcadores que indicaban la ubicación de los principales aeropuertos de los Estados Unidos. Las ilustraciones mostraban mapas generados por la misma aplicación en un teléfono Android, un iPhone y un ordenador con Windows. ¿Qué ocurre si la lista de ubicaciones que se van a mapear no se conoce de antemano, sino que se genera en función de la actividad del usuario durante la ejecución? MobileTogether, la.. [Herramienta de desarrollo móvil multiplataforma de bajo código, de la empresa Altova](https://www.altova.com/es/mobiletogether), También permite a los desarrolladores crear mapas personalizados en aplicaciones móviles de forma dinámica, basándose en una lista de ubicaciones geográficas generadas en tiempo real. ![](/blog/images/Blog_MT_windmill.jpg) Aquí se muestra una ventana de una aplicación móvil que realiza una solicitud a una API REST para obtener una lista de lugares cercanos, basándose en una frase ingresada por el usuario. [![Crear una lista de ubicaciones geográficas para mapas personalizados en aplicaciones móviles](/blog/images/custom_search.png)](custom_search-e1568826839242.png) Si usted fuera una empresa buscando una ubicación para construir un nuevo centro de datos, un mapa sería una herramienta muy útil para complementar la lista de resultados. [![Una lista de ubicaciones geográficas creada por los usuarios para un mapa personalizado](/blog/images/search-results-list.png)](search-results-list.png) Como vimos en la aplicación "Estado del Aeropuerto" que creamos para nuestra publicación anterior, el control de mapa MobileTogether incluye propiedades que definen los marcadores, un marco de visualización para el mapa y acciones de control que se ejecutan cuando el usuario hace clic en un punto del mapa. [![Definición de las propiedades para un mapa en una aplicación móvil multiplataforma](/blog/images/properties-1-1.png)](properties-1-1.png) En la aplicación "Estado del Aeropuerto", toda la lista de marcadores para los aeropuertos principales estaba codificada de forma rígida en la ventana del editor XPath/XQuery, específicamente en la propiedad "Marcadores" [![Una lista de marcadores de geolocalización predefinidos para mapas personalizados en aplicaciones móviles](/blog/images/marker-list-1.png)](marker-list-1.png) ### Una expresión XQuery para crear marcadores en un mapa Los marcadores no tienen que estar codificados de forma rígida. En cambio, toda la lista de marcadores para mapas personalizados en aplicaciones móviles puede construirse mediante una expresión XQuery. Para crear mapas personalizados en aplicaciones móviles, necesitamos una [expresión FLWOR (For-Let-Where-Order-Return)](https://www.altova.com/es/mobiletogether/xpath-intro) basada en los resultados de la consulta de búsqueda REST. Los parámetros "let", "where" y "order" en las expresiones FLWOR son opcionales, y no los necesitamos para nuestra lista de marcadores. Simplemente necesitamos "For" y "Return" para procesar la lista de ubicaciones que devuelve la solicitud REST: [![Una expresión XQuery para crear marcadores en mapas personalizados dentro de aplicaciones móviles ](/blog/images/marker-list-2.png)](marker-list-2.png) Una expresión XQuery puede ser difícil de construir correctamente desde el primer intento, incluso sin los parámetros "let", "where" y "order". Aquí es donde resulta útil la sección "Evaluador" de la ventana de la expresión XQuery. Al hacer clic en el botón "Evaluador", puede probar la expresión a medida que la construye. [![Probar una expresión XQuery utilizando el evaluador XQuery](/blog/images/marker-list-evaluator.png)](marker-list-evaluator.png) Si la expresión contiene un error, la evaluación fallará y la descripción del error se mostrará en la ventana de resultados. Abrimos la ventana de la expresión XQuery en el diseñador MobileTogether mientras el simulador ejecutaba la aplicación en desarrollo. Sin embargo, primero utilizamos el simulador para realizar la búsqueda de texto, obteniendo acceso a datos en tiempo real de la consulta REST para "energía eólica" dentro de un radio de 160 kilómetros (100 millas) alrededor de Amarillo, Texas. Observe que el nombre "Cielo Wind Power LLC" que aparece en los resultados de la búsqueda, mostrado en la esquina inferior izquierda de la captura de pantalla anterior, se utiliza para generar el elemento de texto correspondiente al marcador 1, que se muestra en los resultados del Evaluador a la derecha. Una vez que estamos satisfechos con la expresión de búsqueda, simplemente arrastramos un nuevo control de mapa de geolocalización a la página de resultados de búsqueda, y luego copiamos y pegamos la expresión en la propiedad "Marcadores". Aquí se muestra una vista de la página con el mapa en el entorno de diseño MobileTogether: [![Agregar el control de mapa de geolocalización a un diseño de aplicación móvil en el programa MobileTogether Designer](/blog/images/map-design.png)](map-design.png) Ahora podemos configurar las propiedades restantes del mapa para que se adapten mejor a nuestra aplicación. Elegimos un tipo de mapa de calles con controles de zoom. Otros tipos de mapa disponibles son un mapa satelital o un mapa híbrido que combina características de calles y satélite. La propiedad "Viewport" está vacía porque MobileTogether establecerá automáticamente el área visible del mapa para incluir todos los marcadores, tal como se define en tiempo de ejecución mediante la expresión XQuery. También utilizamos una expresión XQuery para permitir la visibilidad solo cuando el número de resultados de las solicitudes REST sea mayor que cero. Aquí se muestra una vista de la ventana de ayuda de las propiedades del mapa: [![Definir propiedades para mapas personalizados en aplicaciones móviles, utilizando el programa MobileTogether Designer](/blog/images/map-control-styles.png)](map-control-styles.png) Las opciones de "Ancho de control" y "Alto de control" permiten que MobileTogether ajuste automáticamente el tamaño del mapa para cada dispositivo móvil. Queremos mostrar al usuario más información sobre cualquier ubicación cuando se hace clic en un marcador. Esto se define en la propiedad "Acción de control". El botón con tres puntos para la "Acción de control" abre un cuadro de diálogo de "Acciones" donde el desarrollador puede definir múltiples acciones: [![Definir las acciones que se ejecutan cuando el usuario hace clic en un marcador en mapas personalizados para aplicaciones móviles](/blog/images/click-actions.png)](click-actions.png) Nuestra aplicación utiliza las funciones de extensión de MobileTogether para recopilar información sobre el marcador seleccionado, y luego abre una subpágina para mostrar los detalles de esa ubicación. A continuación, se muestran la página de resultados de la aplicación ejecutándose en un iPhone y la subpágina que se muestra después de que el usuario hace clic en un elemento en un teléfono Android: ![Capturas de pantalla de mapas personalizados en una aplicación móvil que se ejecuta en un iPhone y un teléfono Android](/blog/images/map-results.png) El botón etiquetado como "Ver datos de producción" en la subpágina de detalles de los resultados podría consultar una base de datos para mostrar datos históricos de generación de energía para la planta eólica seleccionada. Descubre por ti mismo lo fácil que es crear mapas personalizados en aplicaciones móviles. Descarga el [MobileTogether Designer, que es gratuito y que incluye ayuda en línea y aplicaciones de ejemplo](https://www.altova.com/es/mobiletogether/download). Descubra otras aplicaciones creadas con MobileTogether y vea demostraciones en video en: [https://www.altova.com/mobiletogether/demos](https://www.altova.com/es/mobiletogether/demos)