--- title: "Créez des cartes personnalisées dans vos applications mobiles" date: "2019-09-18" categories: - "mobile" - "mobile-development" - "mobiletogether" - "xquery" tags: - "app-development" - "maps" - "mobile-development" - "mobiletogether" - "xquery" description: Découvrez comment créer des cartes personnalisées et interactives dans les applications mobiles en utilisant des expressions XQuery avec MobileTogether, et comment adapter les géolocalisations en temps réel en fonction des informations fournies par l'utilisateur. --- Status: #blog Tags: #app-development #maps #mobile-development #mobiletogether #xquery Categories: [mobile-development](/blog/fr/category/mobile-development.md) | [mobile-development](/blog/fr/category/mobile-development.md) | [mobile-development](/blog/fr/category/mobile-development.md) | [xpath+xquery](/blog/fr/category/xpathxquery.md) # Créez des cartes personnalisées dans vos applications mobiles Dans un article précédent, nous avons expliqué comment [intégrer des cartes dans des applications mobiles multiplateformes](https://www.altova.com/blog/integrate-maps-into-mobile-apps/) en utilisant l'application de cartographie native de chaque appareil utilisé par les utilisateurs finaux. Notre application exemple générait une carte avec des marqueurs indiquant les principaux aéroports des États-Unis. Des illustrations montraient des cartes générées par la même application sur un téléphone Android, un iPhone et un ordinateur Windows. Que se passe-t-il si la liste des lieux à cartographier n'est pas connue à l'avance, mais est générée en fonction de l'activité de l'utilisateur pendant l'exécution du programme ? MobileTogether, la.. [Outil de développement mobile multiplateforme à faible code, proposé par Altova](https://www.altova.com/fr/mobiletogether), De plus, cela permet aux développeurs de créer des cartes personnalisées dans les applications mobiles en temps réel, en se basant sur une liste de géolocalisations générée pendant l'exécution du programme. ![](/blog/images/Blog_MT_windmill.jpg) Voici une capture d'écran d'une fenêtre d'une application mobile qui effectue une requête d'API REST pour récupérer une liste de lieux à proximité, en fonction d'une expression saisie par l'utilisateur. [![Créer une liste de géolocalisations pour des cartes personnalisées dans des applications mobiles](/blog/images/custom_search.png)](custom_search-e1568826839242.png) Si vous étiez une entreprise à la recherche d'un emplacement pour construire un nouveau centre de données, une carte serait un outil très utile à ajouter à la liste des résultats. [![Une liste de géolocalisations, créée par les utilisateurs, pour une carte personnalisée](/blog/images/search-results-list.png)](search-results-list.png) Comme nous l'avons vu dans l'application "État de l'aéroport" que nous avions présentée précédemment, le composant de carte MobileTogether comprend des propriétés qui définissent les marqueurs, une zone d'affichage pour la carte, et des actions à effectuer lorsque l'utilisateur clique sur un point sur la carte. [![Définition des propriétés pour une carte dans une application mobile multiplateforme](/blog/images/properties-1-1.png)](properties-1-1.png) Dans l'application "Statut des aéroports", la liste complète des marqueurs pour les principaux aéroports était codée en dur dans la fenêtre de l'éditeur XPath/XQuery, dans la section "Marqueurs" [![Une liste de marqueurs de géolocalisation prédéfinis pour les cartes personnalisées dans les applications mobiles](/blog/images/marker-list-1.png)](marker-list-1.png) ### Une expression XQuery pour créer des marqueurs de carte Les marqueurs ne doivent pas être codés en dur. Au lieu de cela, la liste complète des marqueurs pour les cartes personnalisées dans les applications mobiles peut être construite à l'aide d'une expression XQuery. Pour créer des cartes personnalisées dans les applications mobiles, nous avons besoin d'une [expression FLWOR (For-Let-Where-Order-Return)](https://www.altova.com/fr/mobiletogether/xpath-intro) basée sur les résultats de la requête de recherche REST. Les paramètres `let`, `where` et `order` dans les expressions FLWOR sont facultatifs, et nous n'avons pas besoin de les utiliser pour notre liste de marqueurs. Nous avons simplement besoin des éléments `For` et `Return` pour traiter la liste de localisations renvoyée par la requête REST : [![Une expression XQuery pour créer des marqueurs sur des cartes personnalisées dans des applications mobiles ](/blog/images/marker-list-2.png)](marker-list-2.png) Une expression XQuery peut être difficile à construire correctement dès la première tentative, même sans les paramètres "let", "where" et "order" ! C'est là que la section "Évaluateur" de la fenêtre "Expression XQuery" est très utile. En cliquant sur le bouton "Évaluateur", vous pouvez tester l'expression au fur et à mesure que vous travaillez. [![Tester une expression XQuery à l'aide de l'évaluateur XQuery](/blog/images/marker-list-evaluator.png)](marker-list-evaluator.png) Si l'expression contient une erreur, l'évaluation échoue et la description de l'erreur s'affiche dans la fenêtre des résultats. Nous avons ouvert la fenêtre d'expression XQuery dans l'outil MobileTogether Designer pendant que le simulateur exécutait l'application en cours de développement. Avant cela, nous avons utilisé le simulateur pour effectuer une recherche de texte, ce qui nous a permis d'accéder aux données en temps réel provenant de la requête REST pour "énergie éolienne" dans un rayon de 160 kilomètres autour d'Amarillo, au Texas. Notez que le nom "Cielo Wind Power LLC", qui apparaît dans les résultats de la recherche affichés en bas à gauche de la capture d'écran ci-dessus, est utilisé pour générer l'élément de texte du marqueur 1, tel qu'il est affiché dans les résultats de l'évaluateur à droite. Une fois que nous sommes satisfaits de l'expression utilisée, nous faisons simplement glisser un nouveau contrôle de carte de géolocalisation sur la page des résultats de recherche, puis nous copions et collons l'expression dans la propriété "Marqueurs". Voici une vue de la page avec la carte dans l'outil MobileTogether Designer : [![Ajouter le contrôle de la carte de géolocalisation à la conception d'une application mobile dans l'outil MobileTogether Designer](/blog/images/map-design.png)](map-design.png) Nous pouvons maintenant définir les propriétés restantes de la carte afin de l'adapter au mieux à notre application. Nous avons choisi un type de carte "route" avec des contrôles de zoom. Les autres types de cartes disponibles sont une carte satellite ou une carte hybride combinant des éléments de carte routière et satellite. La propriété "Zone d'affichage" est vide car MobileTogether définira automatiquement la zone d'affichage pour inclure tous les marqueurs présents sur la carte, comme cela est défini au moment de l'exécution par l'expression XQuery. Nous avons également utilisé une expression XQuery pour permettre l'affichage uniquement lorsque le nombre de résultats de la requête REST est supérieur à zéro. Voici une vue de la fenêtre d'aide des propriétés de la carte : [![Définir les propriétés pour les cartes personnalisées dans les applications mobiles, dans l'outil MobileTogether Designer](/blog/images/map-control-styles.png)](map-control-styles.png) Les paramètres de largeur et de hauteur de contrôle permettent à MobileTogether de définir automatiquement la taille de la carte pour chaque appareil mobile. Nous souhaitons afficher davantage d'informations sur un lieu donné lorsque l'utilisateur clique sur un marqueur. Cela est défini dans la propriété "Action de contrôle". Le bouton avec les trois points, associé à l'action de contrôle, ouvre une boîte de dialogue "Actions" où le développeur peut définir plusieurs actions : [![Définir les actions à effectuer lorsque l'utilisateur clique sur un marqueur dans des cartes personnalisées pour applications mobiles](/blog/images/click-actions.png)](click-actions.png) Notre application utilise les fonctions d'extension MobileTogether pour collecter des informations sur le marqueur sélectionné, puis elle ouvre une sous-page pour afficher les détails relatifs à cet emplacement. Ci-dessous, vous trouverez la page des résultats de l'application telle qu'elle s'affiche sur un iPhone, ainsi que la sous-page qui s'affiche après qu'un utilisateur a cliqué sur un point d'intérêt sur un téléphone Android : ![Captures d'écran de cartes personnalisées affichées dans une application mobile fonctionnant sur un iPhone et un téléphone Android](/blog/images/map-results.png) Le bouton intitulé "Afficher les données de production" sur la sous-page des détails des résultats pourrait interroger une base de données pour afficher les données historiques de production d'électricité pour le parc éolien sélectionné. Découvrez par vous-même à quel point il est facile de créer des cartes personnalisées dans les applications mobiles. Téléchargez le logiciel [MobileTogether Designer, qui est gratuit et inclut une aide en ligne ainsi que des exemples d'applications](https://www.altova.com/fr/mobiletogether/download) Découvrez d'autres applications créées avec MobileTogether et visionnez des démonstrations vidéo à l'adresse suivante : [https://www.altova.com/mobiletogether/demos](https://www.altova.com/fr/mobiletogether/demos)