Key concepts

This document provides an overview of how to work with Esri Leaflet and ArcGIS location services to build mapping applications. The topics include how to work with basemap layers, hosted data layers, and location services.

Display a basemap layer and use ArcGIS REST JS to access location services.

Basemap layers

Basemap layers are vector tile layers with styles for streets, topography, and satllite imagery that you can use. The default styles provided by the basemap layer service or you can create your own custom styles.

For more background information, visit Basemap layers in the Mapping APIs and location services guide.

Display a basemap style

To access a default basemap layer style, use a url to access the service with an enumeration for the desired style.

Steps

Define an basemap style enumeration.
Define the URL.
Access the basemap layer.

const apiKey = "YOUR-API-KEY";
const basemapEnum = "ArcGIS:Streets";

const map = L.map('map', {
  minZoom: 2
}).setView([34.02,-118.805], 13);

L.esri.Vector.vectorBasemapLayer(basemapEnum, {
  apiKey: apiKey
}).addTo(map);

To learn more, see the Display a map and Change the basemap layer tutorials.

Display a custom basemap style

To access a custom basemap layer style, you first need to create the custom style, and then you use a url to access the service with the item ID for the custom style.

Steps

Create a custom style with the vector tile style editor and get the item ID.
Define an basemap style enumeration.
Define the URL with the enumeration and API key.
Access the basemap layer.

const apiKey = "YOUR-API-KEY";

const map = L.map('map', {
  minZoom: 2
}).setView([34.02,-118.805], 8);

L.esri.Vector.vectorBasemapLayer("6976148c11bd497d8624206f9ee03e30", {
  apiKey: apiKey
}).addTo(map);

To learn more, see the Create a custom basemap style and Display a custom vector tile style tutorials.

Hosted data layers

Hosted data layers provide a way to manage and access your own data as data services. You can host data as feature layers, vector tile layers, or image tile layers. Once published, you can use Esri Leaflet to access the layers and display them in a map.

For more background information, visit Data hosting in the Mapping APIs and location services guide.

Publish and display a feature layer

If you have feature data with a geometry and attributes, you can import and publish it as feature layer in a feature service. To access the data, use a URL to query the feature layer and return the features as GeoJSON. To display the features, you have to style the features on the client. It is important to note however that feature layers can also contain styling information, and this information could be used to help style the layer.

Steps

Import your data from a CSV, XLS, GeoJSON, or Shapefile file to create a hosted feature layer.
Get the URL for the feature layer.
Define a data source to access and query the feature layer.
Display the data in a layer.

var trailheads = L.esri.featureLayer({
  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0"
}).addTo(map);

To learn more, go to the Import data as a feature layer and access and Add a feature layer tutorials.

Publish and display a vector tile layer

If you want to access and display your data as vector tile data, you can publish a vector tile layer from a feature layer, and then display it in a map.

Steps

Import your data from a CSV, XLS, GeoJSON, or Shapefile file to create a hosted feature layer.
Style the feature layer using ArcGIS Online.
Create a vector tile service by publishing the feature layer as a vector tile layer.
Get the URL.
Access and display the vector tile layer in your application.

L.esri.Vector.vectorTileLayer(
  "https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer"
).addTo(map);

To learn more, go to the Publish a vector tile layer and access and Add a vector tile layer tutorials.

Location services

The easiest way to access ArcGIS location services with Esri Leaflet is with ArcGIS REST JS. This is a JavaScript library that you can use to authenticate, access, and make requests to services. However, Esri Leaflet does provide a geocoder module that can be loaded via CDN.

You can learn more about the ArcGIS REST JS library in the API reference or in the tutorials in the ArcGIS REST JS guide.

Access the geocoding service

To access the geocoding service, you need to reference the import the Esri Leaflet geocoder module.

Steps

Reference the Esri Leaflet geocoder module.
Define the parameters.
Call the service.

  const searchControl = L.esri.Geocoding.geosearch({
    position: "topright",
    placeholder: "Enter an address or place e.g. 1 York St",
    useMapBounds: false,
    providers: [L.esri.Geocoding.arcgisOnlineProvider({
      apikey: apiKey,
      nearby: {
        lat: -33.8688,
        lng: 151.2093
      },
    })]
  }).addTo(map);

Learn more in the Search for an address tutorial.

Access the routing service

To access the routing service, you need to reference the ArcGIS REST JS libraries and then call the service with the desired parameters.

Steps

Reference the ArcGIS REST JS libraries.
Define the parameters.
Call the service.

arcgisRest
  .solveRoute({
    stops: [startCoords, endCoords],
    endpoint: "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World/solve",
    authentication
  })
  .then((response) => {
    // Show the result route on the map.
    routeLines.clearLayers();
    L.geoJSON(response.routes.geoJson).addTo(routeLines);

    // Show the result text directions on the map.
    const directionsHTML = response.directions[0].features.map((f) => f.attributes.text).join("<br/>");
    directions.innerHTML = directionsHTML;
    startCoords = null;
    endCoords = null;
  })
  .catch((error) => {
    console.error(error);
    alert("There was a problem using the route service. See the console for details.");
  });
}

Learn more in the Find a route and directions tutorial.

Access the GeoEnrichment service

To access the GeoEnrichment service, you need to reference the ArcGIS REST JS libraries and then call the service with the desired parameters.

Steps

Reference the ArcGIS REST JS libraries.
Define the parameters.
Call the service.

  arcgisRest.queryDemographicData({
    studyAreas: [{ "geometry": { "x": latlng.lng, "y": latlng.lat } }],
    authentication: authentication
  })
  .then((response) => {
    const data = document.getElementById("data");
  });

Learn more in the Query demographic data tutorial.

Resources

Here are some useful resources to help create applications with Esri Leaflet and ArcGIS location services:

PreviousIntroduction NextTutorials

DocumentationEsri Leaflet Guide

Key concepts

Was this page helpful?

Was this page helpful?

Was this page helpful?