1. Home
  2. Forum
  3. Xamarin.Forms
  4. Different Coloured/Icon Map Markers

Different Coloured/Icon Map Markers

I'm creating an observable collection of MapMarkers. All my markers have the same icon and colour as determined by the MapMarkerSettings.

How can I create a custom map marker with a colour and icon of my choice?

4 Replies
HM Hemalatha Marikumar Syncfusion Team March 5, 2020 12:26 PM UTC

Hi Craig Muckleston, 
 
Greetings from Syncfusion. 
 
Query: How can I create a custom map marker with a colour and icon of my choice? 
 
Your requirement has been achieved by using CustomMarker with help of MarkerTemplate (to load a desired template view) and Markers (with collection of custom markers with desired icon, color) as per in below code snippet 
 
<maps:SfMaps x:Name="sfmap"  BackgroundColor="White"> 
                <maps:SfMaps.Layers > 
                    <maps:ShapeFileLayer x:Name="layer" Uri="world1.shp" Markers="{Binding Data}"> 
                        <maps:ShapeFileLayer.MarkerTemplate> 
                            <DataTemplate> 
                                <StackLayout Orientation="Horizontal"> 
                                    <Label FontSize="28" TextColor="{Binding MarkerColor}" Text="{Binding MarkerText}"/> 
                                    <Image Source="{Binding MarkerSource}"/> 
                                </StackLayout> 
                            </DataTemplate> 
                        </maps:ShapeFileLayer.MarkerTemplate> 
                    </maps:ShapeFileLayer> 
                </maps:SfMaps.Layers> 
            </maps:SfMaps> 
 
ViewModel: 
 
public class ViewModel 
    { 
        public ObservableCollection<MapMarker> Data { get; set; } 
        public ViewModel() 
        { 
            Data = new ObservableCollection<MapMarker>() 
            { 
                    new CustomMarker(Color.Red,ImageSource.FromResource("Maps_GettingStarted.pin.png"),"A"){Latitude = "38.8833",Longitude = "-77.0167" }, 
                    new CustomMarker(Color.Blue,ImageSource.FromResource("Maps_GettingStarted.pin.png"),"B"){Latitude = "-15.7833",Longitude = "-47.866"}, 
                    new CustomMarker(Color.Green,ImageSource.FromResource("Maps_GettingStarted.pin.png"),"C"){Latitude = "21.0000", Longitude = "78.0000"}, 
                    new CustomMarker(Color.Yellow,ImageSource.FromResource("Maps_GettingStarted.pin.png"),"D"){Latitude = "35.0000",Longitude = "103.0000"}, 
                    new CustomMarker(Color.Magenta,ImageSource.FromResource("Maps_GettingStarted.pin.png"),"E"){Latitude = "-6.1750",Longitude = "106.8283"}, 
            }; 
        } 
    } 
 
Corresponding Model- CustomMarker: 
 
public class CustomMarker:MapMarker  
    { 
        public CustomMarker(Color color, ImageSource source, string text) 
        { 
            MarkerColor = color; 
            MarkerSource = source; 
            MarkerText = text; 
        } 
 
        public Color MarkerColor 
        { 
            get; 
            set; 
        } 
 
        public ImageSource MarkerSource 
        { 
            get; 
            set; 
        } 
 
        public string MarkerText 
        { 
            get; 
            set; 
        } 
    } 
 
Please download the sample in below link:  
 
 
To know more about this, refer below UG link 
 
 
Regards, 
Hemalatha M. 


CM Craig Muckleston March 5, 2020 01:01 PM UTC

Thanks, will it work on an ImageLayer? I'm using Bing Maps, but still can;t see my markers


CM Craig Muckleston March 5, 2020 01:04 PM UTC

Got it working - thanks

HM Hemalatha Marikumar Syncfusion Team March 6, 2020 05:26 AM UTC

Hi Craig Muckleston, 
 
Thanks for your update. 
 
We are glad to hear that given solution works. 
 
If you need any further assistance, please don't hesitate to contact us. 
 
Regards, 
Hemalatha M. 


Loader.
Up arrow icon