Tiled ArcGIS MapServer

This example uses OpenLayers v4.0.1. The latest is v.

#### Tiled ArcGIS MapServer

Example of a tiled ArcGIS layer.

This example shows how to use an ArcGIS REST MapService as tiles. This source type supports Map and Image Services. For cached ArcGIS services, better performance is available by using `ol.source.XYZ` instead.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.layer.Tile
,
- ol.source.OSM
,
- ol.source.TileArcGISRest

Copy Edit
Tiled ArcGIS MapServer Example of a tiled ArcGIS layer. var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' + 'Specialty/ESRI_StateCityHighway_USA/MapServer'; var layers = [ new ol.layer.Tile({ source: new ol.source.OSM() }), new ol.layer.Tile({ extent: [-13884991, 2870341, -7455066, 6338219], source: new ol.source.TileArcGISRest({ url: url }) }) ]; var map = new ol.Map({ layers: layers, target: 'map', view: new ol.View({ center: [-10997148, 4569099], zoom: 4 }) }); <div id="map" class="map"></div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Tiled ArcGIS MapServer</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <script>
          var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
              'Specialty/ESRI_StateCityHighway_USA/MapServer';

          var layers = [
            new ol.layer.Tile({
              source: new ol.source.OSM()
            }),
            new ol.layer.Tile({
              extent: [-13884991, 2870341, -7455066, 6338219],
              source: new ol.source.TileArcGISRest({
                url: url
              })
            })
          ];
          var map = new ol.Map({
            layers: layers,
            target: 'map',
            view: new ol.View({
              center: [-10997148, 4569099],
              zoom: 4
            })
          });
        </script>
      </body>
    </html>