Working with the map

Once you have a map control on screen (see the Quick Start), the following operations are the same across WPF, WinForms, Blazor and MAUI — they are methods on the control instance. The examples below assume a map variable referring to your control, and that the map's ready event has already fired.

Important

Call these methods only after the map's ready event (MapReady, or OnMapReady in Blazor). Calling them earlier has no effect because the underlying map has not loaded yet. In WPF, WinForms and MAUI code you can also await map.WaitForReadyAsync(), or check map.IsMapReady.

Markers

using TMS.Maps.Core.Models;
using TMS.Maps.Core.Models.UI;

// Simple marker
await map.AddMarkerAsync(37.7749, -122.4194, "San Francisco");

// Marker with an explicit id (so you can update/remove it later)
string id = await map.AddMarkerWithIdAsync(40.7128, -74.0060, "New York");

// Marker from a model
await map.AddMarkerAsync(new MapMarker(new Coordinate(48.8566, 2.3522)) { Title = "Paris" });

// Batch add
await map.AddMarkersAsync(new[]
{
    new MapMarker(new Coordinate(51.5074, -0.1278)) { Title = "London" },
    new MapMarker(new Coordinate(52.5200, 13.4050)) { Title = "Berlin" },
});

await map.RemoveMarkerAsync(id);
await map.ClearMarkersAsync();

Shapes

using TMS.Maps.Core.Models;

// Polyline from a list of coordinates
await map.AddPolylineAsync(new[]
{
    new Coordinate(37.77, -122.42),
    new Coordinate(37.80, -122.40),
    new Coordinate(37.78, -122.39),
});

// Polygon (outer ring)
await map.AddPolygonAsync(new[]
{
    new Coordinate(37.78, -122.42),
    new Coordinate(37.80, -122.42),
    new Coordinate(37.80, -122.40),
    new Coordinate(37.78, -122.40),
});

// Circle: centre + radius in metres
await map.AddCircleAsync(37.7749, -122.4194, radiusMetres: 1000);

// Rectangle: north, east, south, west bounds
await map.AddRectangleAsync(north: 37.81, east: -122.39, south: 37.77, west: -122.43);

For full control over stroke, fill, opacity and z-order, build a MapPolyline, MapPolygon, MapCircle or MapRectangle and pass it to the matching Add…Async overload.

Clustering & heatmaps

using TMS.Maps.Core.Models.UI;

// Cluster nearby markers (uses sensible defaults, or pass MapClusterOptions)
await map.EnableClusteringAsync();
await map.EnableClusteringAsync(new MapClusterOptions { Radius = 80, MaxZoom = 15 });
await map.DisableClusteringAsync();

// Heatmap layer
var heatmap = new MapHeatmap(new[]
{
    new HeatmapPoint(37.77, -122.42, weight: 1.0),
    new HeatmapPoint(37.78, -122.41, weight: 0.5),
});
await map.AddHeatmapAsync(heatmap);

using TMS.Maps.Core.Models;

await map.PanToAsync(new Coordinate(35.6762, 139.6503)); // Tokyo
await map.FitToMarkersAsync();                            // zoom to show all markers

Handling events

The desktop and MAUI controls expose standard .NET events; the Blazor component exposes EventCallback parameters.

map.MapClicked += (_, e) =>
    Debug.WriteLine($"Clicked at {e.Coordinate.Latitude}, {e.Coordinate.Longitude}");

map.MarkerClicked += (_, e) =>
    Debug.WriteLine($"Marker clicked: {e.Marker.Title}");

map.MapClicked += (_, e) =>
    Debug.WriteLine($"Clicked at {e.Coordinate.Latitude}, {e.Coordinate.Longitude}");

map.MarkerClicked += (_, e) =>
    Debug.WriteLine($"Marker clicked: {e.Marker.Title}");

<MapControl @ref="_map"
            Provider="Providers.Google"
            ApiKey="YOUR_API_KEY"
            OnMapClicked="OnMapClicked"
            OnMarkerClicked="OnMarkerClicked"
            Width="100%"
            Height="600px" />

@code {
    private MapControl? _map;

    private void OnMapClicked(MapClickEventArgs e)
        => Console.WriteLine($"Clicked at {e.Coordinate.Latitude}, {e.Coordinate.Longitude}");

    private void OnMarkerClicked(MarkerClickEventArgs e)
        => Console.WriteLine($"Marker clicked: {e.Marker.Title}");
}

Map.MapClicked += (_, e) =>
    Debug.WriteLine($"Clicked at {e.Coordinate.Latitude}, {e.Coordinate.Longitude}");

Map.MarkerClicked += (_, e) =>
    Debug.WriteLine($"Marker clicked: {e.Marker.Title}");

Switching providers at runtime

Set the control's Provider property to switch map providers live (subject to the provider supporting mapping — see Providers):

map.Provider = Providers.Leaflet; // no API key required

See the API reference for the complete control surface, including the per-shape event set (right-click, double-click, drag, vertex-changed) and tile/traffic layers.