Show callout

View inJavaKotlin
View on GitHub
Sample 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 blocks
                                                                                                               
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
/*
 * 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.