Populate Data in WPF Maps (SfMap)
23 Jul 202118 minutes to read
This section explains how to populate shape data for providing data input to the maps control and usage of the ItemsSource property.
Data binding
The maps control supports data binding using the ItemsSource property in the shape layers.
The following properties in shape layers are used for binding data in the maps control:
- ItemsSource
- ShapeIDPath
- ShapeIDTableField
ItemsSource
This is the basic property that exposes data binding for Maps. ItemsSource is the property that accepts the collection type values. For example, the ItemsSource property accepts the ObservableCollections, Lists, and LinqResult values.
ShapeIDPath
ShapeIDPath is the string type property used to refer to the ID of a shape from the ItemsSource. The ItemsSource property must have a property with name of the ShapeIDPath. The ShapeIDPath and the ShapeIDTableField properties are related to each other (refer to ShapeIDTableField for more details).
ShapeIDTableField
The ShapeIDTableField property is similar to the ShapeIDPath. It is a string type property that refers to the column name in the dbf file to identify the shape. When values of the ShapeIDPath property in the ItemsSource and the value of ShapeIDTableField in the .dbf file match, then the associated object from the ItemsSource is bound to the corresponding shape.
ShapeValuePath
ShapeValuePath is a string type property used to define the object bound to the shapes of the map. The ShapeValuePath must be the name of any property that is defined in the ItemsSource items. The ShapeIDPath, ShapeIDTableField, and ShapeValue paths are dependent upon one another. Without specifying the ShapeIDPath and ShapeIDTableField, ShapeValuePath has no effect. When ShapeIDPath and ShapeIDTableField are properly set as mentioned in the Data Binding section, the ShapeValuePath has an impact on the map.
Role of DBF file in Data Binding
The .dbf file that is included in the main shape file, is required to work with data binding. The .dbf file contains the information about the shapes in the main shape file. Each record in the .dbf file is associated with the each shape in the main file. Shapes in the main file and records in the .dbf file are organized in the same sequence. Therefore, the Nth shape in the main file is associated with Nth record in the .dbf file. A record of the .dbf file can contain the name of the shape or population data or some other statistical data of a geographic shape.
<Grid>
<Grid.DataContext>
<local:ViewModel />
</Grid.DataContext>
<syncfusion:SfMap x:Name="map">
<syncfusion:SfMap.Layers>
<syncfusion:ShapeFileLayer x:Name="shapeLayer"
Background="White"
Uri="GettingStarted.ShapeFiles.usa_state.shp"
ItemsSource="{Binding ElectionResults}"
ShapeIDPath="State"
ShapeIDTableField="STATE_NAME">
</syncfusion:ShapeFileLayer>
</syncfusion:SfMap.Layers>
</syncfusion:SfMap>
</Grid>// Setting DataContext.
ViewModel viewModel = new ViewModel();
this.DataContext = viewModel;
// SfMap.
SfMap maps = new SfMap();
// ShapeFileLayer.
ShapeFileLayer shapeLayer = new ShapeFileLayer();
shapeLayer.Background = new SolidColorBrush(Colors.White);
shapeLayer.Uri = "GettingStarted.ShapeFiles.usa_state.shp";
shapeLayer.ItemsSource = viewModel.ElectionResults;
shapeLayer.ShapeIDPath = "State";
shapeLayer.ShapeIDTableField = "STATE_NAME";
// Adding ShapeFileLayer into Map.
maps.Layers.Add(shapeLayer);
this.Content = maps;The following code sample demonstrates referring the United States election data as items source.
public class ElectionData
{
private string state;
public string State
{
get { return state; }
set { state = value; }
}
public string candidate;
public string Candidate
{
get { return candidate; }
set { candidate = value; }
}
private double electors;
public double Electors
{
get { return electors; }
set { electors = value; }
}
}
public class ViewModel
{
private ObservableCollection<ElectionData> electionResults;
public ObservableCollection<ElectionData> ElectionResults
{
get { return electionResults; }
set { electionResults = value; }
}
public ViewModel()
{
ElectionResults = new ObservableCollection<ElectionData>
{
new ElectionData { State = "Alabama", Candidate = "Romney", Electors = 9 },
new ElectionData { State = "Alaska", Candidate = "Romney", Electors = 3 },
new ElectionData { State = "Arizona", Candidate = "Romney", Electors = 11 },
new ElectionData { State = "Arkansas", Candidate = "Romney", Electors = 6 },
new ElectionData { State = "California", Candidate = "Obama", Electors = 55 },
new ElectionData { State = "Colorado", Candidate = "Obama", Electors = 9 },
new ElectionData { State = "Connecticut", Candidate = "Obama", Electors = 7 },
new ElectionData { State = "Delaware", Candidate = "Obama", Electors = 3 },
new ElectionData { State = "District of Columbia", Candidate = "Obama", Electors = 3 },
new ElectionData { State = "Florida", Candidate = "Obama", Electors = 29 },
new ElectionData { State = "Georgia", Candidate = "Romney", Electors = 16 },
new ElectionData { State = "Hawaii", Candidate = "Obama", Electors = 4 },
new ElectionData { State = "Idaho", Candidate = "Romney", Electors = 4 },
new ElectionData { State = "Illinois", Candidate = "Obama", Electors = 20 },
new ElectionData { State = "Indiana", Candidate = "Romney", Electors = 11 },
new ElectionData { State = "Iowa", Candidate = "Obama", Electors = 6 },
new ElectionData { State = "Kansas", Candidate = "Romney", Electors = 6 },
new ElectionData { State = "Kentucky", Candidate = "Romney", Electors = 8 },
new ElectionData { State = "Louisiana", Candidate = "Romney", Electors = 8 },
new ElectionData { State = "Maine", Candidate = "Obama", Electors = 4 },
new ElectionData { State = "Maryland", Candidate = "Obama", Electors = 10 },
new ElectionData { State = "Massachusetts", Candidate = "Obama", Electors = 11 },
new ElectionData { State = "Michigan", Candidate = "Obama", Electors = 16 },
new ElectionData { State = "Minnesota", Candidate = "Obama", Electors = 10 },
new ElectionData { State = "Mississippi", Candidate = "Romney", Electors = 6 },
new ElectionData { State = "Missouri", Candidate = "Romney", Electors = 10 },
new ElectionData { State = "Montana", Candidate = "Romney", Electors = 3 },
new ElectionData { State = "Nebraska", Candidate = "Romney", Electors = 5 },
new ElectionData { State = "Nevada", Candidate = "Obama", Electors = 6 },
new ElectionData { State = "New Hampshire", Candidate = "Obama", Electors = 4 },
new ElectionData { State = "New Jersey", Candidate = "Obama", Electors = 14 },
new ElectionData { State = "New Mexico", Candidate = "Obama", Electors = 5 },
new ElectionData { State = "New York", Candidate = "Obama", Electors = 29 },
new ElectionData { State = "North Carolina", Candidate = "Romney", Electors = 15 },
new ElectionData { State = "North Dakota", Candidate = "Romney", Electors = 3 },
new ElectionData { State = "Ohio", Candidate = "Obama", Electors = 18 },
new ElectionData { State = "Oklahoma", Candidate = "Romney", Electors = 7 },
new ElectionData { State = "Oregon", Candidate = "Obama", Electors = 7 },
new ElectionData { State = "Pennsylvania", Candidate = "Obama", Electors = 20 },
new ElectionData { State = "Rhode Island", Candidate = "Obama", Electors = 4 },
new ElectionData { State = "South Carolina", Candidate = "Romney", Electors = 9 },
new ElectionData { State = "South Dakota", Candidate = "Romney", Electors = 3 },
new ElectionData { State = "Tennessee", Candidate = "Romney", Electors = 11 },
new ElectionData { State = "Texas", Candidate = "Romney", Electors = 38 },
new ElectionData { State = "Utah", Candidate = "Romney", Electors = 6 },
new ElectionData { State = "Vermont", Candidate = "Obama", Electors = 3 },
new ElectionData { State = "Virginia", Candidate = "Obama", Electors = 13 },
new ElectionData { State = "Washington", Candidate = "Obama", Electors = 12 },
new ElectionData { State = "West Virginia", Candidate = "Romney", Electors = 5 },
new ElectionData { State = "Wisconsin", Candidate = "Obama", Electors = 10 },
new ElectionData { State = "Wyoming", Candidate = "Romney", Electors = 3 }
};
}
}NOTE
You can refer to our WPF Map feature tour page for its groundbreaking feature representations. You can also explore our WPF Map example to know how to render and configure the map.