Maps

Prof. Dr. Robin Nunkesser

Vorgehen

Agent-generated example: csharp-maui-maps

• Ziel: ein kleines, gut erklärbares Beispiel für Microsoft.Maui.Controls.Maps
• sichtbares Ergebnis: Karte, ein Pin und ein Button zum Zentrieren
• bewusst out of scope: GPS, Suche, Routing, mehrere Pins, MVVM

Verwendete Instructions

• System- und Agent-Regeln: kleinster sinnvoller Scope, erst Kontext lesen, Änderungen verifizieren
• .github/copilot-instructions.md: kleine, reviewbare Änderungen und echte Verifikation
• .github/instructions/artifacts.instructions.md: kleine, explizite, verifizierbare Änderungen in artifacts/
• .github/instructions/artifacts-consumers-education.instructions.md: didaktische Klarheit, ein Hauptkonzept, Foliensatzbezug und Vergleich mit dem manuellen Beispiel
• .github/instructions/slides.instructions.md: knappe, gut scannbare Folien

Exakter Prompt

Erstelle ein kleines agent-generated example für Microsoft.Maui.Controls.Maps in einem Lehrprojekt dieses Repos.
Lies zuerst die relevanten Repository-Instructions und ermittle den zugehörigen Foliensatz.
Dokumentiere die verwendeten Instructions und den exakten Prompt, füge beides in den Foliensatz ein und vergleiche das Ergebnis mit dem bestehenden manuellen Beispiel.
Bevorzuge didaktische Klarheit, kleinen Scope und überprüfbare Ergebnisse.

Ergebnis

Beispielprojekt

• Maps

Lernziel

• Microsoft.Maui.Controls.Maps in einer MAUI-App aktivieren
• eine Karte mit fester Region anzeigen
• einen einzelnen Pin setzen
• per Button wieder auf eine bekannte Region zentrieren

Die drei Kernschritte

1. Maps-Paket im Projekt referenzieren
2. Maps-Unterstützung in MauiProgram.cs aktivieren
3. Map, Pin und MoveToRegion(...) verwenden

Projekteinbindung

<PackageReference Include="Microsoft.Maui.Controls.Maps" Version="8.0.20" />

builder
    .UseMauiApp<App>()
    .UseMauiMaps();

• Das Paket bringt die Kartensteuerung mit.
• UseMauiMaps() registriert die notwendige Unterstützung in der App.

Minimale Oberfläche

<VerticalStackLayout Spacing="12">
    <Button Clicked="OnCenterOnCampusClicked"
            Text="Center on HSHL" />

    <maps:Map x:Name="CampusMap"
              HeightRequest="420"
              MapType="Street" />
</VerticalStackLayout>

• ein Button für eine sichtbare Aktion
• eine einzelne Karte als Hauptbestandteil der Seite
• keine zusätzliche Architektur nötig

Pin und Kartenausschnitt

private static readonly Location HshlLocation = new(51.6827, 7.8410);
private static readonly Distance VisibleRadius = Distance.FromKilometers(1);

CampusMap.Pins.Add(new Pin
{
    Label = "HSHL",
    Address = "Hochschule Hamm-Lippstadt",
    Location = HshlLocation,
    Type = PinType.Place
});

• Location beschreibt den Punkt auf der Karte.
• Pin markiert diesen Punkt für die Benutzer.

Zentrieren per Button

private void OnCenterOnCampusClicked(object? sender, EventArgs e)
{
    CenterOnCampus();
}

private void CenterOnCampus()
{
    CampusMap.MoveToRegion(
        MapSpan.FromCenterAndRadius(HshlLocation, VisibleRadius));
}

• Das Beispiel zeigt bewusst genau eine kleine Interaktion.
• So bleibt der Zusammenhang zwischen Button, Event und Kartenaktion gut sichtbar.

Vollständige Minimalversion von MainPage.xaml.cs

using Microsoft.Maui.Controls.Maps;
using Microsoft.Maui.Devices.Sensors;
using Microsoft.Maui.Maps;

namespace Maps;

public partial class MainPage : ContentPage
{
    private static readonly Location HshlLocation = new(51.6827, 7.8410);
    private static readonly Distance VisibleRadius = Distance.FromKilometers(1);

    public MainPage()
    {
        InitializeComponent();
        ConfigureMap();
    }

    private void ConfigureMap()
    {
        CampusMap.Pins.Add(new Pin
        {
            Label = "HSHL",
            Address = "Hochschule Hamm-Lippstadt",
            Location = HshlLocation,
            Type = PinType.Place
        });

        CenterOnCampus();
    }

    private void OnCenterOnCampusClicked(object? sender, EventArgs e)
    {
        CenterOnCampus();
    }

    private void CenterOnCampus()
    {
        CampusMap.MoveToRegion(MapSpan.FromCenterAndRadius(HshlLocation, VisibleRadius));
    }
}

Typische Erweiterungen

• aktuelle Position des Geräts anzeigen
• mehrere Pins aus einer Liste laden
• zwischen Street, Hybrid und Satellite umschalten
• auf Tipp einen neuen Pin setzen
• Suchfeld oder Routing später ergänzen

Sinnvolle Reihenfolge für Erweiterungen

1. mehrere feste Pins
2. Umschalten des MapType
3. aktuelle Position mit Berechtigungen
4. Suche oder Routing

• Die ersten beiden Schritte bleiben didaktisch einfach.
• Standort und Routing sind sinnvoll, aber deutlich komplexer.