Show callout

View on GitHubSample viewer app

Show a callout with the latitude and longitude of user-tapped points.

Show Callout App

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

  1. When the user taps, get the tapped location(map point) from the SingleTapConfirmedEvent.
  2. Project the point's geometry to WGS84 using GeometryEngine.projectOrNull(mapPoint, SpatialReference.wgs84()).
  3. To the composable MapView's content, add a composable Callout passing it the location Point and calloutContent string.
  4. Changes to the latLongPoint variable will trigger recomposition of the Callout.

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

MapViewModel.ktMapViewModel.ktMainActivity.ktMainScreen.kt
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
55
56
57
58
59
60
61
62
63
64
65
/* 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)
        }
    }
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.