How to build a mapping application

1. Create a map

The first step is to create a 2D map or 3D scene. You can create a map with code or create a web map or web scene interactively with tools such as Map Viewer, Scene Viewer, or ArcGIS Pro.

Create a map with code:

Reference a client-side mapping library.
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 Qt (C++)ArcGIS API for PythonEsri LeafletMapLibre GL JSOpenLayers

Use dark colors for code blocks

Copy

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 layer. The most common data source for a basemap layer is the basemap styles service API but you can also use a custom basemap style or data service. The basemap styles service provides many styles you can choose from such as streets, navigation, outdoor, topographic, light gray, and satellite.

Define the basemap with code:

Reference the mapping library.
Create a map.
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 Qt (C++)ArcGIS API for PythonEsri LeafletMapLibre GL JSOpenLayers

Use dark colors for code blocks

Copy

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 layer, you can add data to a map by adding data layers. A data layer is used to access and display data in data service such as a feature service, vector tile service, map tile service, or image service. The services are typically accessed by their URL or item ID in a portal. Data layers are also used to apply different styles and renderers to features through data visualization.

Define and add the data layers with code:

Reference the mapping library.
Create a map.
Set the service URL or item ID for each data layer.
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 Qt (C++)ArcGIS Maps SDK for Qt (QML)ArcGIS API for PythonEsri LeafletMapLibre 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
      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.

Display the map using a view:

Reference the mapping library.
Create a map.
Set the service URL or item ID for each data layer.
Add each data layer.
Set the map location.
Set the zoom level or scale.
Display the 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 Qt (C++)ArcGIS Maps SDK for Qt (QML)ArcGIS API for PythonEsri LeafletMapLibre GL JSOpenLayers

Use dark colors for code blocks

Copy

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

Go to tutorial

Web map of Santa Monica trails created in Map Viewer and displayed in a custom application

Display the web map:

Reference the mapping library.
Load the web map.
Display the web 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 Qt (C++)ArcGIS API for Python

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
      const webmap = new WebMap({
        portalItem: {
          id: "1531b5d82e674a50adcf2eaf95156bc7"  // Replace with your web map ID
        }
      });

Expand

Go to tutorial

Web map of Santa Monica trails created in Map Viewer and displayed in a custom application

Additional resources

Tutorials

APIs

Display a map

Create and display a map with the basemap styles service.

JavaScript Maps SDK Kotlin Maps SDK .NET Maps SDK Java Maps SDK Qt Maps SDK Esri Leaflet MapLibre GL JS OpenLayers

Tools

Create a custom basemap style

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

Vector Tile Style Editor

How to build a mapping application

1. Create a map

2. Set the basemap

3. Add data layers

4. Display the map

1. Create a map

2. Set the basemap

3. Add data layers

4. Display the map

Additional resources

Tutorials

APIs

Display a map

Display a scene

Change the basemap layer

Change the place label language

Display a custom basemap style

Display basemap places

Display a popup

Add a point, line, and polygon

Display a web map

Display a web scene

Tools

Create a custom basemap style

Create a web map

Style layers in a web map

Create a web scene

Style layers in a web scene