Skip to content

Commit 77d198d

Browse files
sanjayvikramsf4373sanjayvikramsf4373
committed
925962 - [hotfix] Update UG for WPF Maps Marker template selector feature.
1 parent e0b9c2c commit 77d198d

File tree

1 file changed

+153
-22
lines changed

1 file changed

+153
-22
lines changed

‎wpf/Maps/Markers.md‎

Lines changed: 153 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -83,51 +83,182 @@ 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` 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>
92+
{% tabs %}
93+
{% highlight xaml hl_lines="21" %}
94+
95+
<Grid>
96+
<Grid.Resources>
9497
<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>
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>
101104
</DataTemplate>
102-
</ResourceDictionary>
103-
</Window.Resources>
104-
<Grid>
105-
<syncfusion:SfMap>
105+
</Grid.Resources>
106+
107+
<Grid.DataContext>
108+
<local:MapsViewModel />
109+
</Grid.DataContext>
110+
111+
<syncfusion:SfMap x:Name="maps">
106112
<syncfusion:SfMap.Layers>
107-
<syncfusion:ShapeFileLayer Uri="Maps.ShapeFiles.world1.shp" Markers="{Binding Models}" MarkerTemplate="{StaticResource markerTemplate}">
113+
<syncfusion:ShapeFileLayer Uri="Maps.ShapeFiles.world1.shp"
114+
Markers="{Binding Markers}"
115+
MarkerTemplate="{StaticResource markerTemplate}">
108116
</syncfusion:ShapeFileLayer>
109117
</syncfusion:SfMap.Layers>
110118
</syncfusion:SfMap>
111119
</Grid>
112120
113121
{% endhighlight %}
122+
{% highlight c# hl_lines="3" %}
114123

115-
{% highlight c# %}
116-
117-
SfMap maps = new SfMap();
118124
ShapeFileLayer shape = new ShapeFileLayer();
119125
shape.Uri = "Maps.ShapeFiles.world1.shp";
120-
shape.MarkerTemplate=Resources["markerTemplate"] as DataTemplate;
126+
shape.MarkerTemplate= this.Resources["markerTemplate"] as DataTemplate;
121127
shape.Markers = view.Models;
122-
maps.Layers.Add(shape);
123-
this.Content = maps;
128+
this.maps.Layers.Add(shape);
129+
130+
{% endhighlight %}
131+
{% highlight c# tabtitle="MarkerDetails.cs" %}
132+
133+
public class MarkerDetails
134+
{
135+
public string Label { get; set; }
136+
public string Longitude { get; set; }
137+
public string Latitude { get; set; }
138+
}
124139

125140
{% endhighlight %}
141+
{% highlight c# tabtitle="MapsViewModel.cs" %}
142+
143+
public class MapsViewModel
144+
{
145+
public ObservableCollection<MarkerDetails> Markers { get; set; }
146+
public MapsViewModel()
147+
{
148+
this.Markers = new ObservableCollection<MarkerDetails>();
149+
this.Markers.Add(new MarkerDetails() { Label = "India", Latitude = "21.0000N", Longitude = "78.0000E" });
150+
this.Markers.Add(new MarkerDetails() { Label = "China", Latitude = "35.0000N", Longitude = "103.0000E" });
151+
this.Markers.Add(new MarkerDetails() { Label = "Brazil", Latitude = "15.7833S", Longitude = "47.8667W" });
152+
}
153+
}
126154

155+
{% endhighlight %}
127156
{% endtabs %}
128157

129158
![Custom Marker Image](Marker_images/Marker_CustomMarkerImg.png)
130159

160+
### Customize marker appearance using DataTemplateSelector
161+
162+
You can customize the marker appearance by using the `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`. 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.
163+
164+
{% tabs %}
165+
{% highlight xaml hl_lines="31 34" %}
166+
167+
<Grid>
168+
<Grid.Resources>
169+
<DataTemplate x:Key="AsiaRegionMarkerTemplate">
170+
<Grid>
171+
<Canvas>
172+
<Ellipse Width="15" Height="15" Fill="Red"/>
173+
<TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="15" FontFamily="Segoe UI" Text="{Binding Label}"/>
174+
</Canvas>
175+
</Grid>
176+
</DataTemplate>
177+
<DataTemplate x:Key="SouthAmericaRegionMarkerTemplate">
178+
<Grid>
179+
<Canvas>
180+
<Ellipse Width="15" Height="15" Fill="Blue"/>
181+
<TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="15" FontFamily="Segoe UI" Text="{Binding Label}"/>
182+
</Canvas>
183+
</Grid>
184+
</DataTemplate>
185+
<local:MarkerTemplateSelector x:Key="markerTemplateSelector"
186+
AsiaMarkerTemplate="{StaticResource AsiaRegionMarkerTemplate}"
187+
SouthAmericaMarkerTemplate="{StaticResource SouthAmericaRegionMarkerTemplate}"/>
188+
</Grid.Resources>
189+
190+
<Grid.DataContext>
191+
<local:MapsViewModel />
192+
</Grid.DataContext>
193+
194+
<syncfusion:SfMap>
195+
<syncfusion:SfMap.Layers>
196+
<syncfusion:ImageryLayer LayerType="OSM"
197+
MarkerTemplateSelector="{StaticResource markerTemplateSelector}"
198+
Markers="{Binding Markers}"/>
199+
<syncfusion:ShapeFileLayer Uri="Maps.ShapeFiles.world1.shp"
200+
MarkerTemplateSelector="{StaticResource markerTemplateSelector}"
201+
Markers="{Binding Markers}"/>
202+
</syncfusion:SfMap.Layers>
203+
</syncfusion:SfMap>
204+
</Grid>
205+
206+
{% endhighlight %}
207+
{% highlight c# tabtitle="MarkerTemplateSelector.cs" %}
208+
209+
public class MarkerTemplateSelector : DataTemplateSelector
210+
{
211+
public DataTemplate AsiaMarkerTemplate { get; set; }
212+
public DataTemplate SouthAmericaMarkerTemplate { get; set; }
213+
214+
public override DataTemplate SelectTemplate(object item, DependencyObject container)
215+
{
216+
if (item is CustomDataSymbol customDataSymbol && customDataSymbol.Data != null)
217+
{
218+
var value = customDataSymbol.Data as MarkerDetails;
219+
if (value.Label == "India" || value.Label == "China")
220+
{
221+
return this.AsiaMarkerTemplate;
222+
}
223+
224+
return this.SouthAmericaMarkerTemplate;
225+
}
226+
227+
return base.SelectTemplate(item, container);
228+
}
229+
}
230+
231+
{% endhighlight %}
232+
{% highlight c# tabtitle="MarkerDetails.cs" %}
233+
234+
public class MarkerDetails
235+
{
236+
public string Label { get; set; }
237+
public string Longitude { get; set; }
238+
public string Latitude { get; set; }
239+
}
240+
241+
{% endhighlight %}
242+
{% highlight c# tabtitle="MapsViewModel.cs" %}
243+
244+
public class MapsViewModel
245+
{
246+
public ObservableCollection<MarkerDetails> Markers { get; set; }
247+
public MapsViewModel()
248+
{
249+
this.Markers = new ObservableCollection<MarkerDetails>();
250+
this.Markers.Add(new MarkerDetails() { Label = "India", Latitude = "21.0000N", Longitude = "78.0000E" });
251+
this.Markers.Add(new MarkerDetails() { Label = "China", Latitude = "35.0000N", Longitude = "103.0000E" });
252+
this.Markers.Add(new MarkerDetails() { Label = "Brazil", Latitude = "15.7833S", Longitude = "47.8667W" });
253+
}
254+
}
255+
256+
{% endhighlight %}
257+
{% endtabs %}
258+
259+
N>
260+
* 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` 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).
261+
131262
## Customizing marker icons
132263

133264
The size and color of marker icons can be customized using the [`MarkerIconSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerIconSize) and [`MarkerIconFill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerIconFill) properties.

0 commit comments

Comments
 (0)