Basemap

• Overview
• Creating a Basemap
• Setting the LOD
• Waiting for Load

Overview

A basemap is a collection of layers that provide geographic context to a map or scene with data such as topographic features, road networks, buildings, and labels. These features can be represented with different styles as applicable to your application, such as streets, topographic, or imagery.

A basemap can contain both base layers, which comprise one or more tiled layers, and reference layers. Reference layers are displayed on top of the base layers, and can be used, for example, to display labels on top of terrain or streets.

In a MapView, a basemap's reference layers are limited to tiled layers, while in a SceneView they can also contain Scene Layers and be used to display 3D content. For example, a 3D basemap could include 3D objects such as buildings and trees, or labels to be rendered in 3D, either draped over the terrain in a tiled layer, or billboarded in a scene layer.

Creating a Basemap

Creates a new basemap object. Basemaps can be created in a variety of ways:

1. From a PortalItem

   // in this case the portalItem has to be a webmap
   const basemap = new Basemap({
     portalItem: {
       id: "8dda0e7b5e2d4fafa80132d59122268c"  // WGS84 Streets Vector webmap
     }
   });
   

2. From a basemap id

   // create the basemap from a basemap id
   Basemap.fromId("topo-vector");
   

3. From a basemap style

   // create a basemap from the basemap styles service
   const basemap = new Basemap({
     style: {
       id: "arcgis/outdoor",
       language: "es" // displays basemap place labels in spanish
     }
   });
   

4. From a custom basemap layer. These basemaps may be created from tiled services you publish to your own server, or from tiled services published by third parties.

   // create from a third party source
   const basemap = new Basemap({
     baseLayers: [
       new WebTileLayer(...)
     ],
     referenceLayers: [
       new WebTileLayer(...)
     ]
   });
   

Setting the LOD

The MapView.constraints.lods property should be specified when using a dynamic service for a basemap. Do this by either explicitly setting the lods within this property, or create the lods via the create() method on the TileInfo class. This method is used to create a new TileInfo instance with preset properties for lods. See Zoom and LODs section in MapView SDK document for more information.

// create a basemap from a dynamic MapServer
const basemap = new Basemap({
  baseLayers: [
    new MapImageLayer({
      url: "url to your dynamic MapServer",
      title: "Basemap"
    })
  ],
  title: "basemap",
  id: "basemap"
});

const map = new Map({
  basemap: basemap
});

// create a TileInfo instance using the default settings and
// pass its resulting LOD's to a MapView's constraints
// in this case, lods will match the ArcGIS Online web mercator LODs
const view = new MapView({
  container: "viewDiv",
  map: map,
  constraints: {
    lods: TileInfo.create().lods
  }
});

Waiting for Load

The when() method on the Basemap instance can be called to execute processes that may only run after the Basemap is loaded.