Intégrer des cartes dans les applications mobiles
Les développeurs peuvent créer des applications géolocalisées hautement personnalisées en utilisant les fonctionnalités de géolocalisation intégrées aux appareils mobiles. Maintenant, avec MobileTogether, Outil de développement mobile multiplateforme et à faible code de Altova, permet une intégration approfondie des cartes dans les applications pour toutes les plateformes mobiles populaires.
Les développeurs peuvent intégrer des cartes dans des applications mobiles, ajouter des marqueurs spécifiques et définir des actions personnalisées en fonction des clics des utilisateurs sur la carte. Par exemple, une entreprise pourrait vouloir qu'une application inclue une carte de tous les emplacements de ses succursales, puis affiche l'inventaire actuel lorsqu'une succursale est sélectionnée.
Dans un article précédent, nous avons décrit une application mobile conçue pour permettre aux utilisateurs de vérifier l'état des principaux aéroports américains en sélectionnant un code d'aéroport dans une liste déroulante. Une technique alternative consisterait à remplacer les 47 entrées de la liste déroulante par des marqueurs sur une carte.
Examinons cet exemple.
Les captures d'écran ci-dessous montrent la nouvelle application "État de l'aéroport" en fonctionnement sur un téléphone Android, un iPhone, et en tant qu'application de bureau Windows.
Sur chaque appareil, la carte est générée à l'aide de l'application de cartographie intégrée et native. Les utilisateurs finaux verront automatiquement le style et le format familiers sur chaque plateforme.
Si la carte fait disparaître certaines informations d'état en bas de l'écran, elles restent visibles en faisant défiler l'écran verticalement
Intégrez des cartes dans vos applications mobiles en faisant glisser le contrôle de la carte vers l'application, en utilisant les fonctionnalités de mise en page visuelle de MobileTogether Designer. Vous pouvez personnaliser les propriétés de chaque carte. La capture d'écran ci-dessous montre une partie de notre page principale d'état de l'aéroport, avec la fenêtre d'aide des propriétés de la carte affichée sur la droite.
Les types de cartes disponibles sont : plan, satellite ou hybride. En plus des options de zoom, tous les appareils dotés d'un écran tactile permettent de faire défiler la carte avec un seul doigt et d'utiliser le geste de pincement familier avec deux doigts pour zoomer avant ou arrière.
La zone de la carte à afficher est déterminée par une liste d'un ou plusieurs marqueurs, définis à l'aide de l'expression mt-geo-map-marker. Chaque marqueur comprend un identifiant, un titre et un champ de texte. Ces valeurs peuvent être récupérées lorsque le marqueur est cliqué.
Les couleurs des marqueurs peuvent être des noms standards comme rouge, vert et bleu, ou peuvent être spécifiées à l'aide de codes de couleur personnalisés, comme nous l'avons fait précédemment.
La propriété "Zone d'affichage" définit la superficie totale à afficher en spécifiant les coordonnées des coins supérieur gauche et inférieur droit de la carte. Si elle est laissée vide, la zone d'affichage par défaut inclura tous les marqueurs définis, ainsi qu'une petite marge. Nous avons défini une expression pour la zone d'affichage avec des valeurs initiales pour la majeure partie de l'Amérique du Nord.
La propriété "Action de contrôle" définit ce qui se passe lorsque l'utilisateur clique sur un marqueur quelconque sur la carte. Notre application lira le titre du marqueur, qui est un code aéroportuaire de trois lettres, utilisera ce code pour récupérer l'état de l'aéroport auprès du service web de la FAA, et mettra à jour l'affichage.
Notre application calcule de nouvelles coordonnées de la zone d'affichage pour zoomer sur la position de l'aéroport sélectionné
Découvrez par vous-même à quel point il est facile d'intégrer des cartes dans des applications mobiles. Téléchargez le logiciel MobileTogether Designer, qui est gratuit et inclut une aide en ligne ainsi que des exemples d'applications Vous pouvez également obtenir notre application "Airport Status" sur GitHub et l'exécuter directement dans le logiciel Designer, ou la tester sur votre propre appareil mobile.
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