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
Use dark colors for code blocksCopy
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
// 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 SwiftUI
import ArcGIS
structShowCalloutView: View{
/// A map with a topographic basemap style.@StateObjectprivatevar map =Map(basemapStyle: .arcGISTopographic)
/// A location callout placement.@Stateprivatevar calloutPlacement: LocationCalloutPlacement?
var body: someView {
MapView(map: map)
.onSingleTapGesture { _, mapPoint inif 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 =LocationCalloutPlacement(location: location)
} else {
// Hides the callout. calloutPlacement =nil }
}
.callout(placement: $calloutPlacement.animation(.default.speed(4))) { callout inVStack(alignment: .leading) {
Text("Location")
.font(.headline)
Text(
CoordinateFormatter.toLatitudeLongitude(
point: callout.location,
format: .decimalDegrees,
decimalPlaces: 2 )
)
.font(.callout)
}
.padding(5)
}
}
}