How to build a mapping application

1. Create a map

The first step is to create a 2D mapA map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers.Learn more or 3D sceneA scene is a collection of layers that are displayed in 3D. It is typically composed of a basemap layer, data layers, and 3D data.Learn more. You can create a map with code or create a web mapA web map is a map stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web map specification.Learn more or web sceneA web scene is a scene stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web scene specification.Learn more interactively with toolsTools, also known as developer tools, are ArcGIS software applications such as portal and ArcGIS Pro that developers can use to prepare content and data for custom applications they are building.Learn more such as Map ViewerMap Viewer is a browser-based mapping tool that can view, create, and save web maps. It can also perform mapping, visualization, and spatial analysis operations.Learn more, Scene ViewerScene Viewer(™) is a browser-based mapping tool that can view, create, and save web scenes.Learn more, or ArcGIS ProArcGIS Pro is a professional desktop GIS application that can explore, visualize, analyze, and manage 2D and 3D data.Learn more.

Map appsMap apps using web mapsMap apps from builders

Create a map with code:

1. Reference a client-side mapping library.
2. Create a map.

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 Maps SDK for FlutterArcGIS API for PythonLeafletMapLibre GL JSOpenLayers

Use dark colors for code blocksCopy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const map = new Map();

Go to tutorial

2. Set the basemap

The next step is to define the basemap layerA basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service.Learn more. The most common data source for a basemap layer is the ArcGIS Basemap Styles serviceThe ArcGIS Basemap Styles service, also referred to as the Basemap Styles service, is a location service that provides basemap styles and data for the world. It returns styles as Mapbox styles and web maps, and data as vector tiles and/or map tiles. It supports all of the styles in the ArcGIS Basemap style and Open Basemap style family. An ArcGIS Location Platform or ArcGIS Online account is required to use the service.Learn more but you can also use the static basemap tiles serviceThe ArcGIS Static Basemap Tiles service, also known as the Static Basemap Tiles service, is a location service that provides basemap data as pre-rendered and pre-styled map tiles for the world. It supports key styles in the ArcGIS Basemap style family. An ArcGIS Location Platform account is required to use the services.Learn more, custom basemap styleA basemap style is a definition that controls the visual appearance of how geographic data in a basemap are displayed. It includes colors, backgrounds, outlines, labels, and other visual elements. Each basemap style emphasizes a specific type of cartographic theme and data.Learn more or data serviceData services, also known as hosted data services, are services created dynamically to store and provide access to your data in ArcGIS. Examples are feature services, vector tile services, map tile services, image services, and scene services.Learn more. The basemap styles service provides many styles you can choose from such as streets, navigation, outdoor, topographic, light gray, and satellite.

Map appsMap apps using web mapsMap apps from builders

Define the basemap with code:

1. Reference the mapping library.
2. Create a map.
3. Set the basemap source and style.

Example:

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 Maps SDK for FlutterArcGIS API for PythonLeafletMapLibre GL JSOpenLayers

Use dark colors for code blocksCopy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
esriConfig.apiKey = "YOUR_ACCESS_TOKEN";

const map = new Map();
map.basemap = "arcgis/navigation";

Go to tutorial

3. Add data layers

After you define a basemap layerA basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service.Learn more, you can add data to a map by adding data layersA data layer is a layer that references geographic data from a file or a service and is used to visualize the data in a map or scene.Learn more. A data layer is used to access and display data in data serviceData services, also known as hosted data services, are services created dynamically to store and provide access to your data in ArcGIS. Examples are feature services, vector tile services, map tile services, image services, and scene services.Learn more such as a feature serviceA feature service is a data service that provides access to spatial and non-spatial data in feature layers, feature layer views, and tables.Learn more, vector tile serviceA vector tile service is a data service that provides access to vector tile data and a style definition.Learn more, map tile serviceA map tile service, formerly known as image tile service, is a data service that provides access to static, pre-rendered mao tiles. The tiles are typical in PNG format. Map tiles are typically retrieved by specifying a specific level, row, and column value.Learn more, or image serviceAn image service is a data service that can store, process, analyze, and share raster data.Learn more. The services are typically accessed by their URL or item ID 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.Learn more. Data layers are also used to apply different styles and renderers to features through data visualization.

Map appsMap apps using web mapsMap apps from builders

Define and add the data layers with code:

1. Reference the mapping library.
2. Create a map.
3. Set the service URL or item ID for each data layer.
4. Add each data layer.

Example

ArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for .NETArcGIS Maps SDK for KotlinArcGIS Maps SDK for JavaArcGIS Maps SDK for QtArcGIS Maps SDK for FlutterArcGIS API for PythonLeafletMapLibre GL JSOpenLayers

Expand

Use dark colors for code blocksCopy

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
      const trailheadsLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_styled/FeatureServer/0",
      });
      map.add(trailheadsLayer);

      const trailsLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_styled/FeatureServer/0",
      });
      map.add(trailsLayer, 0);

      const parksLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space_styled/FeatureServer/0",
      });
      map.add(parksLayer, 0);

Expand

Go to tutorial

4. Display the map

The final step is to display the basemap layer and data layers on a map. Depending on the client-side mapping library you are using, you can use a view to display the data in 2D as a map or 3D as a scene. You also need to set the location and zoom level or scale of the view.

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
  }
});

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
52
53
54
55
56
57
58
59
60
61
62
      const webmap = new WebMap({
        portalItem: {
          id: "1531b5d82e674a50adcf2eaf95156bc7", // Replace with your web map ID
        },
      });

Additional resources

Tutorials

APIs

Maps (2D)Scenes (3D)Basemap layersData layersGraphicsWeb mapsWeb scenes

Display a map

Create and display a map with the ArcGIS Basemap Styles service.

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

Display a map (basemap session)

Display a map with a basemap session that lasts for 12 hours.

LeafletMapLibre GL JSOpenLayers

Tools

BasemapsWeb mapsWeb scenes

Create a custom basemap style

Use the ArcGIS Vector Tile Style Editor to style a vector tile basemap layer.

Vector Tile Style Editor