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:
Blue pin with a star stored in the resource folder that comes with the application
Tags
graphics, marker, picture, symbol, visualization
Sample Code
RenderPictureMarkers.cs
Use dark colors for code blocks
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
// 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 Android.App;
using Android.OS;
using Android.Widget;
using Esri.ArcGISRuntime.Geometry;
using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.Symbology;
using Esri.ArcGISRuntime.UI;
using Esri.ArcGISRuntime.UI.Controls;
using System;
using System.IO;
using System.Reflection;
using System.Threading.Tasks;
namespaceArcGISRuntime.Samples.RenderPictureMarkers{
[Activity (ConfigurationChanges=Android.Content.PM.ConfigChanges.Orientation | Android.Content.PM.ConfigChanges.ScreenSize)]
[ArcGISRuntime.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" })]
[ArcGISRuntime.Samples.Shared.Attributes.EmbeddedResource(@"PictureMarkerSymbols\pin_star_blue.png")]
publicclassRenderPictureMarkers : Activity {
// Hold a reference to the map viewprivate MapView _myMapView;
protectedoverridevoidOnCreate(Bundle bundle) {
base.OnCreate(bundle);
Title = "Render picture markers";
// Create the UI, setup the control references and execute initialization CreateLayout();
Initialize();
}
privateasyncvoidInitialize() {
// 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)
{
new AlertDialog.Builder(this).SetMessage(e.ToString()).SetTitle("Error").Show();
}
}
privatestaticvoidCreatePictureMarkerSymbolFromUrl(GraphicsOverlay overlay) {
// Create uri to the used image Uri symbolUri = new Uri(
"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Recreation/FeatureServer/0/images/e82f744ebb069bb35b234b3fea46deae");
// 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 = Assembly.GetExecutingAssembly();
// Get image as a stream from the resources// Picture is defined as EmbeddedResource and DoNotCopy Stream resourceStream = currentAssembly.GetManifestResourceStream(
"ArcGISRuntime.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);
}
privatevoidCreateLayout() {
// Create a new vertical layout for the app LinearLayout layout = new LinearLayout(this) { Orientation = Orientation.Vertical };
// Add the map view to the layout _myMapView = new MapView(this);
layout.AddView(_myMapView);
// Show the layout in the app SetContentView(layout);
}
}
}