Tiled ArcGIS MapServer

arcgis tile tilelayer

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.

index.html<!DOCTYPE html>
<html lang="en">
    <title>Tiled ArcGIS MapServer</title>
    <!-- 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=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
      .map {
        width: 100%;
    <div id="map" class="map"></div>
    <script src="index.js"></script>
index.jsimport 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import {OSM, TileArcGISRest} from 'ol/source';

var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +

var layers = [
  new TileLayer({
    source: new OSM()
  new TileLayer({
    extent: [-13884991, 2870341, -7455066, 6338219],
    source: new TileArcGISRest({
      url: url
var map = new Map({
  layers: layers,
  target: 'map',
  view: new View({
    center: [-10997148, 4569099],
    zoom: 4
  "name": "arcgis-tiled",
  "dependencies": {
    "ol": "6.3.1"
  "devDependencies": {
    "parcel": "1.11.0"
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --experimental-scope-hoisting --public-url . index.html"