Trying to create a map showing route in WPF app

Question

I'm creating an app that imports a set of values from CSV, including a set of coordinates when measuring something. I created a list of objects from CSV file and I tried to create a list of extracted coordinates to create a route on map, so I tried finding ways from other people to how they created routes but nothing worked in my case

public partial class RouteWindow : Window
{
    private GMapControl gmapControl;

    public RouteWindow(List<BaseCsvData> list)
    {
        InitializeComponent();

        List<(double Latitude, double Longitude)> coordinates = 
            list.Select(data => (data.Latitude, data.Longitude)).ToList();

        gmapControl = new GMapControl();

        gmapControl.Width = 800;
        gmapControl.Height = 460;

        // init
        gmapControl.MapProvider = GMapProviders.OpenStreetMap;
        GMaps.Instance.Mode = AccessMode.ServerOnly;
        gmapControl.MinZoom = 1;
        gmapControl.MaxZoom = 18;
        gmapControl.Zoom = 12;
        gmapControl.Position = new PointLatLng(coordinates[0].Latitude, coordinates[0].Longitude);

        // markers
        foreach (var (latitude, longitude) in coordinates)
        {
            GMapMarker marker = new GMapMarker(new PointLatLng(latitude, longitude));
            gmapControl.Markers.Add(marker);
        }

        // list of points
        List<PointLatLng> routePoints = coordinates.Select(c => new PointLatLng(c.Latitude, c.Longitude)).ToList();

        // add GMapControl to grid
        Grid grid = new Grid();
        grid.Children.Add(gmapControl);
        this.Content = grid;

        // zooming
        gmapControl.MouseWheel += GmapControl_MouseWheel;

        this.Closed += (sender, e) =>
        {
            DisposeMapControl();
        };
    }

    private void GmapControl_MouseWheel(object sender, MouseWheelEventArgs e)
    {
        e.Handled = true;

        if (e.Delta > 0)
        {
            // Zoom in
            gmapControl.Zoom += 1;
        }
        else if (e.Delta < 0)
        {
            // Zoom out, with a minimum zoom level
            if (gmapControl.Zoom > 1)
            {
                gmapControl.Zoom -= 1;
            }
        }
    }

    public void DisposeMapControl()
    {
        gmapControl.Dispose();
    }
}

I tried code from some other online projects, some from WinForms, I tried asking ChatGPT for help but it returned

// Create a route
        GMapRoute route = new GMapRoute(routePoints, "Route");
        route.Stroke = new Pen(Brushes.Blue, 3).Frozen; // Set the color and thickness of the route line
        gmapControl.Overlays.Add(route);

To which were errors on Stroke 'GMapRoute' does not contain a definition for 'Stroke' and no accessible extension method 'Stroke' accepting a first argument of type 'GMapRoute' could be found (are you missing a using directive or an assembly reference?) and same error for Overlays. I'm relatively new to C# and using some library for maps so I would be thankful for any suggestions

Answer 1

To add any object to map you can use gmapControl.Markers.Add. Even though it looks like you could add only GMapMarker objects, other objects also inherit from GMapMarker (in this case GMapRoute).

Changing visual style can be done via GMapRoute.Shape property.

GMapRoute route = new GMapRoute(routePoints);
route.Shape = new Path() { Stroke = new SolidColorBrush(Colors.Blue), StrokeThickness = 3 };
gmapControl.Markers.Add(route);

You can style point markers in similar fashion:

// markers
foreach (var (latitude, longitude) in coordinates)
{
    GMapMarker marker = new GMapMarker(new PointLatLng(latitude, longitude));
    marker.Shape = new Ellipse() 
    { 
        Fill = new SolidColorBrush(Colors.Red),
        Width = 8,
        Height = 8,
        // Without Margin, circles would not be centered.
        Margin = new Thickness(-4, -4, 0, 0) 
    };

    gmapControl.Markers.Add(marker);
}