Hey there
I've asked this question within a thread that is flagged as assumed answered and I'm guessing the question is being over looked. We are using v100 and have the pop up example working in our windows project using the idea that antti.kajanus-esri-fi-esridist provided but am struggling with how to implement a similar idea on the droid side. The MapView has an Overlay property but it is expecting a droid widget where the windows side is expecting an ESRI OverlayControl. Is there any examples or thoughts on how we can dynamically create a control to display attributes within, when a user touches a graphic?
Thanks,
Jim
The GeoView.Overlays collection doesn't exist on the Xamarin side. The Overlay object you see in Android is from the base Android.Views.View class and not really related to MapView overlays.
In the newly released Runtime API v100.1, you can use the new Callout capability to show a simple callout UI for a feature or graphic. This is similar to a map overlay but with a smaller and less intrusive UI suitable for smaller devices. This should work on all platforms including Xamarin. The GeoView has two new methods ShowCalloutForGeoElement and ShowCalloutAt to show a callout.
Here's some basic Android code for a start:
<SPAN class="keyword token">public</SPAN> <SPAN class="keyword token">class</SPAN> <SPAN class="token class-name">MainActivity</SPAN> <SPAN class="punctuation token">:</SPAN> Activity <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">private</SPAN> <SPAN class="keyword token">readonly</SPAN> Envelope TestExtent <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Envelope</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">129</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">50</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">64</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">24</SPAN><SPAN class="punctuation token">,</SPAN> SpatialReferences<SPAN class="punctuation token">.</SPAN>Wgs84<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">private</SPAN> <SPAN class="keyword token">readonly</SPAN> Uri UsCitiesUri <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Uri</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fsampleserver6.arcgisonline.com%2Farcgis%2Frest%2Fservices%2FUSA%2FMapServer%2F0" target="_blank">http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">private</SPAN> MapView _mapView<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">private</SPAN> FeatureLayer _features<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">protected</SPAN> <SPAN class="keyword token">override</SPAN> <SPAN class="keyword token">void</SPAN> <SPAN class="token function">OnCreate</SPAN><SPAN class="punctuation token">(</SPAN>Bundle bundle<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">base</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">OnCreate</SPAN><SPAN class="punctuation token">(</SPAN>bundle<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> _mapView <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> _mapView<SPAN class="punctuation token">.</SPAN>Map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN>Basemap<SPAN class="punctuation token">.</SPAN><SPAN class="token function">CreateTopographic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> InitialViewpoint <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Viewpoint</SPAN><SPAN class="punctuation token">(</SPAN>TestExtent<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> _features <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN>UsCitiesUri<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> _mapView<SPAN class="punctuation token">.</SPAN>Map<SPAN class="punctuation token">.</SPAN>OperationalLayers<SPAN class="punctuation token">.</SPAN><SPAN class="token function">Add</SPAN><SPAN class="punctuation token">(</SPAN>_features<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> _mapView<SPAN class="punctuation token">.</SPAN>CalloutStyle <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">CalloutStyle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> BorderColor <SPAN class="operator token">=</SPAN> Color<SPAN class="punctuation token">.</SPAN>Black<SPAN class="punctuation token">,</SPAN> BorderWidth <SPAN class="operator token">=</SPAN> <SPAN class="number token">1</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> _mapView<SPAN class="punctuation token">.</SPAN>GeoViewTapped <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> MapView_GeoViewTapped<SPAN class="punctuation token">;</SPAN> <SPAN class="token function">SetContentView</SPAN><SPAN class="punctuation token">(</SPAN>_mapView<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">private</SPAN> <SPAN class="keyword token">async</SPAN> <SPAN class="keyword token">void</SPAN> <SPAN class="token function">MapView_GeoViewTapped</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">object</SPAN> sender<SPAN class="punctuation token">,</SPAN> GeoViewInputEventArgs e<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> idResult <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">await</SPAN> _mapView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">IdentifyLayerAsync</SPAN><SPAN class="punctuation token">(</SPAN>_features<SPAN class="punctuation token">,</SPAN> e<SPAN class="punctuation token">.</SPAN>Position<SPAN class="punctuation token">,</SPAN> 5d<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> feature <SPAN class="operator token">=</SPAN> idResult<SPAN class="punctuation token">.</SPAN>GeoElements<SPAN class="punctuation token">.</SPAN><SPAN class="token function">FirstOrDefault</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>feature <SPAN class="operator token">!=</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> def <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">CalloutDefinition</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> _mapView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">ShowCalloutForGeoElement</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">,</SPAN> e<SPAN class="punctuation token">.</SPAN>Position<SPAN class="punctuation token">,</SPAN> def<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN> _mapView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">DismissCallout</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
As a UI view / control, the Callout is platform-specific. On Xamarin platforms we provide the CalloutStyle class to control the look of a callout on the GeoView. In WPF and UWP we use the standard XAML based mechanisms for updating control styles which is a richer and more natural way to style the UI.
To change the style of a callout, add a new style to your XAML page that declares the MapView - something like this:
<SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>Style</SPAN> <SPAN class="attr-name token">TargetType</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{x:Type esri:Callout}<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN> <Setter Property=<SPAN class="string token">"Padding"</SPAN> Value=<SPAN class="string token">"24"</SPAN> /> <Setter Property=<SPAN class="string token">"Background"</SPAN> Value=<SPAN class="string token">"LightBlue"</SPAN> /> <Setter Property=<SPAN class="string token">"BorderBrush"</SPAN> Value=<SPAN class="string token">"DarkBlue"</SPAN> /> <Setter Property=<SPAN class="string token">"BorderThickness"</SPAN> Value=<SPAN class="string token">"4"</SPAN> /> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>Style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
You can also override the Callout's ControlTemplate:
<SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>Style</SPAN> <SPAN class="attr-name token">TargetType</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{x:Type esri:Callout}<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN> <Setter Property=<SPAN class="string token">"Template"</SPAN>> <Setter.Value> <ControlTemplate TargetType=<SPAN class="string token">"esri:Callout"</SPAN>> <Border Background=<SPAN class="string token">"LightGreen"</SPAN> BorderBrush=<SPAN class="string token">"Green"</SPAN> BorderThickness=<SPAN class="string token">"4"</SPAN> CornerRadius=<SPAN class="string token">"30"</SPAN> Padding=<SPAN class="string token">"20"</SPAN>> <ContentPresenter /> </Border> </ControlTemplate> </Setter.Value> </Setter> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>Style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN> <SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
I hope this helps. Also note that we'll be working on filling out our Callout samples in the coming weeks so you'll have a clearer picture of how they're best used.
I love the look of the new call out, a question that does come up from this is how does this work in the .net side. There is no CalloutStyle that can be set the same way. All the other methods of the mapview appear to be there including the CalloutDefinition but documentation wise, it is unclear how to control the look of the call out on the windows side.
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
