Crie mapas personalizados em aplicações móveis

Numa publicação anterior, descrevemos como fazer.. Integrar mapas em aplicações móveis multiplataforma com a aplicação de mapas nativa de cada dispositivo. A nossa aplicação de exemplo gerou um mapa com marcadores que indicavam os principais aeroportos dos Estados Unidos. As ilustrações mostravam mapas gerados pela mesma aplicação num telemóvel Android, num iPhone e num computador com sistema operativo Windows.

O que acontece se a lista de locais a serem mapeados não for conhecida antecipadamente, mas for gerada com base na atividade do utilizador durante a execução? No MobileTogether, a.. Ferramenta de desenvolvimento móvel multiplataforma de baixo código da Altova, Além disso, permite que os desenvolvedores criem mapas personalizados em aplicações móveis, de forma dinâmica, com base numa lista de localizações geográficas geradas em tempo real.

A imagem mostra uma janela de uma aplicação móvel que efetua uma requisição de API REST para obter uma lista de locais próximos, com base numa frase inserida pelo utilizador.

Se fosse uma empresa à procura de um local para construir um novo centro de dados, um mapa seria uma ferramenta muito útil para complementar a lista de resultados.

Como vimos na aplicação "Estado do Aeroporto" criada para o nosso artigo anterior, o componente de mapa MobileTogether inclui propriedades que definem os marcadores, uma área de visualização para o mapa e ações de controlo a serem executadas quando o utilizador clica num ponto no mapa.

Na aplicação "Estado do Aeroporto", a lista completa de marcadores para os principais aeroportos estava codificada diretamente na janela do Editor XPath/XQuery, na propriedade "Marcadores":

Uma expressão XQuery para criar marcadores em mapas

Os marcadores não precisam ser definidos de forma fixa. Em vez disso, toda a lista de marcadores para mapas personalizados em aplicações móveis pode ser criada através de uma expressão XQuery. Para criar mapas personalizados em aplicações móveis, precisamos de.. Expressão XQuery com estrutura "para...se...ordenar...retornar" (FLWOR) com base nos resultados da pesquisa REST.

Os parâmetros let, where e order nas expressões FLWOR são opcionais, e não precisamos deles para a nossa lista de marcadores. Precisamos apenas de For e Return para processar a lista de localizações que são devolvidas pela requisição REST:

Uma expressão XQuery pode ser difícil de construir corretamente na primeira tentativa, mesmo sem os parâmetros "let", "where" e "order"! É aqui que a secção "Evaluator" (avaliador) da janela de expressão XQuery se torna útil. Ao clicar no botão "Evaluator", pode testar a expressão à medida que trabalha.

Se a expressão contiver um erro, a avaliação falhará e a descrição do erro será exibida na janela de resultados.

Abrimos a janela de Expressão XQuery no MobileTogether Designer enquanto o Simulador estava a executar a aplicação em desenvolvimento. No entanto, primeiro utilizamos o Simulador para realizar a pesquisa de texto, obtendo acesso a dados em tempo real provenientes da consulta REST para "energia eólica" num raio de 160 quilómetros (100 milhas) a partir de Amarillo, Texas. Note que o nome "Cielo Wind Power LLC", que aparece nos resultados da pesquisa exibidos no canto inferior esquerdo da captura de ecrã acima, é utilizado para gerar o elemento de texto para o marcador 1, mostrado nos Resultados do Avaliador, no lado direito.

Assim que estivermos satisfeitos com a expressão utilizada, basta arrastar um novo controlo de mapa de geolocalização para a página de resultados da pesquisa, e depois copiar e colar a expressão na propriedade "Marcadores". Aqui está uma visão da página com o mapa no ambiente MobileTogether Designer:

Agora podemos definir as propriedades restantes do mapa para que se adequem melhor à nossa aplicação. Escolhemos um tipo de mapa de ruas com controles de zoom. Outros tipos de mapa disponíveis são um mapa de satélite ou um mapa híbrido que combina características de satélite e de ruas. A propriedade "Viewport" está vazia porque o MobileTogether irá automaticamente definir a área visível do mapa para incluir todos os marcadores, conforme definido em tempo de execução pela expressão XQuery. Também utilizamos uma expressão XQuery para permitir a visibilidade apenas quando o número de resultados da requisição REST for superior a zero.

Aqui está uma imagem da janela de ajuda das propriedades do mapa:

As opções de "Largura de Controlo" e "Altura de Controlo" permitem que o MobileTogether ajuste automaticamente o tamanho do mapa para cada dispositivo móvel.

Queremos mostrar ao utilizador mais informações sobre qualquer localização quando um marcador é clicado. Isto é definido na propriedade "Ação de Controlo". O botão com três pontos para a "Ação de Controlo" abre uma caixa de diálogo "Ações", onde o programador pode definir várias ações:

A nossa aplicação utiliza as funções de extensão MobileTogether para recolher informações sobre o marcador selecionado e, em seguida, abre uma subpágina para apresentar detalhes sobre essa localização.

Abaixo, apresentamos a página de resultados da aplicação a funcionar num iPhone e a subpágina que aparece depois de o utilizador clicar num marcador num telemóvel Android:

O botão com a legenda "Visualizar dados de produção" na subpágina "Detalhes dos resultados" poderia consultar uma base de dados para visualizar dados históricos de produção de energia da turbina eólica selecionada.

Descubra por si mesmo como é fácil criar mapas personalizados em aplicações móveis. Descarregue o MobileTogether Designer, uma ferramenta gratuita, que inclui ajuda online e exemplos de aplicações.

Descubra outras aplicações criadas com o MobileTogether e veja demonstrações em vídeo em: https://www.altova.com/mobiletogether/demos