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 ArcGIS
import 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()
}