Different color markers on SfMap ImageryLayer

[Jakub]

Greetings!

Is it possible to have different colors for some markers on the Imagery Layer of the SfMap control? I can display the markers just fine where I would like them but I would like to have some of the markers shown in different colors based on some criteria. I am using an Observable Collection to display my markers.

Thank you in advance!

Jacob

[Sridevi Sivakumar]

Hi Jakub,

Greetings from Syncfusion.

You can set the different color for each marker by Binding different colors with MarkerTemplate as per the below code snippet 

[XAML]: 

        <Sync:SfMap> 

            <Sync:SfMap.Layers> 

                <Sync:ImageryLayer Markers="{Binding Models}"   > 

                    <Sync:ImageryLayer.MarkerTemplate> 

                        <DataTemplate> 

                            <StackPanel Orientation="Horizontal" Background="Transparent"> 

                                <Ellipse Width="10" Height="10"   Fill="{Binding Data.MarkerColor}" /> 

                            </StackPanel> 

                        </DataTemplate> 

                    </Sync:ImageryLayer.MarkerTemplate> 

                </Sync:ImageryLayer> 

            </Sync:SfMap.Layers> 

        </Sync:SfMap> 

 

[ViewModel.cs]: 

    public class ViewModel 

    { 

        public ObservableCollection<Model> Models { get; set; } 

        public ViewModel() 

        { 

            this.Models = new ObservableCollection<Model>(); 

            this.Models.Add(new Model() { Label = "USA", Latitude = "38.8833N", Longitude = "77.0167W", MarkerColor=new SolidColorBrush(Colors.Red) }); 

            this.Models.Add(new Model() { Label = "Brazil ", Latitude = "15.7833S", Longitude = "47.8667W", MarkerColor = new SolidColorBrush(Colors.Red) }); 

            this.Models.Add(new Model() { Label = "India ", Latitude = "21.0000N", Longitude = "78.0000E", MarkerColor = new SolidColorBrush(Colors.Blue) }); 

            this.Models.Add(new Model() { Label = "China ", Latitude = "35.0000N", Longitude = "103.0000E", MarkerColor = new SolidColorBrush(Colors.Blue) }); 

            this.Models.Add(new Model() { Label = "Indonesia ", Latitude = "6.1750S", Longitude = "106.8283E", MarkerColor = new SolidColorBrush(Colors.Red) }); 

        } 

    } 

Screenshot: 

Please have a sample from the below link
https://www.syncfusion.com/downloads/support/forum/164738/ze/Sample-1132282729

For more information about SfMap markers
https://help.syncfusion.com/wpf/maps/markers

Let us know if you need any further assistance.

Regards,
Sridevi S. 

  

 

[Jakub]

Sridevi, your example will work perfectly for my project!

Thank you for your time and have a nice day :-)

Jacob

[Eswaran Thirugnanasambandam]

Hi Jakub, 

  

Thanks for your update. We are glad to hear that given suggestion works at your end. 

 

Please let us know if you need any further assistance. 

 

Regards, 

 

Eswaran