Using the SDK with ArcGIS Location Platform | ArcGIS Maps SDK for JavaScript

Use ArcGIS Maps SDK for JavaScript ArcGIS Maps SDK for JavaScript, previously known as ArcGIS API for JavaScript, is a developer product for building mapping and spatial analysis applications for the web. Learn more with ArcGIS Location Platform ArcGIS Location Platform, formerly known as ArcGIS Platform, is a Platform as a Service (PaaS) product that gives developers access to location services, APIs, and tools to build mapping and spatial analysis applications. It is subscription-based and requires an ArcGIS Location Platform account. Learn more to build interactive mapping and spatial analysis applications.

This section covers common workflows for accessing ArcGIS Location Services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Static Maps service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more and working with hosted data services Data 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 .

Bringing data into your application

Data hosting, also referred to as data publishing, is the process of securely storing, managing, and accessing your geographic data in ArcGIS as a data service Data 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 . ArcGIS Location Platform allows you to host and manage your data using data management tools Data management tools are ArcGIS software applications and functionality in portal and ArcGIS Pro that can be used by developers to create, manage, and edit content and data such as web maps, hosted layers, and data services for their applications. Learn more to create services such as feature services, vector tile services, and map tile services. Each of these services can be consumed in a JavaScript Maps SDK application using either a web map A 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 the service’s corresponding layer type classes. See the documentation on layers for more information on how to use these services in your application.

Using web maps

Web maps are items in a portal that contain properties and settings for a map that can be created and managed in your portal. The JavaScript Maps SDK provides a simple way to access and display these web maps in your application. All the properties and settings configured on the web map will be persisted into your application. This means that if you update the web map in the portal, the changes will be reflected in your application, making it a seamless experience.

To access a web map created in your portal within your JavaScript Maps SDK application, you can either:

Provide the item ID of the web map in the item-id attribute of the <arcgis-map> component.

<script>
  var esriConfig = {
    apiKeys: {
      basemapStyles: "YOUR_ACCESS_TOKEN",
    }
  };
</script>
<arcgis-map item-id="YOUR_WEB_MAP_ID"></arcgis-map>

Or use the portal item ID to create a new WebMap object then add the web map to the map component in your application.

<script>
  var esriConfig = {
    apiKeys: {
      basemapStyles: "YOUR_ACCESS_TOKEN",
    }
  };
</script>
<arcgis-map item-id="YOUR_WEB_MAP_ID"></arcgis-map>
<script type="module">
  import WebMap from "@arcgis/core/WebMap.js";
  // Create a new WebMap object using the portal item ID.
  const webMap = new WebMap({
    portalItem: {
      id: "YOUR_WEB_MAP_ID",
    },
  });
  // Set the web map to the map component.
  const arcgisMap = document.querySelector("arcgis-map");
  arcgisMap.map = webMap;
</script>

Using portal items

When a service is created, it is stored in a portal item that can be accessed by the portal item ID. When referencing the layer as a portal item, all properties such as the renderer, popup, etc. are set on the portal item and will be persisted into your application. This means that if you update the layer properties in the portal, the changes will be reflected in your application making it a seamless experience. See how to work with data services for the steps to create manage, and access data services.

These portal items allow you to easily create layers that you can add to maps in your application. For example, to access a feature layer that references a feature service, you can use the portal item ID to create a new FeatureLayer object.

const layer = new FeatureLayer({
  portalItem: {
    id: "YOUR_PORTAL_ITEM_ID",
  },
});

Using service URLs

A service can also be consumed by the JavaScript Maps SDK using the corresponding layer class and the service URL. For example, to access a feature layer that references a feature service, you can use the service URL to create a new FeatureLayer object.

const layer = new FeatureLayer({
  title: "Pool Permits",
  // The URL to the feature service.
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/PoolPermits/FeatureServer/1",
});

This is useful when you want to access a service that is not hosted in your portal or published as a portal item. When using a service URL, you will need to set the properties such as the renderer, popup, etc. in your application.

Data from other sources (non-ArcGIS)

The JavaScript Maps SDK provides classes to work with data from other sources, such as GeoJSON files, CSV files, or OGC data in your application.

See the following sections for more information on how to use these data formats in your application.

ArcGIS Location Services

The following show how to access ArcGIS Location Platform Location Services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Static Maps service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more . The subtopics explain how these services can be utilized with the JavaScript Maps SDK to create location-aware applications.

Basemaps

The basemap styles service is a location service ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Static Maps service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more that provides basemap styles A 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 and data for the extent of the world. The service also supports displaying localized language place labels, places, and worldviews. Review the basemap styles service and the variety of basemaps available for use in your applications. These basemaps can be created from a string in the form of {provider}/{style}, for example arcgis/navigation. See the ArcGIS Basemap Styles service documentation for the full list of available styles.

To set a basemap in your app, you can use the basemap attribute on the map component.

<script>
  var esriConfig = {
    apiKeys: {
      basemapStyles: "YOUR_ACCESS_TOKEN",
    }
  };
</script>
<arcgis-map basemap="arcgis/topographic"></arcgis-map>

You can also add a basemap to the map by creating a new Basemap object using the BasemapStyle class, which supports basemaps from the basemap styles service.

const spanishBasemap = new Basemap({
  style: new BasemapStyle({
    id: "arcgis/human-geography",
    language: "es", // place labels will be displayed in Spanish
    apiKey: "YOUR_ACCESS_TOKEN", // set the API key to access the basemap styles service
  }),
});
const viewElement = document.querySelector("arcgis-map");
viewElement.map = new Map({
  basemap: spanishBasemap,
});

Static basemaps

The JavaScript Maps SDK also supports consuming the ArcGIS Static Basemap Tiles service, which is a location service ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Static Maps service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more that provides basemap data as pre-rendered and pre-styled map tiles for the world.

To use the static basemaps, you can create a new TileLayer object with the URL to the static basemap tiles service and add it to the map.

// create the tile layer with the default style
const staticBasemapLayer = new TileLayer({
  url: `https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/arcgis/outdoor/static`,
  customParameters: {
    // set the basemap language to French
    language: "fr",
    token: "YOUR_ACCESS_TOKEN"
  },
});
// create the basemap with the tile layer and add it to the map
viewElement.map = new Map({
  basemap: new Basemap({
    baseLayers: [staticBasemapLayer],
  }),
});

See the Static basemap tiles sample for a complete example of how to use the static basemaps in your application.

Geocoding

The geocoding service A geocoding service is a service that can search for addresses, place addresses, businesses, reverse geocode coordinates to addresses, provide suggestions for places, and perform bulk geocoding. It is hosted by Esri as the ArcGIS Geocoding service and can also be hosted in ArcGIS Enterprise. Learn more is a location service ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Static Maps service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more that can search for addresses, place addresses, and businesses. The Search component is the primary way to access the geocoding service. Set the API key globally to use the default geocoding service when using Search.

When using custom Search component/widget parameters or creating a locator, set the API key and service URL.

<arcgis-map item-id="45b3b2fb35e94ab09381d0caa0da5946" popup-component-enabled>
  <arcgis-search slot="top-right"></arcgis-search>
</arcgis-map>

// Get the search component.
const searchComponent = document.querySelector("arcgis-search");
// Set the component search sources with the locator service and API key.
searchComponent.sources = [
  {
    name: "Location services geocoding service",
    placeholder: "Search for a place...",
    apiKey: "YOUR_ACCESS_TOKEN",
    url: "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer",
  },
];

Routing and directions

The routing service is a location service ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Static Maps service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more that can find routes, directions, and perform advanced analyses on street networks. The Directions component and Directions widget are the primary way to access the routing service. Directions uses the same logic as Search when setting an API key. To use the routing service, you can either set the API key globally or set the API key on the component/widget:

<arcgis-map item-id="45b3b2fb35e94ab09381d0caa0da5946">
  <arcgis-directions slot="top-right"></arcgis-directions>
</arcgis-map>

// Get the directions component and set the API key.
const directionsComponent = document.querySelector("arcgis-directions");
directionsComponent.apiKey = "YOUR_ACCESS_TOKEN";

Places

The places service is a location service ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Static Maps service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more that can search for places, such as restaurants, hotels, and parks. The places API is the primary way to access the place finding service. See the find nearby places and details tutorial for an example of how to use the place finding location service with the JavaScript Maps SDK.

GeoEnrichment

The GeoEnrichment service A GeoEnrichment service is a service that aggregates demographic data and local facts for locations around the world. It is used to provide insight about the people and places near a location. It is hosted by Esri as the ArcGIS GeoEnrichment service and can also be hosted in ArcGIS Enterprise. Learn more is a location service ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Static Maps service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more that finds demographic data and local facts for locations around the world. To work with the GeoEnrichment service, you can utilize ArcGIS REST JS ArcGIS REST JS is a collection of JavaScript modules that can access ArcGIS location services and ArcGIS Enterprise services. Learn more alongside the JavaScript Maps SDK. See the get demographic data tutorial for an example of how to integrate the ArcGIS REST JS with the JavaScript Maps SDK to use the GeoEnrichment service.

Samples and tutorials with ArcGIS Location Platform

The JavaScript Maps SDK provides a number of tutorials and samples to help you build powerful mapping applications. To use the tutorials and samples with ArcGIS Location Platform ArcGIS Location Platform, formerly known as ArcGIS Platform, is a Platform as a Service (PaaS) product that gives developers access to location services, APIs, and tools to build mapping and spatial analysis applications. It is subscription-based and requires an ArcGIS Location Platform account. Learn more , they may need to be updated to use the location services and API key authentication.

Web maps

If the sample or tutorial is using a web map, the web map will need to be opened in Map Viewer and the basemap updated by using the Basemap tool. See the Switch the basemap documentation on more information. Once the basemap is updated, you can save the web map and use it in your application. An API key should be set globally in your application using the apiKeys.basemapStyles property on config once the web map is updated to use the basemap styles service. See the Web maps section for more information on how to set a web map in your JavaScript Maps SDK application.

Updating the basemap

If the sample or tutorial is not using a web map and is working directly with layers and basemaps, you will need to make sure to update the basemap to use the basemap styles service. See the Basemaps section for more information on how to use the basemap styles service in your application. An API key should be set globally in your application using the apiKeys.basemapStyles property on config when using the basemap styles service.

Geocoding and routing

If the sample or tutorial is using a geocoding service or routing service you will need to set the API key on the component/widget or set an API key globally in your application. See the Geocoding and Routing and directions sections for more information on how to set the API key on the component/widget.

Knowledge graphSamples Using the SDK with ArcGIS Location PlatformSamples