How to render CustomDataSource in WPF Map?
The following steps help you to render CustomDataSource in WPF Maps.
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>
. . .map
</DataTemplate>
</syncfusion:ShapeFileLayer.CustomDataSourceTemplate>
Refer the following online documentation link for more details about CustomDataSource binding.
https://help.syncfusion.com/UG/winrt/documents/customdatabinding.htm
Sample Location for CustomDataSource:
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:
Figure 1: DataMarkers-CustomDataSource
Conclusion
I hope you enjoyed learning about how to render CustomDataSource in WPF SfMap.
You can refer to our WPF Maps feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation examples to understand how to present and manipulate data.
For current customers, you can check out our Controls from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
