Display a web map

Learn how to create and display a from a stored in .

display a web map

A contains the definition of a , including properties such as the , initial , , , , and . You can author and save web maps using the or and share them in . Each web map is stored as an item in or , allowing you to access a from a using its and display it in your app.

In this tutorial, you use a 's to display a of trails, trailheads and parks in the Santa Monica Mountains . The web map is hosted in .

Prerequisites

Before starting this tutorial:

  1. You need an ArcGIS Location Platform or ArcGIS Online account.

  2. Confirm that your system meets the minimum system requirements.

  3. An IDE for Java.

Steps

Open a Java project with Gradle

  1. To start this tutorial, complete the Display a map tutorial, or download and unzip the Display a map solution into a new folder.

  2. Open the build.gradle file as a project in IntelliJ IDEA.

  3. If you downloaded the solution, get an access token and set the API key.

Prepare files before coding the app

Modify the files from the Display a map tutorial so that they can be used in this tutorial: you will add and remove imports, change the application title, and remove unnecessary code.

  1. In IntelliJ IDEA's Project tool window, open src/main/java/com.example.app and double-click App.

  2. Add the following imports above the existing imports:

    App.java
    16 17 18 19 20 21
    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
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    import com.esri.arcgisruntime.portal.Portal;
    import com.esri.arcgisruntime.portal.PortalItem;
    
    import com.esri.arcgisruntime.ArcGISRuntimeEnvironment;
    import com.esri.arcgisruntime.mapping.ArcGISMap;
    import com.esri.arcgisruntime.mapping.view.MapView;
    
  3. Remove the following imports:

    App.java
    7 8
    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
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    import com.esri.arcgisruntime.mapping.BasemapStyle;
    import com.esri.arcgisruntime.mapping.Viewpoint;
    
  4. In the start() life-cycle method, change the title that will appear on the application window to Display a web map tutorial.

    App.java
    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
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
      @Override
      public void start(Stage stage) {
    
        // set the title and size of the stage and show it
        stage.setTitle("Display a web map tutorial");
    
        stage.setWidth(800);
        stage.setHeight(700);
        stage.show();
    
    Expand
  5. In start() method, delete the code for creating a map from a basemap and setting a viewpoint. The web map defines the characteristics of the map, so you don't have to set them in your app.

    App.java
    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
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
        ArcGISMap map = new ArcGISMap(BasemapStyle.ARCGIS_TOPOGRAPHIC);
    
        // set the map on the map view
        mapView.setMap(map);
    
        mapView.setViewpoint(new Viewpoint(34.02700, -118.80543, 144447.638572));
    
    Expand

Get the web map item ID

You can use to create and view . Use the to identify the web map . This item ID will be used later in the tutorial.

  1. Go to the LA Trails and Parks web map in the Map Viewer in . This web map displays trails, trailheads and parks in the Santa Monica Mountains.
  2. Make a note of the item ID at the end of the browser's URL. The item ID should be

    41281c51f9de45edaf1c8ed44bb10e30

Display the web map

You can create a from a using the web map's . Use the PortalItem class to access the web map, and the ArcGISMap class to create and display a map from it.

  1. In the start() method, create a new Portal(java.lang.String,boolean) referencing as the portalUrl parameter and false for the loginRequired parameter.

    App.java
    Expand
    54 55 56 57 58 59
    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
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
        // create a map view to display the map and add it to the stack pane
        mapView = new MapView();
        stackPane.getChildren().add(mapView);
    
        Portal portal = new Portal("https://www.arcgis.com", false);
    
    
    Expand
  2. Create a PortalItem for the , by passing the portal and the web map's as parameters.

  3. Create an ArcGISMap(com.esri.arcgisruntime.portal.PortalItem) using the portalItem as the constructor parameter.

    App.java
    Expand
    58 59 60 61 62
    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
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
        Portal portal = new Portal("https://www.arcgis.com", false);
    
        String itemId = "41281c51f9de45edaf1c8ed44bb10e30";
        PortalItem portalItem = new PortalItem(portal, itemId);
        ArcGISMap map = new ArcGISMap(portalItem);
    
    Expand
  4. Use the existing code to display the new ArcGISMap on the mapView with MapView.setMap().

    App.java
    Expand
    54 55 56 57 58 59 60 61 62 63 64
    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
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
        // create a map view to display the map and add it to the stack pane
        mapView = new MapView();
        stackPane.getChildren().add(mapView);
    
        Portal portal = new Portal("https://www.arcgis.com", false);
    
        String itemId = "41281c51f9de45edaf1c8ed44bb10e30";
        PortalItem portalItem = new PortalItem(portal, itemId);
        ArcGISMap map = new ArcGISMap(portalItem);
    
        mapView.setMap(map);
    
    Expand
  5. Run the app. Ensure to run the app as a Gradle task and not as an application in your IDE. In the Gradle tool window, under Tasks > application, double-click run.

You should see a map of trails, trailheads and parks in the Santa Monica Mountains . Click, drag, and scroll the mouse wheel on the map view to explore the map.

What's next?

Learn how to use additional API features, ArcGIS location services, and ArcGIS tools in these tutorials:

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