Key concepts

MapLibre GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles. To interact with ArcGIS location services, you can access basemap layer styles directly to display maps, or you can use ArcGIS REST JS to access other services such as the geocoding service, routing service, and data services.

Basemap layers and styles

Basemap layers are vector tile layers with styles for streets, topography, and satllite imagery that you can use in a Mapbox GL JS map. The data format for basemap layers is based on the Mapbox vector tile specification. You can use the default styles provided by the basemap styles 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.

Use dark colors for code blocksCopy
const apiKey = "YOUR_API_KEY";
const basemapEnum = "ArcGIS:Navigation"; // Style enumeration
const map = new mapboxgl.Map({
  container: "map",
  style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
  zoom: 12,
  center: [-118.805, 34.027]
});

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.

Use dark colors for code blocksCopy
const apiKey = "YOUR_API_KEY";
const basemapEnum = "6976148c11bd497d8624206f9ee03e30";  // Item id for custom basemap layer style

const map = new mapboxgl.Map({
  container: "map",
  style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
  zoom: 12,
  center: [-118.805, 34.027]
});

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 map tile layers. Once published, you can use Mapbox GL JS 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.

Use dark colors for code blocksCopy
map.addSource("trailheads", {
  type: "geojson",
  data: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0/query?f=pgeojson&where=1=1",
});

map.addLayer({
  id: "trailheads-circle",
  type: "circle",
  source: "trailheads",
  paint: {
    "circle-color": "hsla(0,0%,0%,0.75)",
    "circle-stroke-width": 1.5,
    "circle-stroke-color": "white",
  }
});

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. Vector tile layers closely follow the Mapbox vector tile specification, but there a few important differences:

URL endpoints end in /{z}/{y}/{x}.pbf, rather than /{z}/{x}/{y}.pbf.
Each style may contain one source.
The raster and hillshade layer types are not supported.

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.

Use dark colors for code blocksCopy
map.addSource("parcels", {
  type: "vector",
  tiles: ["https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/tile/{z}/{y}/{x}.pbf"]
});

map.addLayer({
  id: "parcels-fill",
  type: "fill",
  source: "parcels",
  "source-layer": "Santa_Monica_Mountains_Parcels",
  paint: {
    "fill-color": "hsl(200, 80%, 50%)",
    "fill-opacity": 0.5,
    "fill-outline-color": "white"
  }
});

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

More location services

The easiest way to access ArcGIS location services with Mapbox GL JS is with ArcGIS REST JS. You can learn more about the 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 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.

Use dark colors for code blocksCopy
const authentication = arcgisRest.ApiKeyManager.fromKey("YOUR_API_KEY");

arcgisRest
  .geocode({
    singleLine: query,
    authentication,
    params: {
      location: map.getCenter().toArray().join(","), // center of map as longitude,latitude
      outFields: "*" // return all fields
    }
  })
  .then((response) => {
    const result = response.candidates[0];
    const lngLat = [result.location.x, result.location.y];
    new mapboxgl.Popup()
      .setLngLat(lngLat)
      .setHTML(result.attributes.LongLabel)
      .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.

Use dark colors for code blocksCopy
const authentication =arcgisRest.ApiKeyManager.fromKey("YOUR_API_KEY");

arcgisRest
  .solveRoute({
    stops: [startCoords, endCoords],
    endpoint: "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World/solve",
    authentication
  })
  .then((response) => {
    map.getSource("route").setData(response.routes.geoJson);
  })
}

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.

Use dark colors for code blocksCopy
const authentication =arcgisRest.ApiKeyManager.fromKey("YOUR_API_KEY");

const response = await arcgisRest.queryDemographicData({
  studyAreas: [
    {
      geometry: {
        x: e.lngLat.lng,
        y: e.lngLat.lat
      }
    }
  ],
  authentication: authentication
});

let message;
const featureSet = response.results[0].value.FeatureSet;
if (featureSet.length > 0 && featureSet[0].features.length > 0) {
  const attributes = featureSet[0].features[0].attributes;
  message =
    `<b>Data for a 1 mile search radius</b>` +
    [
      `Population: ${attributes.TOTPOP.toLocaleString()}`,
      `Males: ${attributes.TOTMALES.toLocaleString()}`,
      `Females: ${attributes.TOTFEMALES.toLocaleString()}`,
      `Average household size: ${attributes.AVGHHSZ}`
    ].join("<br>");
} else {
  message = "Data not available for this location.";
}

Learn more in the Query demographic data tutorial.

Developer tools

There are ArcGIS developer tools and services with similar capabilities to Mapbox tools and services. In many cases, you can mix and match services from the two platforms: for instance, displaying results from the geocoding service on a Mapbox GL JS map. Below are some of the tools and services that can be used in place of its Mapbox counterpart:

Mapping APIs and services
Vector Tile Style Editor: Style vector and basemap layers. Use this tool in place of Mapbox Studio.
Basemaps layers: in place of Mapbox maps.
Geocoding service: in place of Mapbox Search.
Routing service: in place of Mapbox Navigation.
Data hosting services: in place of Mapbox Data Services.

MapLibre GL JS

Key concepts

Basemap layers and styles

Display a basemap style

Steps

Display a custom basemap style

Steps

Hosted data layers

Publish and display a feature layer

Steps

Publish and display a vector tile layer

Steps

More location services

Access the geocoding service

Steps

Access the routing service

Steps

Access the GeoEnrichment service

Steps

Developer tools

Overview

Key features

Get started

Was this page helpful?