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 WGS 84 coordinates in latitude and longitude for the tapped point will appear.
How it works
- Define an optional
LocationCalloutPlacement. - Use the
onSingleTapGesture(perform:)map view modifier to update the location callout placement. - Use the
callout(placement:content:)map view modifier with the location callout placement to display a callout.
Relevant API
- LocationCalloutPlacement
- MapView.callout(placement:content:)
Tags
balloon, bubble, callout, flyout, flyover, info window, popup, tap
Sample code
ShowCalloutView.swift
// Copyright 2022 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//// https://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.
import ArcGISimport SwiftUI
struct ShowCalloutView: View { /// A map with a topographic basemap style. @State private var map = Map(basemapStyle: .arcGISTopographic)
/// A location callout placement. @State private var calloutPlacement: CalloutPlacement?
/// The tap location. @State private var tapLocation: Point!
var body: some View { MapView(map: map) .onSingleTapGesture { _, mapPoint in tapLocation = mapPoint if calloutPlacement == nil { // Projects the point to the WGS 84 spatial reference. let location = GeometryEngine.project(mapPoint, into: .wgs84)! // Shows the callout at the tapped location. calloutPlacement = CalloutPlacement.location(location) } else { // Hides the callout. calloutPlacement = nil } } .callout(placement: $calloutPlacement.animation(.default.speed(2))) { _ in VStack(alignment: .leading) { Text("Location") .font(.headline) Text( CoordinateFormatter.latitudeLongitudeString( from: tapLocation, format: .decimalDegrees, decimalPlaces: 2 ) ) .font(.callout) } .padding(5) } }}
#Preview { ShowCalloutView()}