When marking geoelements on a map, using custom, unique symbols can be helpful for highlighting and differentiating between locations. For example, a tourism office may use pictures of landmarks as symbols on an online map or app, to help prospective visitors to orient themselves more easily around a city.
How to use the sample
When launched, this sample displays a map with picture marker symbols. Pan and zoom to explore the map.
How it works
Create a PictureMarkerSymbol using the URI to an online or local image or a JavaFX Image (platform dependent).
Create a Graphic and set its symbol to the picture marker symbol.
Relevant API
PictureMarkerSymbol
About the data
The picture marker symbols in this sample are all constructed from different types of resources:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
// Copyright 2016 Esri.//// Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.// You may obtain a copy of the License at: http://www.apache.org/licenses/LICENSE-2.0//// Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific// language governing permissions and limitations under the License.using Esri.ArcGISRuntime.Geometry;
using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.Symbology;
using Esri.ArcGISRuntime.UI;
using System;
using System.IO;
using System.Reflection;
using System.Threading.Tasks;
namespaceArcGIS.WinUI.Samples.RenderPictureMarkers{
[ArcGIS.Samples.Shared.Attributes.Sample(
name: "Picture marker symbol",
category: "Symbology",
description: "Use pictures for markers.",
instructions: "When launched, this sample displays a map with picture marker symbols. Pan and zoom to explore the map.",
tags: new[] { "graphics", "marker", "picture", "symbol", "visualization" })]
[ArcGIS.Samples.Shared.Attributes.EmbeddedResource(@"PictureMarkerSymbols\pin_star_blue.png")]
publicsealedpartialclassRenderPictureMarkers {
publicRenderPictureMarkers() {
InitializeComponent();
// Create the UI, setup the control references and execute initialization _ = Initialize();
}
privateasync Task Initialize() {
// Create new Map with basemap Map myMap = new Map(BasemapStyle.ArcGISTopographic);
// Create and set initial map area Envelope initialLocation = new Envelope(
-229835, 6550763, -222560, 6552021,
SpatialReferences.WebMercator);
myMap.InitialViewpoint = new Viewpoint(initialLocation);
// Assign the map to the MapView MyMapView.Map = myMap;
// Create overlay to where graphics are shown GraphicsOverlay overlay = new GraphicsOverlay();
// Add created overlay to the MapView MyMapView.GraphicsOverlays.Add(overlay);
// Add graphics using different source types CreatePictureMarkerSymbolFromUrl(overlay);
try {
await CreatePictureMarkerSymbolFromResources(overlay);
}
catch (Exception e)
{
awaitnew MessageDialog2(e.ToString(), "Error").ShowAsync();
}
}
privatevoidCreatePictureMarkerSymbolFromUrl(GraphicsOverlay overlay) {
// Create uri to the used image Uri symbolUri = new Uri(
"https://static.arcgis.com/images/Symbols/OutdoorRecreation/Camping.png");
// Create new symbol using asynchronous factory method from uri. PictureMarkerSymbol campsiteSymbol = new PictureMarkerSymbol(symbolUri)
{
Width = 40,
Height = 40 };
// Create location for the campsite MapPoint campsitePoint = new MapPoint(-223560, 6552021, SpatialReferences.WebMercator);
// Create graphic with the location and symbol Graphic campsiteGraphic = new Graphic(campsitePoint, campsiteSymbol);
// Add graphic to the graphics overlay overlay.Graphics.Add(campsiteGraphic);
}
privateasync Task CreatePictureMarkerSymbolFromResources(GraphicsOverlay overlay) {
// Get current assembly that contains the image Assembly currentAssembly = GetType().GetTypeInfo().Assembly;
// Get image as a stream from the resources// Picture is defined as EmbeddedResource and DoNotCopy Stream resourceStream = currentAssembly.GetManifestResourceStream(
"ArcGIS.WinUI.Viewer.Resources.PictureMarkerSymbols.pin_star_blue.png");
// Create new symbol using asynchronous factory method from stream PictureMarkerSymbol pinSymbol = await PictureMarkerSymbol.CreateAsync(resourceStream);
pinSymbol.Width = 50;
pinSymbol.Height = 50;
// Create location for the pint MapPoint pinPoint = new MapPoint(-226773, 6550477, SpatialReferences.WebMercator);
// Create graphic with the location and symbol Graphic pinGraphic = new Graphic(pinPoint, pinSymbol);
// Add graphic to the graphics overlay overlay.Graphics.Add(pinGraphic);
}
}
}