Web map of Santa Monica trails created in Map Viewer and displayed in a custom app
What is a web map?A web map is an item in a portal that contains the properties and settings for a map. The item includes properties such as the initial map extent, basemap, data layers, and all of the styling settings. To create and save a web map you use Map Viewer or ArcGIS Pro. These tools allow you to interactively design and configure a map. After creating a web map, you can use it to display the map in custom application. This type of application is known as a map app using web maps.
You use a web map when you want to:
It is recommended to use the ArcGIS Maps SDKs to build map apps that use web maps. The SDKs provide full support to access and display all of the settings stored in the web map. This greatly reduces the amount of code required to style, display, and manage a map in an application. Most open source libraries do not provide support for web maps.
How to use a web mapThe general workflow to use a web map in a custom application is:
1. CreateTo create a new web map, you can use Map Viewer or ArcGIS Pro. These tools allow you to design and configure a map interactively and then save it in a portal.
Some of the key types of configurations you can make include following:
To access Map Viewer and ArcGIS Pro you need an ArcGIS account with the appropriate user type, role, and permissions. Learn more about creating web maps with these tools in ArcGIS Online > Create and ArcGIS Pro > Share.
Code exampleTo create a web map, go to Display a web map with a pin.
2. ManageAfter configuring a web map, you use Map Viewer or ArcGIS Pro to save and share the web map in a portal. To save a web map as an item, you need to provide meta data such as the title, folder, categories, tags, and summary. When it is saved, the item is assigned a unique item ID. The final step is to set the sharing level for the web map item. The sharing level determines which ArcGIS users and applications can access the web map. The sharing level can be set to owner (private), group, organization, or everyone (public). To learn more about managing items and sharing levels, go to Content and data services > Manage content > Sharing.
Code exampleTo manage a web map, go to Display a web map with a pin.
Portal and data services guideTo learn more about how to create and manage web maps in your portal, go to Items.
3. AccessAfter you create and save a web map, you can access the item with a custom application built with ArcGIS Maps SDKs. To do so, you need the portal URL
and item id
for the web map. With these, you can access the web map's preconfigured settings and display the map. The web map defines the initial state of the map when an application starts. If you need to remotely update the map in your application, you can use Map Viewer or ArcGIS Pro to edit and save the web map while it is referenced. The changes will be reflected in your application the next time it is loaded.
Example code to access a web map:
ArcGIS Maps SDK for JavaScript ArcGIS Maps SDK for JavaScript ArcGIS Maps SDK for .NET ArcGIS Maps SDK for Kotlin ArcGIS Maps SDK for Swift ArcGIS Maps SDK for Java ArcGIS Maps SDK for Qt ArcGIS Maps SDK for Flutter ArcGIS API for Python
Expand
Use dark colors for code blocks Copy1
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
const webmap = new WebMap({
portalItem: {
id: "1531b5d82e674a50adcf2eaf95156bc7", // Replace with your web map ID
},
})
Code example
To display a web map, go to Display a web map with a pin.
TopicTo learn about the JSON properties and structure of a web map, go to the Web Map Specification.
Security and authentication guideIf the sharing level of the web map item or any of it's layers are not set to Everyone (public), you need to use authentication to access it. To learn more about accessing secure resources in a portal, go to Types of authentication.
Code examples Display a web map with a pinThis example shows how to create a web map with Map Viewer and display it in a custom app. The web map is configured with a light gray basemap centered and zoomed to New York City. It also contains a pin (sketch symbol).
Create a web mapLight Gray Canvas Base (for Developers)
.Light Gray Canvas Reference (for Developers)
.1531b5d82e674a50adcf2eaf95156bc7
.To access the web map, you need to implement authentication if you set the sharing level to private, group, or organization. Learn more about the different types of authentication you can implement in Types of authentication.
When the web map is loaded by the application, it should look the same as the web map created with Map Viewer.
Custom app displaying a web map of New York with a pin.
ArcGIS Maps SDK for JavaScript ArcGIS Maps SDK for JavaScript ArcGIS Maps SDK for .NET ArcGIS Maps SDK for Kotlin ArcGIS Maps SDK for Swift ArcGIS Maps SDK for Java ArcGIS Maps SDK for Qt ArcGIS Maps SDK for Flutter ArcGIS API for Python
Expand
Use dark colors for code blocks Copy1
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
const webmap = new WebMap({
portalItem: {
id: "1531b5d82e674a50adcf2eaf95156bc7", // Replace with your web map ID
},
})
Tutorial
For step-by-step instructions, go to Create a web map, Style layers in a web map, and Display a web map.
Portal and data services guideTo learn more about how to create and manage web maps in your portal, go to Items.
Display a web map with a data layerThis example shows how to create a web map with Map Viewer and display it in a custom app. The web map is configured with a light gray basemap centered and zoomed to New York City. It also includes a USA Structures (hosted feature layer) that is saved with the web map. The layer has a formatted popup that displays building structure information when you click on the map.
Create a web mapLight Gray Canvas Base (for Developers)
.Light Gray Canvas Reference (for Developers)
.9d5bfb5340734021bf88041f8854a9f5
.To access the web map, you need to implement authentication if you set the sharing level to private, group, or organization. Learn more about the different types of authentication you can implement in Types of authentication.
When the web map is loaded by the application, it should look the same as the web map created with Map Viewer.
Custom map app displaying a web map of New York with a building structure layer.
ArcGIS Maps SDK for JavaScript ArcGIS Maps SDK for JavaScript ArcGIS Maps SDK for .NET ArcGIS Maps SDK for Kotlin ArcGIS Maps SDK for Swift ArcGIS Maps SDK for Java ArcGIS Maps SDK for Qt ArcGIS Maps SDK for Flutter ArcGIS API for Python
Expand
Use dark colors for code blocks Copy1
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
const webmap = new WebMap({
portalItem: {
id: "9d5bfb5340734021bf88041f8854a9f5", // Replace with your web map ID
},
})
Tutorial
For step-by-step instructions, go to Create a web map, Style layers in a web map, and Display a web map.
Portal and data services guideTo learn how to host your own data in ArcGIS, go to Introduction to data services.
Tutorials Style layers in a web mapUse Map Viewer to style layers in a web map.
Create and display a map from a web map.
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