Show callout

View inJavaKotlinView 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 and create a map Point from it using MapView.screenToLocation(tappedLocation).
  2. Project the point's geometry to WGS84 using GeometryEngine.project(mapPoint, SpatialReferences.getWgs84()).
  3. Create a new Android TextView object and set its text to the coordinate string from the point.
  4. Create a new Callout with MapView.getCallout and set its location on the map with callout.location = mapPoint.
  5. Set the callout's content with callout.content = textView and display it on the map view with callout.show.

Relevant API

  • Callout
  • MapView
  • Point

Tags

balloon, bubble, callout, flyout, flyover, info window, popup, tap

Sample Code

MainActivity.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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/*
 * Copyright 2020 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.arcgisruntime.sample.showcallout

import android.graphics.Color
import android.os.Bundle
import android.view.MotionEvent
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.esri.arcgisruntime.ArcGISRuntimeEnvironment
import com.esri.arcgisruntime.geometry.GeometryEngine
import com.esri.arcgisruntime.geometry.Point
import com.esri.arcgisruntime.geometry.SpatialReferences
import com.esri.arcgisruntime.mapping.ArcGISMap
import com.esri.arcgisruntime.mapping.BasemapStyle
import com.esri.arcgisruntime.mapping.Viewpoint
import com.esri.arcgisruntime.mapping.view.DefaultMapViewOnTouchListener
import com.esri.arcgisruntime.mapping.view.MapView
import com.esri.arcgisruntime.sample.showcallout.databinding.ActivityMainBinding
import kotlin.math.roundToInt

class MainActivity : AppCompatActivity() {

    private val activityMainBinding by lazy {
        ActivityMainBinding.inflate(layoutInflater)
    }

    private val mapView: MapView by lazy {
        activityMainBinding.mapView
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(activityMainBinding.root)

        // authentication with an API key or named user is required to access basemaps and other
        // location services
        ArcGISRuntimeEnvironment.setApiKey(BuildConfig.API_KEY)

        // create a map with a topographic basemap
        val map = ArcGISMap(BasemapStyle.ARCGIS_TOPOGRAPHIC)

        // set the map to be displayed in the layout's map view
        mapView.map = map

        // set an initial viewpoint on the map view
        mapView.setViewpoint(Viewpoint(34.056295, -117.195800, 100000.0))

        mapView.onTouchListener = object : DefaultMapViewOnTouchListener(this, mapView) {

            override fun onSingleTapConfirmed(motionEvent: MotionEvent): Boolean {
                // get the point that was tapped on the screen
                val screenPoint =
                    android.graphics.Point(motionEvent.x.roundToInt(), motionEvent.y.roundToInt())
                // create a map point from that screen point
                val mapPoint = mapView.screenToLocation(screenPoint)
                // convert the point to WGS84 for obtaining lat/lon format
                val wgs84Point =
                    GeometryEngine.project(mapPoint, SpatialReferences.getWgs84()) as Point
                // create a textview for the callout
                val calloutContent = TextView(applicationContext).apply {
                    setTextColor(Color.BLACK)
                    setSingleLine()
                    // format coordinates to 4 decimal places and display lat long read out
                    text = getString(R.string.callout_text, wgs84Point.y, wgs84Point.x)
                }

                // get the callout, set its content and show it and the tapped location
                mapView.callout.apply {
                    location = mapPoint
                    content = calloutContent
                    show()
                }

                // center the map on the tapped location
                mapView.setViewpointCenterAsync(mapPoint)

                return true
            }
        }
    }

    override fun onResume() {
        super.onResume()
        mapView.resume()
    }

    override fun onPause() {
        mapView.pause()
        super.onPause()
    }

    override fun onDestroy() {
        mapView.dispose()
        super.onDestroy()
    }
}

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