Learn how to create and display a map from a web map stored in ArcGIS.
A web map contains the definition of a map, including properties such as the basemap, initial extent, layers, styles, pop-ups, and labels. You can author and save web maps using the Map Viewer or ArcGIS Pro and share them in ArcGIS. Each web map is stored as an item in ArcGIS Online or ArcGIS Enterprise, allowing you to access a web map from a portal using its item ID and display it in your app.
In this tutorial, you use a web map's item ID to display a map of
trails, trailheads and parks in the Santa Monica Mountains
. The web map is hosted in
ArcGIS Online.
NoteFor more background information about the topics in this tutorial, visit Maps (2D) and in the Mapping and location services guide.
PrerequisitesBefore starting this tutorial:
You need an ArcGIS Location Platform or ArcGIS Online account.
Confirm that your system meets the system requirements.
An IDE for Android development in Kotlin.
This tutorial uses Android Studio Chipmunk 2021.2.1 Patch 1, but the code described should work in any Android IDE that supports Kotlin, including later versions of Android Studio.
Steps Open an Android Studio projectTo start this tutorial, complete the Display a map tutorial. Or download and unzip the Display a map solution in a new folder.
Modify the old project for use in this new tutorial. Expand More info for instructions.
On your file system, delete the .idea folder, if present, at the top level of your project.
In the Android tool window, open app > res > values > strings.xml.
In the <string name="app_name">
element, change the text content to Display a web map.
strings.xml
Use dark colors for code blocks
1 2 3 4 5
Change line1
2
3
4
5
<resources>
<string name="app_name">Display a web map</string>
</resources>
In the Android tool window, open Gradle Scripts > settings.gradle.
Change the value of rootProject.name
to Display a web map.
settings.gradle
Expand
Use dark colors for code blocks21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 22 23 24
Change line1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
rootProject.name = "Display a web map"
include ':app'
Click File > Sync Project with Gradle files. Android Studio will recognize your changes and create a new .idea folder.
If you downloaded the solution, get an access token and set the API key.
Go to the Create an API key tutorial to obtain a new API key access token using your ArcGIS Location Platform or ArcGIS Online account. Ensure that the following privilege is enabled: Location services > Basemaps > Basemap styles service. Copy the access token as it will be used in the next step.
In Android Studio: in the Android tool window, open app > java > com.example.app > MainActivity.
In the setApiKeyForApp()
method, find the ArcGISRuntimeEnvironment.setApiKey("YOUR_ACCESS_TOKEN")
call and paste your access token inside the double quotes, replacing YOUR_ACCESS_TOKEN.
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
private fun setApiKeyForApp(){
ArcGISRuntimeEnvironment.setApiKey("YOUR_ACCESS_TOKEN")
}
Warning
The access token is stored directly in the code as a convenience for this tutorial. Storing access tokens in the source code is not best practice.
You can use ArcGIS tools to create and view web maps. Use the Map Viewer to identify the web map item ID. This item ID will be used later in the tutorial.
trails, trailheads and parks in the Santa Monica Mountains
.41281c51f9de45edaf1c8ed44bb10e30
.Replace app-specific import statements with the imports needed for this tutorial.
MainActivity.kt
Use dark colors for code blocks
16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 17 18 19 20 21 22 23 24 25 26 27 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28
Change line Change line Change line Change line Change line1
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
package com.example.app
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.esri.arcgisruntime.ArcGISRuntimeEnvironment
import com.esri.arcgisruntime.mapping.ArcGISMap
import com.esri.arcgisruntime.mapping.view.MapView
import com.esri.arcgisruntime.portal.Portal
import com.esri.arcgisruntime.portal.PortalItem
import com.example.app.databinding.ActivityMainBinding
You can create a map from a web map using the web map's item ID. Use the PortalItem
class to access the web map, and the ArcGISMap
class to create and display a map from it.
Delete the code inside the setupMap
method. These lines come from the Display a map tutorial and do not apply here.
MainActivity.kt
Use dark colors for code blocks
71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 72 73 74 75 76 77 78 79 80 81 82 83 84 84 84
Remove line Remove line Remove line Remove line Remove line Remove line Remove line Remove line1
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
// set up your map here. You will call this method from onCreate()
private fun setupMap() {
// create a map with the BasemapStyle streets
val map = ArcGISMap(BasemapStyle.ARCGIS_TOPOGRAPHIC)
// set the map to be displayed in the layout's MapView
mapView.map = map
// set the viewpoint, Viewpoint(latitude, longitude, scale)
mapView.setViewpoint(Viewpoint(34.0270, -118.8050, 72000.0))
}
Create a new Portal
referencing ArcGIS Online as the portalUrl
parameter and false
for the loginRequired
parameter.
MainActivity.kt
Expand
Use dark colors for code blocks70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 71 72 73 74 75 75 75 75 75 75 75 76 76 76
Add line.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
// set up your map here. You will call this method from onCreate()
private fun setupMap(){
val portal = Portal("https://www.arcgis.com", false)
}
Create a PortalItem
for the web map, by passing the portal
and the web map's item ID as parameters.
Create an ArcGISMap
using the portalItem
as the constructor parameter.
MainActivity.kt
Expand
Use dark colors for code blocks73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 74 75 76 77 78 78 77 76 76 76 76
Add line. Add line. Add line.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
val portal = Portal("https://www.arcgis.com", false)
val itemId = "41281c51f9de45edaf1c8ed44bb10e30"
val portalItem = PortalItem(portal, itemId)
val map = ArcGISMap(portalItem)
Set the map
property of mapView
to the ArcGISMap
you just created.
MainActivity.kt
Expand
Use dark colors for code blocks70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 70 71 72 73 74 75 76 77 78 79 80 81 82 82 82
Add line.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
// set up your map here. You will call this method from onCreate()
private fun setupMap(){
val portal = Portal("https://www.arcgis.com", false)
val itemId = "41281c51f9de45edaf1c8ed44bb10e30"
val portalItem = PortalItem(portal, itemId)
val map = ArcGISMap(portalItem)
mapView.map = map
}
Click Run > Run > app to run the app.
You should see a map of
trails, trailheads and parks in the Santa Monica Mountains
. Drag, swipe, or pinch on the map view to explore the map.
What's next?Learn how to use additional API features, ArcGIS location services, and ArcGIS tools in these tutorials:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4