OpenLayers is a JavaScript library for making interactive maps. To interact with ArcGIS location services, you can access vector and tile basemap layers 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
OpenLayers does not have a concept of a vector "basemap style" that includes multiple layers stacked in a specific order with styles applied to each layer. The library assumes that you will build your maps out of multiple layers programmatically.
To use Mapbox style files, you use a third-party plugin called ol-mapbox-style (olms). OpenLayers is designed to load raster tiles effectively, however ArcGIS Online and other web map services like Mapbox have mostly migrated away from raster tiles towards more modern vector tile basemaps.
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.
- Define a basemap style enumeration.
- Define the URL.
- Access the basemap layer.
const map = new ol.Map({ target: "map" });
map.setView(
new ol.View({
center: ol.proj.fromLonLat([-118.805, 34.027]), //Longitude, latitude
zoom: 12
})
);
const apiKey = "YOUR_API_KEY";
const basemapId = "arcgis/streets";
const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?token=${apiKey}`;Learn more about the bsemap layer styles available in Change the basemap layer and Display a custom vector tile style.
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.
- 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 map = new ol.Map({ target: "map" });
map.setView(
new ol.View({
center: ol.proj.fromLonLat([-118.805, 34.027]),
zoom: 8
})
);
const apiKey = "YOUR_API_KEY";
const basemapId = "6976148c11bd497d8624206f9ee03e30"; // Custom vector tile style
const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;
olms.apply(map, basemapURL);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.
OpenLayers is only a front-end map rendering library. Unlike full service web mapping platforms and applications like ArcGIS Online, OpenLayers does not itself provide any data hosting services. The library is always used to source maps and data from other services, or from tiles and GeoJSON files hosted by the map developer.
In comparison, Esri basemaps and webmaps may contain a composition of many different services. For example, the Esri Imagery with Labels basemap contains the Esri World Imagery raster layer and two feature layers containing administrative boundaries and road networks. In OpenLayers, you would need to specify each individual layer to create a comparable map.
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.
- 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.
const pointLayerName = "Trailheads";
const pointLayerURL =
"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
pointLayerName +
"/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=geojson";
const pointSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: pointLayerURL
});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. The url endpoints end in /{z}/{y}/{x}.pbf.
- 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.
olms.apply(map, basemapURL).then((map) => {
const parcelsSource = new ol.source.VectorTile({
format: new ol.format.MVT(),
url: `https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/tile/{z}/{y}/{x}.pbf`
});
});To learn more, go to the Publish a vector tile layer and Add a vector tile layer tutorials.
More location services
The easiest way to access ArcGIS location services with OpenLayers is with ArcGIS REST JS. This is a JavaScript library that you can use to authenticate, access, and make requests to services. 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.
- Reference the ArcGIS REST JS libraries.
- Define the parameters.
- Call the service.
const query = document.getElementById("geocode-input").value;
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
const center = ol.proj.transform(map.getView().getCenter(), "EPSG:3857", "EPSG:4326");
arcgisRest
.geocode({
singleLine: query,
authentication,
params: {
outFields: '*',
location: center.join(","),
outSR: 3857 // Request coordinates in Web Mercator to simplify displaying
}
})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.
- Reference the ArcGIS REST JS libraries.
- Define the parameters.
- Call the service.
arcgisRest
.solveRoute({
stops: [startCoords, endCoords],
authentication
})
.then((response) => {
routeLayer.setSource(
new ol.source.Vector({
features: geojson.readFeatures(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.
- Reference the ArcGIS REST JS libraries.
- Define the parameters.
- Call the service.
arcgisRest.queryDemographicData({
studyAreas: [{ "geometry": { "x": lonLat[0], "y": lonLat[1] } }],
authentication: authentication
})
.then((response) => {
const data = document.getElementById("data");
const featureSet = response.results[0].value.FeatureSet;
});Learn more in the Query demographic data tutorial.
Resources
Here are some helpful links for working with OpenLayers: