How to build a mapping application

1. Create a map

The first step is to create a 2D or 3D . You can create a map with code or create a or interactively with such as , , or .

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 API for PythonEsri LeafletMapLibre GL JSOpenLayers
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();

2. Set the basemap

The next step is to define the . The most common data source for a basemap layer is the but you can also use the (beta), or . 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:

  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 API for PythonEsri LeafletMapLibre GL JSOpenLayers
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";

3. Add data layers

After you define a , you can add data to a map by adding . A data layer is used to access and display data in such as a , , , or . The services are typically accessed by their URL or item ID in a . Data layers are also used to apply different styles and renderers to features through data visualization.

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

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:

  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.
  5. Set the map location.
  6. Set the zoom level or scale.
  7. 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 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
  }
});
Web map of Santa Monica trails created in Map Viewer and displayed in a custom application

Additional resources

Tutorials

APIs

Tools

Create a custom basemap style

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


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