We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render CustomDataSource in SfMap?

Platform: WPF |
Control: SfMaps |
Published Date: January 13, 2015 |
Last Revised Date: June 25, 2019

The following steps help you to render CustomDataSource.

Step 1:

Add the CustomDataSource to bind the custom data values.

XAML

 <syncfusion:ShapeFileLayer Background="White" CustomDataSource="{Binding Models}" Uri="CustomDataSource.world1.shp">
</syncfusion:ShapeFileLayer>

The following snippet shows the custom data that renders the Map control based on its respective latitude and longitude.

C#

public class MapViewModel
    {
        public ObservableCollection<Model> Models { get; set; }
        public MapViewModel()
        {
            this.Models = new ObservableCollection<Model>();
            this.Models.Add(new Model() { Name = "Syncfusion - North Carolina ", Country = "United States", Latitude = "35.8233N", Longitude = "78.8258W", Description = "Syncfusion's corporate office is located in Research Triangle Park, North Carolina", Tasks = new ObservableCollection<string>() { "Product Research", "Sales", "Marketing" }, Address = "Company Headquarters, 2501 Aerial Center Parkway, Suite 200, Morrisville, NC 27560, USA" });
            this.Models.Add(new Model() { Name = "Syncfusion - Chennai", Country = "India", Latitude = "13.0810N", Longitude = "79.970E", Description = "Syncfusion's branch office is located in AnnaNagar, Chennai", Tasks = new ObservableCollection<string>() { "Product Development", "Support", "Product Testing" }, Address = "EYMARD Complex, AJ 217, 4th Avenue, Shanthi Colony, Anna Nagar, Chennai-40, India" });
        }
    }

Step 2:

To show the custom data on the map, the CustomDataSourceTemplate must be specified. CustomDataSourceTemplate is a DataTemplate type API used to expose the template for custom data.

XAML

             <syncfusion:ShapeFileLayer.CustomDataSourceTemplate>
                        <DataTemplate>
                              . . .
                             <Grid DataContext="{Binding Data}" Width="265">
                                    . . .
                                  </Grid>
                              . . .
                        </DataTemplate>
              </syncfusion:ShapeFileLayer.CustomDataSourceTemplate>                

Refer the following online documentation link for more details about CustomDataSource binding.

http://help.syncfusion.com/UG/winrt/documents/customdatabinding.htm

Sample Location for CustomDataSource:

CustomDataSource.zip

XAML

       <syncfusion:SfMap x:Name="map">
            <syncfusion:SfMap.Layers>
               <syncfusion:ShapeFileLayer Background="White" CustomDataSource="{Binding Models}" Uri="CustomDataSource.world1.shp">
                    <syncfusion:ShapeFileLayer.CustomDataSourceTemplate>
                        <DataTemplate>
                              . . .
                             <Grid DataContext="{Binding Data}" Width="265">
                                    . . .
                                  </Grid>
                              . . .
                        </DataTemplate>
                   </syncfusion:ShapeFileLayer.CustomDataSourceTemplate>           
          </syncfusion:ShapeFileLayer>
       </syncfusion:SfMap.Layers>
   </syncfusion:SfMap>

Screenshot:

C:\Users\Adithi\AppData\Roaming\Skype\My Skype Received Files\IMG_13012015_065024.png

Figure 1: DataMarkers-CustomDataSource

 

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon