Skip to content

Commit f06a9c5

Browse files
sanjayvikramsf4373sanjayvikramsf4373
committed
925962- Update API link
1 parent fe88ef3 commit f06a9c5

File tree

1 file changed

+95
-104
lines changed

1 file changed

+95
-104
lines changed

‎wpf/Maps/Markers.md‎

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

8484
## Add a custom marker
8585

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).
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

8888
### Customize marker appearance using DataTemplate
8989

@@ -92,65 +92,61 @@ You can customize the marker appearance by using the [`MarkerTemplate`](https://
9292
{% tabs %}
9393
{% highlight xaml hl_lines="21" %}
9494

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>
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>
120120
121121
{% endhighlight %}
122122
{% highlight c# hl_lines="3" %}
123-
124123
ShapeFileLayer shape = new ShapeFileLayer();
125124
shape.Uri = "Maps.ShapeFiles.world1.shp";
126125
shape.MarkerTemplate= this.Resources["markerTemplate"] as DataTemplate;
127126
shape.Markers = view.Models;
128127
this.maps.Layers.Add(shape);
129-
130128
{% endhighlight %}
131129
{% 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-
}
139-
130+
public class MarkerDetails
131+
{
132+
public string Label { get; set; }
133+
public string Longitude { get; set; }
134+
public string Latitude { get; set; }
135+
}
140136
{% endhighlight %}
141137
{% highlight c# tabtitle="MapsViewModel.cs" %}
138+
public class MapsViewModel
139+
{
140+
public ObservableCollection<MarkerDetails> Markers { get; set; }
142141

143-
public class MapsViewModel
142+
public MapsViewModel()
144143
{
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-
}
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" });
153148
}
149+
}
154150

155151
{% endhighlight %}
156152
{% endtabs %}
@@ -159,55 +155,54 @@ You can customize the marker appearance by using the [`MarkerTemplate`](https://
159155

160156
### Customize marker appearance using DataTemplateSelector
161157

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.
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.
163159

164160
{% tabs %}
165161
{% highlight xaml hl_lines="31 34" %}
166162

167-
<Grid>
168-
<Grid.Resources>
169-
<DataTemplate x:Key="AsiaRegionMarkerTemplate">
170-
<Grid>
163+
<Grid>
164+
<Grid.Resources>
165+
<DataTemplate x:Key="AsiaRegionMarkerTemplate">
166+
<Grid>
171167
<Canvas>
172168
<Ellipse Width="15" Height="15" Fill="Red"/>
173169
<TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="15" FontFamily="Segoe UI" Text="{Binding Label}"/>
174170
</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}"/>
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}"/>
202198
</syncfusion:SfMap.Layers>
203-
</syncfusion:SfMap>
204-
</Grid>
199+
</syncfusion:SfMap>
200+
</Grid>
205201

206202
{% endhighlight %}
207203
{% highlight c# tabtitle="MarkerTemplateSelector.cs" %}
208-
209-
public class MarkerTemplateSelector : DataTemplateSelector
210-
{
204+
public class MarkerTemplateSelector : DataTemplateSelector
205+
{
211206
public DataTemplate AsiaMarkerTemplate { get; set; }
212207
public DataTemplate SouthAmericaMarkerTemplate { get; set; }
213208

@@ -222,44 +217,40 @@ You can customize the marker appearance by using the `MarkerTemplateSelector` pr
222217
}
223218

224219
return this.SouthAmericaMarkerTemplate;
225-
}
220+
}
226221

227222
return base.SelectTemplate(item, container);
228223
}
229-
}
230-
224+
}
231225
{% endhighlight %}
232226
{% 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-
}
227+
public class MarkerDetails
228+
{
229+
public string Label { get; set; }
230+
public string Longitude { get; set; }
231+
public string Latitude { get; set; }
232+
}
240233

241234
{% endhighlight %}
242235
{% highlight c# tabtitle="MapsViewModel.cs" %}
243-
244-
public class MapsViewModel
236+
public class MapsViewModel
237+
{
238+
public ObservableCollection<MarkerDetails> Markers { get; set; }
239+
public MapsViewModel()
245240
{
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-
}
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" });
254245
}
255-
246+
}
256247
{% endhighlight %}
257248
{% endtabs %}
258249

259250
![Marker-template-selector-support-in-WPF-Maps](Marker_images/marker-template-selector-support-in-wpf-maps.png)
260251

261252
N>
262-
* 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).
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).
263254

264255
## Customizing marker icons
265256

0 commit comments

Comments
 (0)