OpenLayers and ArcGIS location services

OpenLayers is a JavaScript library for making interactive maps. This guide contains tutorials to help you start working with OpenLayers and ArcGIS location services to develop a number of different types of mapping applications.

Maps

Learn how to create and display maps with basemap layers.

Layers

Learn how to add different types of data layers to maps.

Query and edit

Learn how to work with feature layers and feature services.

Style and data visualization

Learn how to style data layers and basemap layers for maps.

Geocode and search

Learn how to find addresses, businesses, and places with the geocoding service.

Route and directions

Learn how to find a route and directions and service areas with the routing service.

Demographic data

Learn how to get demographic data with the GeoEnrichment service.

Get started

To access the services, you need a free ArcGIS developer account and an API key from your dashboard .

Create a free account

2. Get an API key

3. Quick start

Below is a simple example that shows how to create a map with OpenLayers and the basemap layer service.

To build this map:

Open the code in .

Replace the apiKey with your API key from the dashboard.

Change line
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>OpenLayers Tutorials: Display a map</title>

    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js"></script>

  </head>
  <body>
    <div id="map"></div>

    <script>

      const map = new ol.Map({ target: "map" });

      map.setView(
        new ol.View({
          center: ol.proj.fromLonLat([-25, 25]), // Starting location [longitude, latitude]
          zoom: 2
        })
      );

      const apiKey = "YOUR-API-KEY";

      const basemapId = "ArcGIS:Navigation";

      const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&apiKey=" + apiKey;

      olms(map, basemapURL);

    </script>

  </body>
</html>

4. Tutorials

Follow step-by-step tutorials to learn more about how to integrate OpenLayers with other location services.

Display a map

Create and display a map with the basemap layer service.

Search for an address

Find an address or place using a search box and the Geocoding service.

Find a route and directions

Find a route and directions with the route service.

See all tutorials

NextKey concepts

DocumentationOpenLayers Guide

OpenLayers and ArcGIS location services

Was this page helpful?

Was this page helpful?

Was this page helpful?

DocumentationOpenLayers Guide

OpenLayers and ArcGIS location services

Maps

Layers

Query and edit

Style and data visualization

Geocode and search

Route and directions

Demographic data

Get started

1. Sign up for a free developer account

2. Get an API key

3. Quick start

4. Tutorials

Display a map

Search for an address

Find a route and directions

Was this page helpful?

Was this page helpful?

Was this page helpful?