Search code examples
c#wpfxamluser-controlsgmap.net

GMap.NET C# WFP: Can i add custom UserControl into GMapControl overlays?


Project: c#, wpf, .net4.0, Gmap.Net.Presentation 1.7.1.

What I have:

My custom MapControl class inherited from GMap.NET.WindowsPresentation.GMapControl class.

public sealed class MapControl : GMapControl
{
    /* Some special data. */

    public MapConrol()
        : base()
    {
        /* Some init actions. */
    }

    /* Overrided and additional methods. */
}

And, for example, I have some custom UserControl class.

Code:

public sealed partial class MapObjectMarkerUiControl : UserControl
{
    /* Some special data. */

    public MapObjectMarkerUiControl()
    {
        /* Some init actions. */
    }

    /* Overrided and additional methods. */
}

Xaml:

<UserControl x:Class="MapCustomControls.MapObjectMarkerUiControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             Width="40" Height="40" RenderTransformOrigin="0.5, 0.5">
    <Grid>
        <!-- Some visual controls: text, buttons, etc. -->
    </Grid>
</UserControl>

Example of custom user control:

enter image description here

What I need:

Is there any way to add it to the map with reference to the geo coordinates? Something like this one: gmap.AddCustomUserControl(UserControl customMarker, double latitude, double longitude);

May be I should to inherit my UserControl from other class or implement some Gmap.NET interface that allow to add my widget to the map.

Any advice, tips, help?

P.S. If I solve this problem, I will post it here. I guess it will very helpful for others.

Also, I found a lot of questions about GMap on StackOverflow and so on, and everywhere I saw Overlay class.

GMapOverlay markersOverlay = new GMapOverlay("markers");
gmap.Overlays.Add(markersOverlay);

In my verstion I haven't this one. I have already exist built-in marker overlay into GMap class.

gmap.Markers - ObservableCollection of the GMapMarkers.

And there is no way to create my own overlays and add it to GMapControl object.

UPDATE 0:

First idea in my head. Just add GMapMarkers on the map with some special tag by id of map object, for example. And OnRender() of the GMapControl find all the markers on the screen, parse their ids and draw above my wpf UserControls. But I hope there is some internal mechanics in the GMapControl for that.

enter image description here


Solution

  • I believe the solution is easier than what you've tried, you can derive from GMapMarker, e.g.:

    class CustomMarker: GMapMarker
    {
        public string Description { get; set; }
    
        public CustomMarker(PointLatLng pos, string description)
                : base(pos)
        {
            Description = description;
            Shape = new CustomMarkerElement();
    
            ((CustomMarkerElement)Shape).lblDesc.Content = description;            
        }
    }
    

    This marker instance gives you access to the UI properties within an own CustomerMarkerElement (an UserControl within the project):

    <UserControl x:Class="WpfApplication3.CustomMarkerElement"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 mc:Ignorable="d" 
                 d:DesignHeight="300" d:DesignWidth="300">
        <Grid>
            <Ellipse 
                Fill="DarkKhaki"
                Height="40"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Width="40" />
    
            <Label 
                x:Name="lblDesc"
                Content="TST" 
                Foreground="White" 
                FontWeight="Bold" 
                HorizontalAlignment="Left" 
                HorizontalContentAlignment="Center" 
                Margin="0,6"
                VerticalAlignment="Top"
                Width="40"/>
    
        </Grid>
    </UserControl>
    

    The downside is that afaik there is no way to have this in an MVVM conform way (e.g. define the custom markers within an item template).