Erstellen Sie individuelle Karten in mobilen Anwendungen

In einem früheren Beitrag haben wir beschrieben, wie man.. Integrieren Sie Karten in mobile Anwendungen, die auf verschiedenen Plattformen funktionieren mit der nativen Kartenanwendung jedes Endbenutzergeräts. Unsere Beispielanwendung erstellte eine Karte mit Markierungen, die die wichtigsten Flughäfen in den Vereinigten Staaten anzeigen. Abbildungen zeigten Karten, die von derselben App auf einem Android-Smartphone, einem iPhone und einem Windows-Desktop generiert wurden.

Was wäre, wenn eine Liste von Standorten, die kartiert werden sollen, nicht im Voraus bekannt ist, sondern zur Laufzeit basierend auf der Benutzeraktivität generiert wird? MobileTogether, das low-code-Tool für die plattformübergreifende mobile Entwicklung von Altova, ermöglicht es Entwicklern auch, benutzerdefinierte Karten in mobilen Anwendungen in Echtzeit zu erstellen, basierend auf einer Liste von geografischen Standorten, die zur Laufzeit generiert werden.

Hier ist ein Screenshot einer Ansicht in einer mobilen App, die eine RESTful-API-Anfrage durchführt, um eine Liste von Standorten in der Nähe abzurufen, basierend auf einer vom Benutzer eingegebenen Suchanfrage.

Wenn Sie ein Unternehmen wären, das einen Standort für den Bau eines neuen Rechenzentrums sucht, wäre eine Karte eine sehr nützliche Ergänzung zu den Suchergebnissen.

Wie wir in der App "Airport Status" gesehen haben, die wir für unseren vorherigen Beitrag entwickelt haben, beinhaltet die Kartenkomponente "MobileTogether" Eigenschaften, die Markierungen definieren, einen Anzeigebereich für die Karte und Aktionen, die ausgeführt werden sollen, wenn der Benutzer auf einen Punkt auf der Karte klickt.

In der App "Flughafenstatus" war die gesamte Liste der Markierungen für große Flughäfen fest in das Fenster des XPath/XQuery-Editors für die Eigenschaft "Markierungen" einprogrammiert

Ein XQuery-Ausdruck zum Erstellen von Kartenmarkierungen

Die Markierungen müssen nicht fest codiert sein. Stattdessen kann die gesamte Liste der Markierungen für benutzerdefinierte Karten in mobilen Anwendungen mithilfe eines XQuery-Ausdrucks erstellt werden. Um benutzerdefinierte Karten in mobilen Anwendungen zu erstellen, benötigen wir einen XQuery-Ausdruck vom Typ "For-Let-Where-Order-Return" (FLWOR), der auf den Ergebnissen einer REST-Suchabfrage basiert.

Die Parameter let, where und order in FLWOR-Ausdrücken sind optional, und wir benötigen sie nicht für unsere Liste von Markierungen. Wir benötigen lediglich For und Return, um die Liste von Standorten zu verarbeiten, die von der REST-Anfrage zurückgegeben werden:

Eine XQuery-Ausdruck kann auch ohne die Parameter "let", "where" und "order" schon schwierig zu erstellen sein. Hier kommt der Bereich "Evaluator" im XQuery-Ausdrucksfenster ins Spiel. Durch Klicken auf den Button "Evaluator" können Sie den Ausdruck während der Erstellung testen.

Wenn der Ausdruck einen Fehler enthält, schlägt die Auswertung fehl, und die Fehlermeldung wird im Ergebnisfenster angezeigt.

Wir öffneten das Fenster für XQuery-Ausdrücke im MobileTogether Designer, während der Simulator die in Entwicklung befindliche App ausführte. Zunächst nutzten wir den Simulator, um eine Textsuche durchzuführen und so Zugriff auf aktuelle Daten von der REST-Abfrage für "Windenergie" innerhalb eines Umkreises von 100 Meilen um Amarillo, Texas, zu erhalten. Beachten Sie, dass der Name "Cielo Wind Power LLC" in den Suchergebnissen, die im unteren linken Bereich des Screenshots oben angezeigt werden, verwendet wird, um das Textelement für Marker 1 zu generieren, das in den Evaluierungsergebnissen auf der rechten Seite angezeigt wird.

Sobald wir mit der Funktionsweise der Formel zufrieden sind, ziehen wir einfach eine neue Geolocation-Kartenelemente auf die Seite mit den Suchergebnissen. Anschließend kopieren wir die Formel und fügen sie in das Feld "Marker" ein. Hier ist ein Beispiel, wie die Seite mit der Karte im MobileTogether Designer aussieht:

Wir können nun die verbleibenden Eigenschaften der Karte so einstellen, dass sie optimal zu unserer Anwendung passen. Wir haben einen Straßenkarten-Typ mit Zoom-Funktionen gewählt. Andere verfügbare Kartentypen sind eine Satellitenkarte oder eine Hybridkarte, die Satelliten- und Straßenansichten kombiniert. Das Feld "Viewport" ist leer, da MobileTogether den Viewport automatisch so einstellt, dass alle auf der Karte angezeigten Markierungen enthalten sind, wie sie zur Laufzeit durch den XQuery-Ausdruck definiert sind. Wir haben auch einen XQuery-Ausdruck verwendet, um die Sichtbarkeit nur dann zu aktivieren, wenn die Anzahl der Ergebnisse der REST-Anfrage größer als Null ist.

Hier ist ein Bild des Hilfefensters für die Karteneigenschaften:

Die Einstellungen für "Steuerungsbreite" und "Steuerungshöhe" ermöglichen es MobileTogether, die Größe der Karte automatisch für jedes mobile Gerät anzupassen.

Wir möchten dem Benutzer mehr Informationen über einen bestimmten Ort anzeigen, wenn er auf einen Marker klickt. Dies wird in der Eigenschaft "Steuerungsaktion" definiert. Der Button mit den drei Punkten für die Steuerungsaktion öffnet einen Dialog, in dem der Entwickler mehrere Aktionen definieren kann:

Unsere App verwendet die Erweiterungsfunktionen von MobileTogether, um Informationen über den angeklickten Marker zu sammeln. Anschließend öffnet sie eine Unterseite, um Details zu diesem Standort anzuzeigen.

Im Folgenden sind die Ergebnisseite der App, wie sie auf einem iPhone angezeigt wird, sowie die Unterseite dargestellt, die nach dem Anklicken eines Markers auf einem Android-Gerät erscheint:

Der Button mit der Bezeichnung "Produktionsdaten anzeigen" auf der Unterseite "Details der Ergebnisse" könnte eine Datenbank abfragen, um historische Daten zur Stromerzeugung für das ausgewählte Windparkgebiet anzuzeigen.

Entdecken Sie selbst, wie einfach es ist, individuelle Karten in mobilen Anwendungen zu erstellen. Laden Sie den kostenlosen MobileTogether Designer herunter, der Online-Hilfe und Beispielanwendungen enthält.

Erfahren Sie mehr über andere Anwendungen, die mit MobileTogether erstellt wurden, und sehen Sie sich Video-Demonstrationen an: https://www.altova.com/mobiletogether/demos