What is a web map?
A web map
You use a web map when you want to:
- Create a map
A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. that you can share with other users and applications. - Interactively design and style layers in a map
A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. . - Configure popups for data layers in a map
A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. . - Display a map in an application built with ArcGIS Maps SDKs
ArcGIS Maps SDKs are developer products for building mapping and spatial analysis applications for web browsers, native devices, and game engines. . - Display a map using low-code/no-code app builders.
- Securely store and access a map
A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. in a portalArcGIS portal, also known as a portal, is a website with applications and tools that can be used to create, manage, access, and share geospatial content and data. It supports security and authentication, developer credentials, content and data service management, user and group management, and site administration. A portal can be hosted in Esri's infrastructure or your own infrastructure. . - Remotely configure a map
A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. at any time to change your application.
How to use a web map
The general workflow to use a web map in a custom application is:
1. Create
To create a new web map
Some of the key types of configurations you can make include following:
- Initial extent: Set the starting location and zoom level for the map.
- Basemap: Set the basemap style such as streets, navigation, light gray, or satellite imagery.
- Data layers: Add hosted layers
A hosted layer is an item in a portal that contains the properties and settings for a hosted data service or a layer in a hosted data service. to display features on the basemap. - Style data layers: Set the symbol color and renderers used to style hosted layers
A hosted layer is an item in a portal that contains the properties and settings for a hosted data service or a layer in a hosted data service. . - Style popups: Set the presentation of the data and information when users click on data layers in the map.
To access Map Viewer
2. Manage
After configuring a web map, you use Map Viewer
3. Access
After you create and save a web map, you can access the itemURL and itemid 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
Example code to access a web map:
const webmap = new WebMap({
portalItem: {
id: "1531b5d82e674a50adcf2eaf95156bc7", // Replace with your web map ID
},
});
Code examples
Display a web map with a pin
This example shows how to create a web map with Map Viewer
Create a web map
- Sign in to your portal and click Map.
- In Map Viewer, use Basemap to change the basemap to Light Gray Canvas.
- Move the map and zoom to New York City.
- Use Add > Create sketch layer to add a pin to the map. The web map should look like New York (web map with a pin).
Manage a web map
- In Map Viewer, Save the web map.
- Share the web map with the appropriate sharing level
Sharing level is the security setting assigned to an item in a portal that controls which users can access the resource. The sharing levels are Owner, Organization, Groups, and Everyone. .
Access a web map
- Find the web map item ID or use
1531b5d82e674a50adcf2eaf95156bc7. - Write code to create a map
A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. . - Load and display the web map.
When the web map is loaded by the application, it should look the same as the web map created with Map Viewer.
const webmap = new WebMap({
portalItem: {
id: "1531b5d82e674a50adcf2eaf95156bc7", // Replace with your web map ID
},
});
Display a web map with a data layer
This example shows how to create a web map with Map Viewer
Create a web map
- Sign in to your portal and click Map.
- In Map Viewer, use Basemap to change the basemap to Light Gray Canvas.
- Move the map and zoom to New York City.
- Use Add > Browse layers > Living Atlas > "USA Structures" and add the layer to the map. The web map should look like New York (web map with a layer).
Manage a web map
- In Map Viewer, Save the web map.
- Share the web map with the appropriate sharing level
Sharing level is the security setting assigned to an item in a portal that controls which users can access the resource. The sharing levels are Owner, Organization, Groups, and Everyone. .
Access a web map
- Find the web map item ID or use
9d5bfb5340734021bf88041f8854a9f5. - Write code to create a map
A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. . - Load and display the web map.
When the web map is loaded by the application, it should look the same as the web map created with Map Viewer.
const webmap = new WebMap({
portalItem: {
id: "9d5bfb5340734021bf88041f8854a9f5", // Replace with your web map ID
},
});
Tutorials
Display a web map
Create and display a map from a web map.