Mapsui adding map pins in Xamarin Forms

Question

I need to add a bunch of pins on a MapsUI map control that uses OpenStreetMap tiles.

The problem is I cant find anything mentioning pins in their documentation so my question is:

Are there any pins available but have different names or i have to draw pins myself (using Geometry and Points as in some examples i found) and if so how do i keep them the same size when zooming the map ?

Maybe someone can point out where should i look in their documentation in case I'm blind and missed it.

Thanks!

have you looked at the sample apps? They use Features to draw pins on the map — Jason, Oct 03 '18 at 13:15
yes, but they are not actually pins `var point = SphericalMercator.FromLonLat(long, lat); feature.Geometry = point;` this results in a circle and i would like a Google Maps pin style(the shape at least), if i am still missing something please let me know, otherwise i think i will try to use custom icons — knightLoki, Oct 03 '18 at 13:40
https://github.com/Mapsui/Mapsui/search?q=pin&unscoped_q=pin — Jason, Oct 03 '18 at 13:45

score 3 · Answer 1 · answered Jun 06 '19 at 14:41

Your Mapsui Map View Mapsui.UI.Forms.MapView has property Pins. You can add pins there. You can access MapView View from code-behind *xaml.cs of your MapView.

For that, first, name your Map View in XAML Page:

<ContentPage
    xmlns:mapsui="clr-namespace:Mapsui.UI.Forms;assembly=Mapsui.UI.Forms"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="YourProject.Pages.YourMap">
  <ContentPage.Content>
     <mapsui:MapView
        x:Name="selectMapControl"/>
  </ContentPage.Content>
</ContentPage>

Then access it from C# code-behind of that Page:

using Mapsui.UI.Forms;

protected override async void OnAppearing()
{
    selectMapControl.Pins.Add(new Pin(new MapView())
    {
       Position = new Position(0, 0),
       Type = PinType.Pin,
       Label = "Zero point",
       Address = "Zero point",
    });
}

Hope this simplest example will help.

pauldendulk · Accepted Answer · 2020-01-08T08:03:45.893

2

The idea is that you use your own bitmaps to draw as 'pins'.

Mapsui has features. A feature has a geometry which can be a point, linestring and polygon (and some others). A feature is drawn with some kind of style. What you need to do is create features with point geometry and use a symbolstyle with a bitmap as symbol. You need to register your bitmap and use the bitmapId in the symbol. See the sample here:

https://github.com/Mapsui/Mapsui/blob/master/Samples/Mapsui.Samples.Common/Maps/PointsSample.cs

edited Jan 08 '20 at 08:03

answered Oct 03 '18 at 14:13

pauldendulk

1,378
12
23

Hi, thank you for your help! it worked very well. For anyone that might want to do this do not forget to set the Build Action of your resource as Embedded resource otherwise your image cannot be found (right click + properties) – knightLoki Oct 05 '18 at 09:56
hello again, is there a way of using images from the drawable folders from each platform? every example i found used images inside the pcl project but i want to consider screens that have different pixel densities. An ideas something like: taking a Bitmap from ImageSource then register it ? – knightLoki Nov 07 '18 at 15:37
@kisslory Yes this is possible. You need to register a raw bitmap. Perhaps you can get the raw bitmap from an Android ImageSource. Perhaps you can load the raw bytes directly. – pauldendulk Nov 07 '18 at 16:13

score 1 · Answer 3 · answered Oct 03 '18 at 14:05

You can use Xamarin.Forms.GoogleMaps as they give you the feature to add multiple pins of your choice.

Here is the sample code :

var position = new Position(Latitude, Longitude);

        var pin = new Pin
        {
            Type = PinType.Place,
            Position = position,
            Icon = BitmapDescriptorFactory.FromBundle("pin.png"),
            Label = "custom pin",
            Address = "custom detail info",
        };

        MyMap.Pins.Add(pin);

i must use OpenStreetMap as google maps is unavailable in China — knightLoki, Oct 03 '18 at 14:18

score 0 · Answer 4 · answered Nov 11 '22 at 09:46

The following works on version 3.02. I've not checked it on any other version of MapSui. First make sure your pin Bitmap is an embedded resource. You can then get the Bitmap ID like this:

var assembly = typeof(YourClass).GetTypeInfo().Assembly;
var image = assembly.GetManifestResourceStream("YourSolution.YourProject.AFolder.image.png");

If var image returns null, then the image was not found and it's likely not an embedded resource or you got the address/name wrong.

var ID = BitmapRegistry.Instance.Register(image);

The BitmapRegistry method also registers the BitMap for MapSui to use later. I think if it's your first image registered it will be 0.

Then you can create a memory layer as follows:

MemoryLayer PointLayer = new MemoryLayer
        {
            Name = "Points",
            IsMapInfoLayer=true,
            DataSource = new MemoryProvider(GetListOfPoints()),
            Style = new SymbolStyle { BitmapId = ID, SymbolScale = 0.50, SymbolOffset = new Offset(0, bitmapHeight * 0.5) };
            
        };

The DataSource can be generated as follows (I'm just adding one feature, but you can add as many as you like):

private IEnumerable<IFeature> GetListOfPoints()
    {
        List<IFeature> list = new List<IFeature>();

        var feature = new Feature();
        feature.Geometry = new Point(-226787, 7155483);
        feature["name"] = "MyPoint";

        list.Add(feature);

        IEnumerable<IFeature> points = list as IEnumerable<IFeature>;
        return points;
    }

Then add the new MemoryLayer to your Map as follows:

MapControl.Map?.Layers.Add(PointLayer);

Mapsui adding map pins in Xamarin Forms

4 Answers4