18. Mär 2024
Lesedauer 12 Min.
Auf nach MAUI!
Kartendienste mit .NET MAUI
Geodaten mit MAUI zu nutzen kann kniffelig sein. Dabei gilt es einiges zu bedenken.
dotnetpro
Das Reiseziel der Überschrift, die Insel Maui, auf der Karte zu finden, dürfte keine allzu großen Probleme zu bereiten. Der Namenspate für das plattformübergreifende Framework .NET MAUI ist eine Insel, mit einer Fläche von 1883 km² die zweitgrößte Insel des Archipels Hawaii im Pazifischen Ozean und gehört zum US-amerikanischen Bundesstaat Hawaii [1]. Da stellt sich dem .NET-Entwickler doch sogleich die grundlegende Frage, welche Möglichkeiten es gibt, die Lage von Maui auf Karten und mit Kartendiensten im plattformübergreifenden Framework .NET MAUI darzustellen. Die Herausforderung besteht darin, dass Apps für .NET MAUI auf den unterschiedlichsten Betriebssystemen und Gerätetypen ausgeführt werden können. Konkret sind es Windows und macOS auf einem Desktop-Rechner sowie Android und iOS auf mobilen Geräten. Für jedes System gibt es allerdings einen anderen Kartenanbieter:
- Android: Google Maps
- iOS/macOS: Apple Maps
- Windows: Bing Maps
Anwendungsfälle
Die Verwendung von Kartendiensten in Apps hat in den letzten Jahren stark zugenommen und spielt eine entscheidende Rolle in zahlreichen Anwendungen und Diensten. Dazu gehören beispielsweise:- Standortbestimmung: Kartendienste ermöglichen es Apps, den genauen Standort eines Nutzers zu ermitteln. Dies ist entscheidend für Dienste wie Navigation, standortbasiertes Suchen und das Teilen des eigenen Standorts in den unterschiedlichen sozialen Medien.
- Navigation: Kartendienste bieten detaillierte Karten und Routenführungen, um Nutzern unterwegs bei der Orientierung zu helfen. Dies kann in Apps für die Fahrzeug-, Fußgänger- oder Fahrradnavigation eingesetzt werden.
- Ortsbasierte Dienste: Apps nutzen Kartendienste, um zu einem vom Nutzer angegebenen Ort Daten anzuzeigen, beispielsweise nahe gelegene Restaurants, Geschäfte oder Sehenswürdigkeiten. Diese Informationen sind besonders nützlich in Reise- und Bewertungs-Apps.
- Geofencing: Mit Kartendiensten können Anwendungen sogenannte virtuelle Geofences erstellen, um Nutzer benachrichtigen oder Aktionen auslösen zu können, sobald sie einen bestimmten geografischen Bereich entweder betreten oder verlassen.
- Verkehrsinformationen: Anwendungen binden Verkehrsinformationen ein, um Nutzern Echtzeitdaten über Staus, Unfälle und Straßensperrungen zur Verfügung zu stellen. Dies ist hilfreich für Navigations- und Pendel-Apps.
- Offline-Nutzung: Kartendienste ermöglichen es außerdem, Karten offline zu speichern und ohne Internetverbindung zu verwenden. Dies ist besonders praktisch für Reisende in Gegenden mit schlechter Netzabdeckung.
- Integration in andere Dienste: Kartendienste werden oft in andere Apps eingebunden, um die Nutzererfahrung zu verbessern. Beispielsweise können sie in E-Mail-Apps verwendet werden, um den Standort eines Treffpunkts anzugeben, oder in Lieferdienst-Apps, um den Fortschritt einer Lieferung in Echtzeit anzuzeigen.
Datenschutz und Kartendienste
Bei der Nutzung von Ortungsdiensten und der Darstellung der Daten in Karten sind datenschutzrechtliche Aspekte zu beachten. Die größte Sorge im Zusammenhang mit Ortungsdiensten ist der Schutz der Privatsphäre. Standortdaten von Anwendern sind hochgradig sensibel und könnten dazu verwendet werden, die Nutzer zu überwachen, zu verfolgen oder sogar zu belästigen. Unbefugter Zugriff auf diese Daten oder deren Weitergabe an Dritte ohne Zustimmung kann schwerwiegende Folgen haben.
Map-Control
Das Map-Control kapselt die nativen Kartensteuerelemente und stellt damit eine einheitliche Programmierschnittstelle dar. Diese Aussage gilt jedoch nicht für die Windows-Plattform. Das liegt daran, dass mit .NET MAUI Anwendungen auf der Basis des WinUI 3-Frameworks generiert werden. Für WinUI 3 existiert bis zum heutigen Zeitpunkt noch kein entsprechendes natives Control. Es gibt zwar ein Map-Control für UWP (Universelle Windows-Plattform, WinUI 2.*), WinUI 3 nutzt es jedoch nicht [2].Mit anderen Worten: Mit dem Map-Control lassen sich nur Karten auf Android, iOS und macOS (Bild 1) darstellen. Die Einrichtung und Verwendung soll jetzt genauer betrachtet werden. Dazu legen Sie eine neue .NET-MAUI-App mithilfe eines neuen Projekts an. Fügen Sie als Nächstes einen Verweis auf das NuGet-Paket Microsoft.Maui.Controls.Maps hinzu. Gemäß der Dokumentation [3] ist eine Initialisierung der Komponente und eine plattformspezifische Konfiguration sowie das Einholen von Berechtigungen notwendig. Das NuGet-Paket wird initialisiert, indem die Methode UseMauiMap für das MauiAppBuilder-Objekt in der CreateMauiApp()-Methode der MauiProgram-Instanz aufgerufen wird. Wem diese Beschreibung zu verwirrend ist, der schaue sich in Listing 1 um.
Darstellung der Karte unter iOS im Simulator (Bild 1)
Autor
Listing 1: Das NuGet-Paket Microsoft.Maui.Controls.Maps initialisieren
<span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">class</span> <span class="hljs-title">MauiProgram</span><br/>{<br/> <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> MauiApp <span class="hljs-title">CreateMauiApp</span>(<span class="hljs-params"></span>)</span><br/><span class="hljs-function"> </span>{<br/> <span class="hljs-keyword">var</span> builder = MauiApp.CreateBuilder();<br/> builder<br/> .UseMauiApp&lt;App&gt;()<br/> .ConfigureFonts(fonts =&gt;<br/> {<br/> fonts.AddFont(<span class="hljs-string">"OpenSans-Regular.ttf"</span>,<br/> <span class="hljs-string">"OpenSansRegular"</span>);<br/> fonts.AddFont(<span class="hljs-string">"OpenSans-Semibold.ttf"</span>,<br/> <span class="hljs-string">"OpenSansSemibold"</span>);<br/> })<br/> .UseMauiMaps();<br/><br/> <span class="hljs-keyword">return</span> builder.Build();<br/> }<br/>}
Unter iOS sind die folgenden Schlüssel/Berechtigungen zu definieren:
- NSLocationAlwaysAndWhenInUseUsageDescription: Dieser Schlüssel enthält eine Nachricht, die den Nutzern mitteilt, warum die App jederzeit Zugriff auf die Standortinformationen anfordert.
- NSLocationUsageDescription: Beschreibt den Grund, warum die App auf die Standortinformationen zugreift. Wenn das System den Nutzer auffordert, den Zugriff zu erlauben, wird diese Zeichenfolge als Teil des Warnfelds angezeigt. Dieser Schlüssel wird in iOS 6.0 bis iOS 7 unterstützt. iOS 8 und höhere Versionen ignorieren ihn.
<key>NSLocationAlwaysAndWhenInUseUsage-
Description</key>
<string>Can we use your location at all
times?</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Can we use your location when your app is being
used?</string>
Binden Sie <Map> in eine XAML-Seite der App ein, beispielsweise in einem <Grid>-Layout-Container (Listing 2). Danach können Sie die App kompilieren und starten. Bei der erstmaligen Nutzung des Standortdienstes oder der Karte wird die Meldung zur Verwendung angezeigt. Danach wird die Karte erfolgreich unter iOS eingeblendet (Bild 2).
Listing 2: Ein <Map>-Control in eine XAML-Seite einbinden
&lt;?xml version="1.0" encoding="utf-8" ?&gt;<br/>&lt;ContentPage<br/> xmlns="http://schemas.microsoft.com/dotnet/2021/maui"<br/> xmlns:x=<br/> "http://schemas.microsoft.com/winfx/2009/xaml"<br/> xmlns:vm="clr-namespace:MauiAppMap1.ViewModels"<br/> x:Class="MauiAppMap1.Views.MapPage"<br/> x:DataType="vm:MapViewModel"&gt;<br/> &lt;Grid&gt;<br/> &lt;Map x:Name="TheMap" /&gt;<br/> &lt;/Grid&gt;<br/>&lt;/ContentPage&gt; 
Generieren eines API-Schlüssels in Googles Cloud-Konsole (Bild 2)
Autor
Nun zu Android, das Google Maps als Kartendienst verwendet. Dessen Nutzung erfordert einen individuellen Schlüssel, der sich über Googles Cloud-Konsole erstellen lässt [4]. Dazu beginnen Sie ein neues Projekt in der Konsole und hinterlegen eine Kreditkartennummer für eine mögliche spätere kommerzielle Nutzung. Der Schlüssel kann aus Gründen der Sicherheit auch in der Verwendung eingeschränkt werden (Bild 2). Kopieren Sie den Schlüssel aus dem Dashboard der Cloud-Konsole, öffnen Sie die Manifestdatei von Android in dem .NET-MAUI-Projekt unter Platforms\Android\AndroidManifest.xml und ergänzen Sie folgenden Eintrag:
<application android:allowBackup="true"
android:icon="@mipmap/appicon"
android:roundIcon="@mipmap/appicon_round"
android:supportsRtl="true">
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value=" YOUR-API-KEY" />
</application>
Dabei ist der Platzhalter YOUR-API-KEY durch den eben generierten Schlüssel zu ersetzen. Zusätzlich ist der folgende Eintrag der Manifestdatei dem <application>-Element hinzuzufügen:
<meta-data android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version" />
Ebenso erfordert Android für die Nutzung von Karten- und Standortdiensten die Anforderung von Berechtigungen. Konkret handelt es sich dabei um folgende Nutzerberechtigungen:
- ACCESS_COARSE_LOCATION: Diese Berechtigung ermöglicht es dem API, WLAN oder mobile Daten oder beides zu verwenden, um den Standort des Geräts zu bestimmen.
- ACCESS_FINE_LOCATION: Diese Berechtigungen ermöglichen es dem API, das Globale Positionssystem (GPS), WLAN oder mobile Daten zu verwenden, um einen möglichst genauen Standort zu ermitteln.
<manifest xmlns:android="http://schemas.android.com/apk/
res/android">
...
<!-- Required to access the user's location -->
<uses-permission android:name=
"android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name=
"android.permission.ACCESS_COARSE_LOCATION" />
</manifest>
Alternativ können die Berechtigungen auch komfortabel in Visual Studio hinzugefügt werden (Bild 3). Sollte die App mit der API-Version 22 oder niedriger ausgeführt werden, muss noch folgende Berechtigung ergänzt werden:
Die Berechtigungen für Android in Visual Studio zum Projekt hinzufügen (Bild 3)
Autor
<uses-permission android:name=
“android.permission.WRITE_EXTERNAL_STORAGE“ />
Als Beispiel ist in Listing 3 eine komplette Manifestdatei für die Nutzung des Kartendienstes unter Android zu sehen – genauer gesagt fast komplett, lediglich der API-Key wäre hier noch zu ergänzen.
Listing 3: Vollständige Manifestdatei zur Nutzung der Kartendienste unter Android
&lt;?xml version="1.0" encoding="utf-8"?&gt;<br/>&lt;manifest xmlns:android=<br/> "http://schemas.android.com/apk/res/android"&gt;<br/> &lt;application android:allowBackup="true"<br/> android:icon="@mipmap/appicon"<br/> android:roundIcon="@mipmap/appicon_round"<br/> android:supportsRtl="true"&gt;<br/> &lt;meta-data<br/> android:name="com.google.android.geo.API_KEY" <br/> android:value="YOU KEY" /&gt;<br/> &lt;meta-data android:name=<br/> "com.google.android.gms.version" <br/> android:value=<br/> "@integer/google_play_services_version" /&gt;<br/> &lt;/application&gt;<br/> &lt;uses-permission android:name=<br/> "android.permission.ACCESS_NETWORK_STATE" /&gt;<br/> &lt;uses-permission android:name=<br/> "android.permission.INTERNET" /&gt;<br/> &lt;uses-permission android:name=<br/> "android.permission.ACCESS_FINE_LOCATION" /&gt;<br/> &lt;uses-permission android:name=<br/> "android.permission.ACCESS_COARSE_LOCATION" /&gt;<br/>&lt;/manifest&gt;<br/>
Sind diese Vorbereitungen getroffen, kann die Anwendung kompiliert und auf einem Android-Gerät ausgeführt werden. Die Karte sollte jetzt auch auf dem Gerät angezeigt werden (Bild 4). Das hat bereits sehr gut funktioniert. Im Anschluss wird nun demonstriert, wie das Map-Control verwendet werden kann.
Die Karte auf einem Android-Device anzeigen (Bild 4)
Autor
Das Map-Control nutzen
Der Kartentyp lässt sich über das Attribut MapType festlegen, dabei stehen folgenden Werte zur Verfügung:- Street: Straßenkarte
- Satellite: Satellitenbilder
- Hybrid: Kombination von Straßen- und Satellitendaten (Bild 5)
Dieser Kartentyp kombiniert Straßen- und Satellitendaten auf iOS (Bild 5)
Autor
Als Nächstes geht es darum festzulegen, welchen Ausschnitt aus der Karte die App anzeigen soll. Dazu ist der Karte ein Objekt des Typs MapSpan zu übergeben. Das lässt sich im C#-Code erledigen; alternativ könnten Sie das MapSpan-Objekt auch im XAML-Code hinterlegen. Für dieses Objekt muss dann ein zentraler Ort und eine Ausdehnung in Breiten- und Längenrichtung angegeben werden (Listing 4).
Listing 4: Die Karte auf eine bestimmte geografische Position (hier die Stadt Weimar) verschieben
&lt;Map x:Name="MyMap"&gt;<br/> &lt;x:Arguments&gt;<br/> &lt;MapSpan&gt;<br/> &lt;x:Arguments&gt;<br/> &lt;sensors:Location&gt;<br/> &lt;x:Arguments&gt;<br/> &lt;x:Double&gt;50.99842&lt;/x:Double&gt;<br/> &lt;x:Double&gt;11.32380&lt;/x:Double&gt;<br/> &lt;/x:Arguments&gt;<br/> &lt;/sensors:Location&gt;<br/> &lt;x:Double&gt;0.01&lt;/x:Double&gt;<br/> &lt;x:Double&gt;0.01&lt;/x:Double&gt;<br/> &lt;/x:Arguments&gt;<br/> &lt;/MapSpan&gt;<br/> &lt;/x:Arguments&gt;<br/>&lt;/Map&gt;
Um den Zoom der Karte einzustellen, gibt es keine eigene Eigenschaft. Das erledigen Sie, indem Sie das eben vorgestellte MapSpan-Objekt neu initialisieren und zuweisen. Die Position für das Zentrum der Karte bleibt dabei unverändert, und Sie passen die Werte für die Ausrichtung in Längen- und Breitenrichtung an. Auch das soll ein einfaches Beispiel demonstrieren. Es setzt eine Schaltfläche in die Oberfläche und hinterlegt das Clicked-Ereignis mit folgendem Code:
if (MyMap.VisibleRegion != null)
{
MyMap.MoveToRegion(
new MapSpan(MyMap.VisibleRegion.Center, 0.1, 0.1));
}
Sofern die Karte über eine gültige Region verfügt, übernehmen Sie diese und passen die Ausdehnung in Länge und Breite jeweils auf den Wert 0,1 an. Der vorherige Wert betrug jeweils 0,01 (definiert im XAML-Code, siehe oben). Damit ergibt sich ein Zoom-Effekt (Zoom-Out).Starten Sie nun die App und klicken auf den Button. Der Zoom der Karte wird verändert, ohne dass sich das Zentrum der Darstellung anpasst (Bild 6). In der Praxis können Sie dies auch dynamisch gestalten und zum Beispiel verschiedene Zoomstufen über einen Slider oder ein ähnliches Element der Programmoberfläche einstellen.
Das Kartenbild bei unverändertem Standort vor (links) und nach (rechts) verändertem Zoom-Wert (Bild 6)
Autor
Weitere interessante Optionen und Eigenschaften der Karte sind:
- Verkehrsdaten: Mit der Eigenschaft IsTrafficEnabled kann angegeben werden, dass die Karte Verkehrsdaten zeigen soll.
- Scrollen deaktivieren: Das lässt sich über die Eigenschaft Is-ScrollEnabled erreichen.
- Zoom deaktivieren: Dazu ist die Eigenschaft IsZoomEnabled entsprechend anzugeben.
- Anzeigen des Standorts des Nutzers: Der Standort des Nutzers lässt sich direkt in der Karte anzeigen, indem IsShowingUser auf true gesetzt wird.
Pin pin = new Pin
{
Label = "Ein Ort",
Address = "Eine schöne Adresse",
Type = PinType.Place,
Location = new Location(50.99842, 11.323802)
};
MyMap.Pins.Add(pin);
Das Ergebnis ist eine Stecknadel, die am angegebenen Standort angezeigt wird. Klickt/tippt man auf diesen Marker, dann blendet die App die Informationen zu diesem Pin ein (Bild 7). Ähnlich wäre zu verfahren, um einen Bereich (Region) um einen Punkt einzuzeichnen:
Den Pin in der Karte darstellen (Bild 7)
Autor
Circle circle = new Circle
{
Center = new Location(50.99842, 11.323802),
Radius = new Distance(250),
StrokeColor = Color.FromArgb("#88FF0000"),
StrokeWidth = 8,
FillColor = Color.FromArgb("#88FFC0CB")
};
MyMap.MapElements.Add(circle);
Neben der Angabe der Position und der Farbwerte für den Kreis ist auch noch ein Wert für den Radius des Kreises festzulegen. Diese Angabe erfolgt in Metern, im obigen Beispiel sind es 250. Das Ergebnis ist ein Ring um die definierte Position (Bild 8).
Eine Region in einer Karte einzeichnen (Bild 8)
Autor
Diese und weitere Funktionen des Map-Elements sind sehr nützlich und funktionieren gut. Getestet wurde das Beispiel unter iOS und Android.Was ist aber nun mit Windows?
Karte unter Windows
Windows erfordert den Umweg über das Community Toolkit für .NET MAUI [5]. Er ermöglicht, Bing-Karten über ein WebView-Element unter Windows zu nutzen. Dazu wird das NuGet-Paket mit dem Namen CommunityToolkit.Maui.Maps im Projekt eingebunden und initialisiert. Das geschieht über die using-Anweisung am Anfang der Datei MauiProgram.cs:
using CommunityToolkit.Maui.Maps;
Um die Map-Klasse zu verwenden, muss die Methode UseMauiCommunityToolkitMaps() der MauiAppBuilder-Klasse aufgerufen werden. Diese Methode erwartet einen gültigen Bing-Maps-API-Schlüssel:
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseMauiCommunityToolkitMaps("YOUR_API_KEY")
Diesen Schlüssel bekommen Sie über das Bing-Portal [6], dazu ist die Anmeldung mit einem Microsoft-Konto notwendig.Im Test wurde diese Ergänzungen in der bestehenden
.NET-MAUI-App vorgenommen. Danach ließ sich die Karte auch in einer Windows-Anwendung (WinUI 3) der App anzeigen. In Bild 9 ist zu sehen, dass der zuvor definierte Pin und die Region ebenfalls in der Karte dargestellt werden. Das bedeutet, dass nach der Integration der Bing-Map über die WebView das generische API zur Verwendung identisch bleibt.
.NET-MAUI-App vorgenommen. Danach ließ sich die Karte auch in einer Windows-Anwendung (WinUI 3) der App anzeigen. In Bild 9 ist zu sehen, dass der zuvor definierte Pin und die Region ebenfalls in der Karte dargestellt werden. Das bedeutet, dass nach der Integration der Bing-Map über die WebView das generische API zur Verwendung identisch bleibt.
Mit einem Bing-Schlüssel lässt sich die Karte mit dem MAUI-Community-Toolkit unter Windows anzeigen (Bild 9)
Autor
Kommerzielle Alternative
Wer sich auch bei kommerziellen Produkten umsehen möchte, für den könnte das Steuerelement ArcGIS Maps for .NET Control interessant sein [7]. Dieses Control des Kartenspezialisten ArcGIS bietet viele Optionen, unter anderem unterschiedliche Kartenanbieter, das Einzeichnen von Orten, Wegen, Polygonen und die Arbeit mit Layern. Layer lassen sich ein- und ausblenden und können unterschiedliche Daten enthalten, beispielsweise Informationen zur Landschaft oder zur Bebauung.Zuerst benötigen Sie einen ArcGIS-Account. Ist dieser angelegt, können Sie einen API-Key für die Entwicklung kostenfrei abrufen. Er bietet die Möglichkeit, mit den Kartendiensten von ArcGIS zu experimentieren und eine bestimmte Anzahl von Kartenelementen (Tiles) kostenfrei darzustellen. Für Apps in der Produktion ist ein kostenpflichtiges Angebot zu wählen. Mit den folgenden Schritten lässt sich eine Karte in der App anzeigen:Erstellen Sie eine neue .NET-MAUI-App mit einer Seite (View) zur Anzeige der Karte.Verwenden Sie nun das MVVM-Entwurfsmuster für die Applikation, das heißt Sie legen zur View, welche die Karte darstellen soll, auch eine ViewModel-Klasse an. Das kann beispielsweise recht einfach mit Hilfe des MVVM Community Toolkit erfolgen.Referenzieren Sie das NuGet-Paket Esri.ArcGISRuntime.Maui. Es kapselt das API für das Karten-Control von ArcGIS.In der Datei MauiProgramm.cs, dem Einstiegspunkt der App, fügen Sie folgende Quellcodezeile hinzu:
Esri.ArcGISRuntime.ArcGISRuntimeEnvironment.ApiKey
= "[APIKey]";
Damit lizenzieren Sie die App für die Nutzung des Dienstes. Ersetzen Sie die Zeichenkette "[APIKey]" durch den individuellen Key, den Sie aus dem Dashboard des Anbieters abrufen.Wechseln Sie nun zur Klasse des ViewModel für die View, in der Sie die Karte anzeigen möchten. Erstellen Sie dort eine Eigenschaft des Typs Map (Esri.ArcGISRuntime.Mapping.Map). Dieser Eigenschaft weisen Sie eine konkrete Karte zu, beispielsweise mit Map = new Map(BasemapStyle.OSMStandard) Diese Zuweisung erledigen Sie im Konstruktor der ViewModel-Klasse.Im Anschluss daran gehen Sie in den XAML-Code zur View, in der die Karte dargestellt werden soll. Dort ergänzen Sie mit xmlns:esri=“using:Esri.ArcGISRuntime.UI.Controls“ den Verweis auf die Assembly und fügen außerdem noch das Map-Control (MapView) in die View ein, beispielsweise innerhalb eines Grid:
<esri:MapView
x:Name="MainMapView"
Map="{x:Bind ViewModel.Map}" />
Gleichzeitig wird die Eigenschaft Map des Steuerelements an die zugehörige ViewModel-Klasse gebunden.Mit diesen Schritten haben Sie eine .NET-MAUI-App erstellt, die das Karten-Control von ArcGIS verwendet. Die App kann nun auf den unterschiedlichen Zielplattformen starten. Sie zeigt jeweils eine Karte an, zum Beispiel unter Windows wie in Bild 10.
ArcGIS bietet ein kommerzielles systemübergreifendes Karten-Control, hier unter Windows (hinten) und Android (vorne) (Bild 10)
Autor
Auch dieses Control bietet vielfältige Möglichkeiten, die Kartendarstellung zu konfigurieren und Pins, Regionen und weitere Elemente – auch unter Verwendung von Layern – in die Karte einzuzeichnen. Die Komponente ist damit eine kostenpflichtige Alternative für das Standard-Kartenelement aus dem .NET-MAUI-Framework. Auf der Website des Herstellers finden sich auch Beispiele, welche die Nutzung der Komponente zeigen.
Kostenfreie Alternative
Die Bibliothek Mapsui stellt Kartendienste auf der Basis des OpenStreetMap-Dienstes für alle auf .NET basierenden UI-Systeme dar, darunter WinUI 3 und .NET MAUI, aber auch Blazor, Uno und WPF [8].Erstellen Sie eine neue .NET-MAUI-App und fügen Sie einen Verweis auf das NuGet-Paket Mapsui.Maui hinzu. In der Datei MauiProgram.cs wird der Eintrag .UseSkiaSharp(true) ergänzt. Danach kann man eine neue Karte hinzufügen, beispielsweise über C#-Code zu einer View:
var mapControl = new Mapsui.UI.Maui.MapControl();
mapControl.Map?.Layers.Add(Mapsui.Tiling.OpenStreetMap.
CreateTileLayer());
Content = mapControl;
Nach dem Start zeigt die App die Karte an. Das funktioniert auf allen unterstützten Systemen ohne weitere Konfiguration, etwa unter Windows in Bild 11. Mapsui bietet sehr umfassende Möglichkeiten, um mit Karten zu arbeiten, unter anderem die Darstellung von Punkten, Regionen und Animationen. Um einen Eindruck von der Funktionsvielfalt zu bekommen, laden das Repository für die Beispiele (für alle UI-Plattformen und unterstützten .NET-basierten Entwicklungsansätze) von GitHub herunter [9]. Öffnen Sie die Projektmappe in der IDE und aktivieren das Projekt .NET MAUI. Sie können es ausführen und mit den vielfältigen Möglichkeiten der Bibliothek experimentieren (Bild 12). Interessant ist diese Bi-bliothek insbesondere, weil sie unter nahezu allen .NET-basierten UI-Systemen eingesetzt werden und man damit eine Codebasis für die Geschäftslogik verwenden kann.
MapSui basiert auf dem Open-Source-Projekt OpenStreetMap (Bild 11)
Autor
Die Mapsui-Bibliothek bietet bei GitHub viele Beispiele (Bild 12)
Autor
Fazit und Ausblick
Die Verwendung von Kartendiensten in .NET MAUI bietet Entwicklern die Möglichkeit, standortbasierte Funktionen in plattformübergreifenden mobilen Apps einzubauen. Dies eröffnet vielseitige Anwendungen, von Navigation bis hin zu Geofencing. Entwickler können Kartenstile anpassen, Orte und Pfade einzeichnen und Interaktivität hinzufügen. Insgesamt ermöglicht die Integration von Kartendiensten in .NET MAUI eine bessere Nutzererfahrung und eröffnet neue Möglichkeiten für interessante Anwendungen. Da im Moment noch ein natives Steuerelement für WinUI 3 fehlt, lassen sich mit dem Map-Control lediglich iOS/macOS und Android abdecken. Der Einsatz unter Windows erfordert derzeit noch einen Umweg über eine webbasierte Komponente oder über ein Steuerelement eines Drittanbieters.Fussnoten
- Wikipedia: Maui, http://www.dotnetpro.de/SL2404MAUIMaps1
- Übersicht über Karten und Position, http://www.dotnetpro.de/SL2404MAUIMaps2
- Plan, http://www.dotnetpro.de/SL2404MAUIMaps3
- Google Cloud Plattform, http://www.dotnetpro.de/SL2404MAUIMaps4
- .NET Multi-platform App UI (.NET MAUI) Community Toolkit-Dokumentation, http://www.dotnetpro.de/SL2404MAUIMaps5
- Bing Maps Dev Center, http://www.bingmapsportal.com
- ArcGIS Maps SDK for .NET, http://www.dotnetpro.de/SL2404MAUIMaps6
- Mapsui documentation, https://mapsui.com
- Mapsui (pronounced map-su-wii), http://www.dotnetpro.de/SL2404MAUIMaps7
