Maps (2D)

Map with the outdoors basemap style centered at -107.8801, 37.2753 with zoom level 12

What is a map?

A map is a container for . You use a map together with a to display layers of geographic data in 2D. Most applications contain a to display geographic data with streets or satellite imagery, but you can also use and to display additional data.

You can use a map and a map view to:

  • Display such as streets, topographic, light gray canvas, or satellite imagery.
  • Display with .
  • Display that contain feature, vector tile, or tile layer data.
  • Display temporary points, lines, polygons, or text as .
  • Provide an interface with which your users can zoom, pan, and interact.
  • Inspect and display attribute information.
  • Display in a .

How a map works

A and a work together to display in 2D. A map manages layers and a map view displays layer data. A map typically contains a and one or more . A map view combines all of the layers and any graphics present into a single display.

Data sources

Each in a map references a . A layer's data source provides the geographic data that is displayed in the . The main source for a is a . The source for a can be a file, collection of local data, or a . Learn more about data sources in Basemap layers and Data layers.

Layer order

When a displays a , the layers and graphics are displayed from the bottom up. Therefore, it is important to add a first, then , and then .

Figure 1: A map and map view work together to display layers and graphics.

Map

A map contains a collection of for a mapping application. You use it to add, remove, order, and set the visibility for all layers you would like to display. For a simple application, you can just add a .

A basemap layer is the most important layer in a map as it provides the overall visual context for the map. Most APIs provide an enumeration to make it easier to access a basemap layer's data source. Other APIs require you to reference the service URL and style for the desired basemap.

ArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for .NETArcGIS Maps SDK for KotlinArcGIS Maps SDK for SwiftArcGIS Maps SDK for JavaArcGIS Maps SDK for QtArcGIS API for PythonEsri LeafletMapLibre GL JSOpenLayers
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
esriConfig.apiKey = "YOUR_ACCESS_TOKEN";
const map = new Map({
  basemap: "arcgis/navigation"
});

Map view

A map view is responsible for displaying the in a map and . Its primary role is to display all of the geographic data for a specific area of the map. The visible area is known as the .

A map view also provides a user interface for the and its . It supports user interactions such as click, tap, swipe, and pinch. You can use these events to access data in layers or graphics. Click events are typically used to access feature and display them in a pop-up.

To create a map view, you typically set the following:

  • Map: A defines the layers that need to be displayed.

  • Center point: A defines the center position of the map view that is displayed. It typically contains longitude and latitude or x/y coordinates for the current .

  • Zoom level: The is a value used to set the level of detail and the scale of the geographic data displayed in the view. It is typically set to a value between 0 (global) and 23 (local).

  • Scale: Setting the scale is an alternate way of setting the level of detail and the scale of the geographic data displayed in the view. Some APIs require using a scale value instead of a zoom level value. See the calculator below:

To display the map, you also need to set the container to connect the view to a visible component.

ArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for .NETArcGIS Maps SDK for KotlinArcGIS Maps SDK for SwiftArcGIS Maps SDK for JavaArcGIS Maps SDK for QtArcGIS API for PythonEsri LeafletMapLibre GL JSOpenLayers
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const view = new MapView({
  map: map,
  center: [-118.805, 34.027], // Longitude, latitude
  zoom: 13, // scale: 72223.819286
  container: "viewDiv",
  constraints: {
    snapToZoom: false
  }
});

Code examples

Display a map

This example uses a and to display the topographic . It centers the map view at -118.805, 34.027 (longitude, latitude) and sets the zoom level to 13.

Steps

  1. Create a and add a .
  2. Create a and set the center point and zoom level (or scale).
ArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for .NETArcGIS Maps SDK for KotlinArcGIS Maps SDK for SwiftArcGIS Maps SDK for JavaArcGIS Maps SDK for QtArcGIS API for PythonEsri LeafletMapLibre GL JSOpenLayers
Expand
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
      esriConfig.apiKey= "YOUR_ACCESS_TOKEN";
      const map = new Map({
        basemap: "arcgis/topographic" // Basemap layer
      });

      const view = new MapView({
        map: map,
        center: [-118.805, 34.027],
        zoom: 13, // scale: 72223.819286
        container: "viewDiv",
        constraints: {
          snapToZoom: false
        }
      });

Tutorials

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close