Maps (2D)

Map with the navigation basemap layer, map view centered at -107.8801, 37.2753, zoom level 12

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 layer 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.

ArcGIS JS APIEsri LeafletMapbox GL JSOpenLayersArcGIS .NET APIArcGIS Android APIArcGIS iOS APIArcGIS Java APIArcGIS Qt API (C++)ArcGIS Qt API (QML)
                  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Fix blank line

esriConfig.apiKey = "YOUR-API-KEY";
const map = new Map({
  basemap: "arcgis-navigation"
});



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

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:

    NOTE: Mapbox zoom levels are one value less than ArcGIS API zoom levels.Zoom level is predicated on a 256x256 pixel tile. Because Mapbox image tiles are 512x512 pixels, Mapbox zoom levels are 1 less than those of other APIs. For example: zoom level 12 in the Mapbox API is equivalent to zoom level 13 in other APIs such as the ArcGIS JavaScript API or Leaflet.

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

ArcGIS JS APIEsri LeafletMapbox GL JSOpenLayersArcGIS .NET APIArcGIS Android APIArcGIS iOS APIArcGIS Java APIArcGIS Qt API (C++)ArcGIS Qt API (QML)
                  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Fix blank line

esriConfig.apiKey = "YOUR-API-KEY";
const map = new Map({
  basemap: "arcgis-navigation"
});



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

Examples

Display a map

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

Steps

  1. Create a map and add a basemap layer.
  2. Create a map view and set the center point and zoom level (or scale).
ArcGIS JS APIEsri LeafletMapbox GL JSOpenLayersArcGIS .NET APIArcGIS Android APIArcGIS iOS APIArcGIS Java APIArcGIS Qt API (C++)ArcGIS Qt API (QML)
                                                   
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
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS Developer Guide: Display a map (2D)</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.19//esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19//"></script>

  <script>
    require([
     "esri/config",
      "esri/Map",
      "esri/views/MapView"
    ],(esriConfig, Map, MapView)=> {
      esriConfig.apiKey= "YOUR-API-KEY";
      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
        }
      });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

Tutorials

Services

Basemap layer service

Access streets, satellite, and other basemap styles for maps and scenes.

API support

2D Display3D DisplayBasemap layersData layersGraphicsWeb mapsWeb scenes
ArcGIS API for JavaScriptFully supportedFully supportedFully supportedFully supportedFully supportedFully supportedFully supported
ArcGIS Runtime API for AndroidFully supportedFully supportedFully supportedFully supportedFully supportedFully supportedFully supported
ArcGIS Runtime API for iOSFully supportedFully supportedFully supportedFully supportedFully supportedFully supportedFully supported
ArcGIS Runtime API for JavaFully supportedFully supportedFully supportedFully supportedFully supportedFully supportedFully supported
ArcGIS Runtime API for .NETFully supportedFully supportedFully supportedFully supportedFully supportedFully supportedFully supported
ArcGIS Runtime API for QtFully supportedFully supportedFully supportedFully supportedFully supportedFully supportedFully supported
ArcGIS API for PythonFully supportedNot supportedFully supportedFully supportedFully supportedFully supportedFully supported
Esri LeafletFully supportedNot supportedFully supportedFeature layer, Image tile layerLeaflet LayersNot supportedNot supported
MapBox GL JSFully supportedNot supportedFully supportedFeature layer, Image tile layerMapbox LayersNot supportedNot supported
OpenLayersFully supportedNot supportedFully supportedFeature layer, Image tile layerOpenSource LayersNot supportedNot supported
ArcGIS REST JSNot supportedNot supportedDirect access and authenticationDirect access and authenticationNot supportedDirect access and authenticationDirect access and authentication
Full supportPartial support (see notes)Not supported

Tools

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