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
- When the user taps, get the tapped location(map point) from the
SingleTapConfirmedEvent
. - Project the point's geometry to WGS84 using
GeometryEngine.projectOrNull(mapPoint, SpatialReference.wgs84())
. - To the composable
MapView
's content, add a composableCallout
passing it the locationPoint
and calloutContent string. - Changes to the
latLongPoint
variable will trigger recomposition of theCallout
.
Relevant API
- Callout
- GeometryEngine
- MapView
- Point
Additional information
This sample uses the GeoView-Compose Toolkit module to implement a composable MapView, which supports the use of Callouts.
Tags
balloon, bubble, callout, flyout, flyover, geoview-compose, info window, popup, tap, toolkit
Sample Code
/* Copyright 2023 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.
*
*/
package com.esri.arcgismaps.sample.showcallout.components
import android.app.Application
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.AndroidViewModel
import com.arcgismaps.geometry.GeometryEngine
import com.arcgismaps.geometry.Point
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.view.SingleTapConfirmedEvent
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.esri.arcgismaps.sample.showcallout.R
class MapViewModel(private val application: Application) : AndroidViewModel(application) {
// Create a mapViewProxy that will be used to identify features in the MapView.
// This should also be passed to the composable MapView this mapViewProxy is associated with.
val mapViewProxy = MapViewProxy()
// Create an ArcGISMap with viewpoint set to Los Angeles, CA.
val arcGISMap = ArcGISMap(BasemapStyle.ArcGISNavigationNight).apply {
initialViewpoint = Viewpoint(34.056295, -117.195800, 1000000.0)
}
// Keep track of the state of a lat/lon point.
var latLonPoint: Point? by mutableStateOf(null)
// Keep track of the state of the callout content String.
var calloutContent: String by mutableStateOf("")
/**
* Show a callout at the map point of the single tap event.
*/
fun showCalloutAt(singleTapConfirmedEvent: SingleTapConfirmedEvent) {
// Get map point from the Single tap event.
singleTapConfirmedEvent.mapPoint?.let { point ->
// Convert the point to WGS84 to get a latitude and longitude coordinate.
latLonPoint = GeometryEngine.projectOrNull(
point,
SpatialReference.wgs84()
) as Point
// Set the callout text to display point coordinates.
calloutContent = application.getString(R.string.callout_text, latLonPoint?.y, latLonPoint?.x)
}
}
}