Show a callout with the latitude and longitude of user-tapped points.
Use case
Callouts are used to display temporary detail content on a map. You can display text and arbitrary UI controls in callouts.
How to use the sample
Tap anywhere on the map. A callout showing the WGS84 coordinates for the tapped point will appear.
How it works
- Listen for
GeoViewTapped
events on the map view. - When the user taps, get the tapped location from the
Location
property of theGeoViewInputEventArgs
. - Project the geometry to WGS84 using
GeometryEngine.Project
. - Create a string to display the coordinates; note that latitude and longitude in WGS84 map to the Y and X coordinates.
- Create a new callout definition using a title and the coordinate string.
- Display the callout by calling
ShowCalloutAt
on the map view with the location and the callout definition.
Relevant API
- CalloutDefinition
- GeometryEngine.Project
- GeoViewTappedEventArgs
- MapView.GeoViewTapped
- MapView.ShowCalloutAt
Tags
balloon, bubble, callout, flyout, flyover, info window, popup, tap
Sample Code
ShowCallout.cs
// Copyright 2017 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.UI;
using Esri.ArcGISRuntime.UI.Controls;
using Foundation;
using UIKit;
namespace ArcGISRuntime.Samples.ShowCallout
{
[Register("ShowCallout")]
[ArcGISRuntime.Samples.Shared.Attributes.Sample(
name: "Show callout",
category: "MapView",
description: "Show a callout with the latitude and longitude of user-tapped points.",
instructions: "Tap anywhere on the map. A callout showing the WGS84 coordinates for the tapped point will appear.",
tags: new[] { "balloon", "bubble", "callout", "flyout", "flyover", "info window", "popup", "tap" })]
public class ShowCallout : UIViewController
{
// Hold references to UI controls.
private MapView _myMapView;
public ShowCallout()
{
Title = "Show callout";
}
private void Initialize()
{
// Show a streets basemap.
_myMapView.Map = new Map(BasemapStyle.ArcGISStreets);
}
private void MapView_GeoViewTapped(object sender, GeoViewInputEventArgs e)
{
// Get the user-tapped location.
MapPoint mapLocation = e.Location;
// Project the map point to WGS84 for latitude/longitude display.
MapPoint projectedLocation = (MapPoint) GeometryEngine.Project(mapLocation, SpatialReferences.Wgs84);
// Format the display callout string based upon the projected map point (example: "Lat: 100.123, Long: 100.234").
string mapLocationDescription = $"Lat: {projectedLocation.Y:F3} Long:{projectedLocation.X:F3}";
// Create a new callout definition using the formatted string.
CalloutDefinition myCalloutDefinition = new CalloutDefinition("Location:", mapLocationDescription);
// Display the callout.
_myMapView.ShowCalloutAt(mapLocation, myCalloutDefinition);
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
Initialize();
}
public override void LoadView()
{
// Create the views.
View = new UIView() { BackgroundColor = ApplicationTheme.BackgroundColor };
_myMapView = new MapView();
_myMapView.TranslatesAutoresizingMaskIntoConstraints = false;
UILabel helpLabel = new UILabel
{
Text = "Tap to show a callout.",
AdjustsFontSizeToFitWidth = true,
TextAlignment = UITextAlignment.Center,
BackgroundColor = UIColor.FromWhiteAlpha(0, .6f),
TextColor = UIColor.White,
Lines = 1,
TranslatesAutoresizingMaskIntoConstraints = false
};
// Add the views.
View.AddSubviews(_myMapView, helpLabel);
// Lay out the views.
NSLayoutConstraint.ActivateConstraints(new[]
{
_myMapView.TopAnchor.ConstraintEqualTo(View.SafeAreaLayoutGuide.TopAnchor),
_myMapView.BottomAnchor.ConstraintEqualTo(View.BottomAnchor),
_myMapView.LeadingAnchor.ConstraintEqualTo(View.LeadingAnchor),
_myMapView.TrailingAnchor.ConstraintEqualTo(View.TrailingAnchor),
helpLabel.TopAnchor.ConstraintEqualTo(View.SafeAreaLayoutGuide.TopAnchor),
helpLabel.LeadingAnchor.ConstraintEqualTo(View.LeadingAnchor),
helpLabel.TrailingAnchor.ConstraintEqualTo(View.TrailingAnchor),
helpLabel.HeightAnchor.ConstraintEqualTo(40)
});
}
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
// Subscribe to events.
_myMapView.GeoViewTapped += MapView_GeoViewTapped;
}
public override void ViewDidDisappear(bool animated)
{
base.ViewDidDisappear(animated);
// Unsubscribe from events, per best practice.
_myMapView.GeoViewTapped -= MapView_GeoViewTapped;
}
}
}