<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=1195114&amp;fmt=gif">

Wie Sie Google Maps in Ihrer Mendix App mit Ebenen versehen können

Hossein Bahrami
Hossein Bahrami

Mendix

Google Maps war einer der Pioniere geobasierter Lösungen, hat einen Anteil von fast 66% am weltweiten Kartenmarkt und verfügt im Wesentlichen über die weltweit meistgenutzten und aktuellsten Karten.

Ein Grund für deren Bekanntheit liegt darin, dass Google eine breite Palette an entwicklerfreundlichen APIs anbietet, die mit den Dienstleistungen und Produkten von Google zusammenarbeiten und die Nutzung erleichtern. Heute werden wir uns oberflächlich ansehen, wie wir beeindruckende Mendix-Apps entwickeln können, die Google Maps verwenden.

Ansatz

Da die Karte das ist, was auf der Client-Seite ausgeführt wird, wird der größte Teil clientseitige Technologie, wie JavaScript und Googles Karten-JavaScript-API, sein.

Die JavaScript-API von Google Maps basiert, wie der Name schon sagt, auf dem bekannten JavaScript, welches sehr entwicklerfreundlich und einfach zu verwenden ist.

Da wir die clientseitige Lösung entwickeln, müssen wir Mendix Widgets verwenden [siehe hier]. Widgets sind die Lösung von Mendix für die client-seitige Implementierung von Funktionalität.

Mendix Widgets 

Widgets in Kurzform sind eine Reihe von JavaScript-Funktionen und Anweisungen, die von einem Framework verwaltet werden. Das Widgets-Backbone-Framework war früher Dojo [siehe hier], aber es wurde wegen seiner Einfachheit und besseren Leistung durch React ersetzt. Im Widget können Sie einfach das HTML DOM modifizieren, Elemente hinzugefügen oder entfernen. Es können auch Ereignisse und vieles mehr implementiert werden. Widgets sind also ein recht mächtiges Werkzeug zur Unterstützung verschiedenster Szenarien im Browser. Wir müssen nur ein Widget in eine Seite importieren, dann verwaltet Mendix dessen Lebenszyklus, so einfach ist das!


Wie es funktioniert

Google Maps-APIs benötigen ein Div-HTML-Element, um Karten und Markierungen zu zeichnen. Daher können wir innerhalb des Widgets ein Div-Element erstellen und es an die API übergeben, um ein Kartenobjekt im Widgets zu initialisieren. Etwa wie folgt:

map = new google.maps.Map(document.getElementById('map'), {

  center: {lat: -34.397, lng: 150.644},

  zoom: 8

});

Jetzt haben wir ein Widget erstellt, das eine Karte anzeigt, aber für mehr Funktionalität müssen Sie noch etwas mehr über die API in Erfahrung bringen.

Und was sind Ebenen? Eigentlich sind Ebenen nur einfache Formen, die auf der Karte gezeichnet werden. Ein Ansatz zur Simulation von Ebenen in einer Karte besteht darin, dass der Entwickler mehrere Arrays zur Aufnahme von Informationen wie Typ, Symbol und Farbe erstellt und diese dann auf der Karte zeichnen lässt. Benutzer können Ebenen ein- oder ausblenden.

Use case

 

Kürzlich implementierte ein Mendix-Beratungsunternehmen ein Tool für den niederländischen Eisenbahnanbieter NS, um ihm bei der Arbeit mit Zwischenfällen zu helfen und eine Alternativroute, z.B. mit dem Bus, vorzuschlagen, wenn eine Strecke blockiert ist, oder NS bei der Verwaltung seiner Ressourcen in verschiedenen Situationen zu unterstützen.

Die Implementierung einer solchen interaktiven Karte im Hinblick auf neue Eingaben von verschiedenen Benutzern und die Aktualisierung der Karte für alle Benutzer kann eine Herausforderung darstellen. Natürlich sind sie fallabhängig, aber die Verwendung verschiedener Techniken und Technologien wird Ihnen helfen, eine sehr reichhaltige, benutzerfreundliche, geographisch basierte Schnittstelle zu schaffen, wie z.B. die Verwendung von SingalR, um Daten von einem bestimmten Benutzer zu übertragen, die für alle Benutzer angezeigt werden sollen, oder die Verwendung von Caching-Techniken, um die Datenabrufe zu verringern. Bei dieser Art von Anwendung ist die Anzahl der Datenpunkte und die Benutzerinteraktion recht hoch und ein einfaches Design würde nicht ausreichen. Mendix ist jedoch ein leistungsfähiges Werkzeug, das diese Art von Szenarien unterstützen kann.

New call-to-action

 

Hossein Bahrami

Hossein Bahrami

Mansystems

Zusammenhängende Posts

Mendix World 2.0 - exklusiver Workshop von Dr. Hannah Fry

Als ich erfuhr, dass Dr. Hannah Fry auf der Mendix World sprechen würde, war ich gespannt, was sie zu sagen hatte.  Hannah Fry ist außerordentliche ...

Lesen Sie mehr

Werden Sie UX-Botschafter

Jason Teunissen hat eine klare Vision für die Zukunft des UX-Designs. Er möchte die Messlatte höher legen, weil das UX-Design das wichtigste Element ...

Lesen Sie mehr

Mendix Workflows - Was wir bisher wissen

Workflows sind eine brandneue Technologie, die dem Mendix-Ökosystem hinzugefügt wird. Stellen Sie sie sich wie asynchrone langlebige Microflows vor. ...

Lesen Sie mehr