Maps (2D)

What is a map?

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

You can use a map and a map view to:

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

How a map works

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

Data sources

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

Layer order

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

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

Map

A map contains a collection of layers 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 basemap layer.

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.

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 layers in a map and graphics. 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 extent.

A map view also provides a user interface for the map and its layers. 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 attributes and display them in a pop-up.

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

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

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

• Zoom level: The zoom level 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:

  Zoom level to scale converter

  Zoom level to scale converter

  Adjust the range slider to convert zoom level presets to their corresponding map scales.

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

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

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

Display a map

Create and display a map with the basemap styles service.

JavaScript Maps SDKKotlin Maps SDKSwift Maps SDKFlutter Maps SDK.NET Maps SDKJava Maps SDKQt Maps SDKEsri LeafletMapLibre GL JSOpenLayers