Skip to content

Commit 37abe34

Browse files
Karthickmani97Karthickmani97
authored
Merge pull request #1612 from syncfusion-content/925962-UpdateUGWPFMaps
925962 - [hotfix] Update UG for WPF Maps Marker template selector feature.
2 parents 8fce94f + f06a9c5 commit 37abe34

File tree

3 files changed

+155
-31
lines changed

3 files changed

+155
-31
lines changed

‎wpf/Maps/Marker_images/marker-template-selector-support-in-wpf-maps.png‎

72.6 KB
Loading

‎wpf/Maps/Marker_images/marker-template-support-in-wpf-maps.png‎

71.9 KB
Loading

‎wpf/Maps/Markers.md‎

Lines changed: 155 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -83,50 +83,174 @@ N> You must create a model that contains properties such as Latitude and Longitu
8383

8484
## Add a custom marker
8585

86-
The Maps control provides the support for defining the custom markers using the [`MarkerTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MarkerTemplate) property.
86+
The marker appearance customization can be achieved by using the [`MarkerTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MarkerTemplate) and [`MarkerTemplateSelector`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerTemplateSelector) properties of [`ImageryLayer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html) and [`ShapeFileLayer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html) in the [`SfMap`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html).
8787

88-
{% tabs %}
88+
### Customize marker appearance using DataTemplate
8989

90-
{% highlight xaml %}
90+
You can customize the marker appearance by using the [`MarkerTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MarkerTemplate) property of [`ImageryLayer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html) and [`ShapeFileLayer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html) in the [`SfMap`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html).
9191

92-
<Window.Resources>
93-
<ResourceDictionary>
94-
<DataTemplate x:Key="markerTemplate">
95-
<Grid>
96-
<Canvas Margin="-12,-30,0,0">
97-
<Image Source="pin.png" Height="30" />
98-
<TextBlock HorizontalAlignment="Center" Margin="0,30,0,0" FontSize="30" FontFamily="Segoe UI" Text="{Binding Label}"/>
99-
</Canvas>
100-
</Grid>
101-
</DataTemplate>
102-
</ResourceDictionary>
103-
</Window.Resources>
104-
<Grid>
105-
<syncfusion:SfMap>
106-
<syncfusion:SfMap.Layers>
107-
<syncfusion:ShapeFileLayer Uri="Maps.ShapeFiles.world1.shp" Markers="{Binding Models}" MarkerTemplate="{StaticResource markerTemplate}">
108-
</syncfusion:ShapeFileLayer>
109-
</syncfusion:SfMap.Layers>
110-
</syncfusion:SfMap>
111-
</Grid>
92+
{% tabs %}
93+
{% highlight xaml hl_lines="21" %}
94+
95+
<Grid>
96+
<Grid.Resources>
97+
<DataTemplate x:Key="markerTemplate">
98+
<Grid>
99+
<Canvas>
100+
<Ellipse Width="15" Height="15" Fill="Red"/>
101+
<TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="15" FontFamily="Segoe UI" Text="{Binding Label}"/>
102+
</Canvas>
103+
</Grid>
104+
</DataTemplate>
105+
</Grid.Resources>
106+
107+
<Grid.DataContext>
108+
<local:MapsViewModel />
109+
</Grid.DataContext>
110+
111+
<syncfusion:SfMap x:Name="maps">
112+
<syncfusion:SfMap.Layers>
113+
<syncfusion:ShapeFileLayer Uri="Maps.ShapeFiles.world1.shp"
114+
Markers="{Binding Markers}"
115+
MarkerTemplate="{StaticResource markerTemplate}">
116+
</syncfusion:ShapeFileLayer>
117+
</syncfusion:SfMap.Layers>
118+
</syncfusion:SfMap>
119+
</Grid>
112120
113121
{% endhighlight %}
114-
115-
{% highlight c# %}
116-
117-
SfMap maps = new SfMap();
122+
{% highlight c# hl_lines="3" %}
118123
ShapeFileLayer shape = new ShapeFileLayer();
119124
shape.Uri = "Maps.ShapeFiles.world1.shp";
120-
shape.MarkerTemplate=Resources["markerTemplate"] as DataTemplate;
125+
shape.MarkerTemplate= this.Resources["markerTemplate"] as DataTemplate;
121126
shape.Markers = view.Models;
122-
maps.Layers.Add(shape);
123-
this.Content = maps;
127+
this.maps.Layers.Add(shape);
128+
{% endhighlight %}
129+
{% highlight c# tabtitle="MarkerDetails.cs" %}
130+
public class MarkerDetails
131+
{
132+
public string Label { get; set; }
133+
public string Longitude { get; set; }
134+
public string Latitude { get; set; }
135+
}
136+
{% endhighlight %}
137+
{% highlight c# tabtitle="MapsViewModel.cs" %}
138+
public class MapsViewModel
139+
{
140+
public ObservableCollection<MarkerDetails> Markers { get; set; }
141+
142+
public MapsViewModel()
143+
{
144+
this.Markers = new ObservableCollection<MarkerDetails>();
145+
this.Markers.Add(new MarkerDetails() { Label = "India", Latitude = "21.0000N", Longitude = "78.0000E" });
146+
this.Markers.Add(new MarkerDetails() { Label = "China", Latitude = "35.0000N", Longitude = "103.0000E" });
147+
this.Markers.Add(new MarkerDetails() { Label = "Brazil", Latitude = "15.7833S", Longitude = "47.8667W" });
148+
}
149+
}
124150

125151
{% endhighlight %}
152+
{% endtabs %}
153+
154+
![Marker-template-support-in-WPF-Maps](Marker_images/marker-template-support-in-wpf-maps.png)
155+
156+
### Customize marker appearance using DataTemplateSelector
126157

158+
You can customize the marker appearance by using the [`MarkerTemplateSelector`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerTemplateSelector) property of [`ImageryLayer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html) and [`ShapeFileLayer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html) in the [`SfMap`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html). The `DataTemplateSelector` can choose a `DataTemplate` at runtime based on the value of a data-bound to marker appearance by using the [`MarkerTemplateSelector`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerTemplateSelector). It allows you to choose a different data template for each marker, as well as to customize the appearance of a particular marker based on certain conditions.
159+
160+
{% tabs %}
161+
{% highlight xaml hl_lines="31 34" %}
162+
163+
<Grid>
164+
<Grid.Resources>
165+
<DataTemplate x:Key="AsiaRegionMarkerTemplate">
166+
<Grid>
167+
<Canvas>
168+
<Ellipse Width="15" Height="15" Fill="Red"/>
169+
<TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="15" FontFamily="Segoe UI" Text="{Binding Label}"/>
170+
</Canvas>
171+
</Grid>
172+
</DataTemplate>
173+
<DataTemplate x:Key="SouthAmericaRegionMarkerTemplate">
174+
<Grid>
175+
<Canvas>
176+
<Ellipse Width="15" Height="15" Fill="Blue"/>
177+
<TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="15" FontFamily="Segoe UI" Text="{Binding Label}"/>
178+
</Canvas>
179+
</Grid>
180+
</DataTemplate>
181+
<local:MarkerTemplateSelector x:Key="markerTemplateSelector"
182+
AsiaMarkerTemplate="{StaticResource AsiaRegionMarkerTemplate}"
183+
SouthAmericaMarkerTemplate="{StaticResource SouthAmericaRegionMarkerTemplate}"/>
184+
</Grid.Resources>
185+
186+
<Grid.DataContext>
187+
<local:MapsViewModel />
188+
</Grid.DataContext>
189+
190+
<syncfusion:SfMap>
191+
<syncfusion:SfMap.Layers>
192+
<syncfusion:ImageryLayer LayerType="OSM"
193+
MarkerTemplateSelector="{StaticResource markerTemplateSelector}"
194+
Markers="{Binding Markers}"/>
195+
<syncfusion:ShapeFileLayer Uri="Maps.ShapeFiles.world1.shp"
196+
MarkerTemplateSelector="{StaticResource markerTemplateSelector}"
197+
Markers="{Binding Markers}"/>
198+
</syncfusion:SfMap.Layers>
199+
</syncfusion:SfMap>
200+
</Grid>
201+
202+
{% endhighlight %}
203+
{% highlight c# tabtitle="MarkerTemplateSelector.cs" %}
204+
public class MarkerTemplateSelector : DataTemplateSelector
205+
{
206+
public DataTemplate AsiaMarkerTemplate { get; set; }
207+
public DataTemplate SouthAmericaMarkerTemplate { get; set; }
208+
209+
public override DataTemplate SelectTemplate(object item, DependencyObject container)
210+
{
211+
if (item is CustomDataSymbol customDataSymbol && customDataSymbol.Data != null)
212+
{
213+
var value = customDataSymbol.Data as MarkerDetails;
214+
if (value.Label == "India" || value.Label == "China")
215+
{
216+
return this.AsiaMarkerTemplate;
217+
}
218+
219+
return this.SouthAmericaMarkerTemplate;
220+
}
221+
222+
return base.SelectTemplate(item, container);
223+
}
224+
}
225+
{% endhighlight %}
226+
{% highlight c# tabtitle="MarkerDetails.cs" %}
227+
public class MarkerDetails
228+
{
229+
public string Label { get; set; }
230+
public string Longitude { get; set; }
231+
public string Latitude { get; set; }
232+
}
233+
234+
{% endhighlight %}
235+
{% highlight c# tabtitle="MapsViewModel.cs" %}
236+
public class MapsViewModel
237+
{
238+
public ObservableCollection<MarkerDetails> Markers { get; set; }
239+
public MapsViewModel()
240+
{
241+
this.Markers = new ObservableCollection<MarkerDetails>();
242+
this.Markers.Add(new MarkerDetails() { Label = "India", Latitude = "21.0000N", Longitude = "78.0000E" });
243+
this.Markers.Add(new MarkerDetails() { Label = "China", Latitude = "35.0000N", Longitude = "103.0000E" });
244+
this.Markers.Add(new MarkerDetails() { Label = "Brazil", Latitude = "15.7833S", Longitude = "47.8667W" });
245+
}
246+
}
247+
{% endhighlight %}
127248
{% endtabs %}
128249

129-
![Custom Marker Image](Marker_images/Marker_CustomMarkerImg.png)
250+
![Marker-template-selector-support-in-WPF-Maps](Marker_images/marker-template-selector-support-in-wpf-maps.png)
251+
252+
N>
253+
* The `DataContext` for both the [`MarkerTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MarkerTemplate) and [`MarkerTemplateSelector`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerTemplateSelector) properties of the [`ImageryLayer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html) and [`ShapeFileLayer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html) in the SfMap is set to [`CustomDataSymbol`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.CustomDataSymbol.html).
130254

131255
## Customizing marker icons
132256

0 commit comments

Comments
 (0)