OpenLayers Troubleshooting – ArcGIS REST Fails in OpenLayers TileArcGISRest but Works on Desktop

arcgis-rest-apiopenlayers

I'm trying to load ArcGIS REST map into OpenLayers and having trouble.

The demo from https://openlayers.org/en/latest/examples/arcgis-tiled.html works great and I've modified it to try other URLs and basic stuf from arcgisonline works fine for that. I've included my modified main.js and index.html below.

The issue is changing to this URL:
https://services.wvgis.wvu.edu/arcgis/rest/services/Imagery_BaseMaps_EarthCover/wv_imagery_WVGISTC_leaf_off_mosaic/MapServer

The service seems to up and down a lot, but even when working, I get a black/white checkerboard instead of details when zooming into a city block. It does load using the "ArcGIS Online Map Viewer" and on my desktop QGIS, but I can't get it into OpenLayers.

Is this ArcGIS REST different, and how do I handle it?

main.js

import Map from 'ol/Map.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import {OSM, TileArcGISRest} from 'ol/source.js';

var url = '';
//url = 'https://sampleserver6.arcgisonline.com/ArcGIS/rest/services/USA/MapServer';
//url = 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer'
url = 'https://services.wvgis.wvu.edu/arcgis/rest/services/Imagery_BaseMaps_EarthCover/wv_imagery_WVGISTC_leaf_off_mosaic/MapServer';

const layers = [
  new TileLayer({
    source: new OSM(),
  }),
  new TileLayer(
{    extent: [-13884991, 2870341, -7455066, 6338219],
    source: new TileArcGISRest({
      url: url,
    }),
  }),
];
const map = new Map({
  layers: layers,
  target: 'map',
  view: new View({
    center: [-9041148, 4489099],
    zoom: 10,
  }),
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Tiled ArcGIS MapServer</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/elm-pep.js"></script>
    <script type="module" src="main.js"></script>
  </body>
</html>

Best Answer

If you look at the docs of TileArcGISRest tile source you'll see this description:

Layer source for tile data from ArcGIS Rest services. Map and Image Services are supported.

For cached ArcGIS services, better performance is available using the XYZ data source.

Looks like there is performance problem with this service, since tiles are generated on the fly when using TileArcGISRest tile source. Here is an example of such a tile request:

https://services.wvgis.wvu.edu/arcgis/rest/services/Imagery_BaseMaps_EarthCover/wv_imagery_WVGISTC_leaf_off_mosaic/MapServer/export?F=image&FORMAT=PNG32&TRANSPARENT=true&SIZE=293%2C293&BBOX=-9001224.450862356%2C4578883.742395198%2C-8962088.692380344%2C4618019.500877208&BBOXSR=3857&IMAGESR=3857&DPI=103

Alternative is to use cached tile source. You can find all the necessary info for constructing XYZ tile source with the right tile grid at https://services.wvgis.wvu.edu/arcgis/rest/services/Imagery_BaseMaps_EarthCover/wv_imagery_WVGISTC_leaf_off_mosaic/MapServery.

Code for this tile layer could then look something like this (tested):

new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'https://services.wvgis.wvu.edu/arcgis/rest/services/Imagery_BaseMaps_EarthCover/wv_imagery_WVGISTC_leaf_off_mosaic/MapServer/tile/{z}/{y}/{x}?blankTile=false',
    tileGrid: new ol.tilegrid.TileGrid({
      origin: [-9325754.0, 4989694.0],
      extent: [-9294707.135673312, 4498859.250759878, -8556631.190551685, 4922014.639346593],
      tileSize: 256,
      resolutions: [611.4962262813797, 305.74811314055756, 152.87405657041106, 76.43702828507324, 38.21851414253662, 19.10925707126831, 9.554628535634155, 4.77731426794937, 2.388657133974685, 1.1943285668550503, 0.5971642835598172, 0.29858214164761665, 0.14929107082380833, 0.07464553541190416, ]   
    })
  })
})

Here is the result:

And here is an example of high zoom:

Related Solutions

[GIS] Create layer from ArcGIS REST URL in ArcObjects using C#

In Arc 10.2 you can use IMapServerRESTLayer. Using this avoids using SOAP. Here is some code (VB.Net) that shows how it is used, with some extra code. This code is for a AddIn button. The extra code checks if the connection is OK by requesting a json file. Also, there is code for displaying the json file, and getting the REST file general information. I have not figured out a way of getting the other layer properties such as those under the source tab i.e. Data Type.

The url is typical. You need to find the url by going to the web service and looking it up.

There are other ways of NOT using SOAP. This article by Anthony Baker talks about using json files to consume REST services. Also the background information in http://rest.elkstein.org/2008/02/what-is-rest.html is very good.

Here is the code (tested under Arc10.2) Protected Overrides Sub OnClick() Const csProceedureName As String = "cmdListBaseMap_OnClick" MsgBox("In text version")

    Try
        Dim pApp As IApplication
        Dim pMxDoc As IMxDocument
        Dim pMap As IMap
        Dim pView As IActiveView
        Dim resturl As String

        resturl = "http://services.thelist.tas.gov.au/arcgis/rest/services/Basemaps/Topographic/ImageServer/?f=lyr"        ' v2 ' works

        ' there was a problem getting the interface to work. 
        ' In addition to carto needed to include ESRI.ArcGIS.DataSourceRaster
        Dim RESTLayer As IMapServerRESTLayer
        RESTLayer = New MapServerRESTLayer

        Dim pLayer As ILayer


        pApp = My.ArcMap.Application
        pMxDoc = pApp.Document
        pMap = pMxDoc.FocusMap
        pView = pMxDoc.ActiveView


        ' this is done to test the connection
        ' Use web HttpWebRequest to see if connection OK and so can retrieve file
        Dim request_json_url As String = "http://services.thelist.tas.gov.au/arcgis/rest/services/Basemaps/Topographic/ImageServer/?f=json"
        Dim request As HttpWebRequest = DirectCast(HttpWebRequest.Create(request_json_url), HttpWebRequest)
        Dim response As HttpWebResponse = DirectCast(request.GetResponse, HttpWebResponse)

        If response.StatusCode = HttpStatusCode.OK Then
            ' connection and response OK
            'MsgBox("Status Code " & response.StatusCode & vbNewLine & " Status description " & response.StatusDescription & vbNewLine & " Encoding " & response.CharacterSet)


            '' this is one method of getting the json file
            ''Dim encoding As Text.Encoding = System.Text.Encoding.GetEncoding(response.CharacterSet)
            ''Dim reader As New StreamReader(response.GetResponseStream(), encoding)
            ''Dim streamtext As String = reader.ReadToEnd()
            ''MsgBox(streamtext)

            ' '' use a webclient to check connection, the try cast does exception handling
            ''Dim wc As WebClient = New WebClient
            ''Dim response_client As String
            ''    response_client = wc.DownloadString(request_json_url)
            ''    MsgBox(response_client)

            ' Get the Rest layer
            RESTLayer.Connect(resturl)
            RESTLayer.TransparentBackground(True)

            ' Cast to ILayer so it can be added to map
            ' this cast works
            pLayer = TryCast(RESTLayer, ILayer)
            If pLayer Is Nothing Then
                MsgBox("ERROR ( " & csProceedureName & ")  Cast from MapServerRESTLayer to Ilayer failed")
            Else
                'MsgBox("Cast from MapServerRESTLayer to Ilayer OK")
            End If


            ' add layer to map
            pMap.AddLayer(pLayer)
            pView.Refresh()

            '' This works
            '' Returns the Description 
            '' Dim pGenProperties As ILayerGeneralProperties
            ''pGenProperties = TryCast(pLayer, ILayerGeneralProperties)
            ''If pGenProperties Is Nothing Then
            ''    MsgBox("No general properties")
            ''Else
            ''    MsgBox("Properties -" & pGenProperties.LayerDescription & "-")
            ''End If

        Else
            MsgBox("ERROR ( " & csProceedureName & " ) " & response.StatusCode & vbNewLine & response.StatusDescription)
        End If


    Catch ex As Exception
        MsgBox("Error " & ex.Message)
    End Try


End

ArcGIS Online – Extracting ArcGIS REST Server from Webmap URL

The first thing to do is get the application's configuration. Do this by searching the Network tab in the browser's Developer Tools.

If you filter on f5e for instance (which is part of the ID in your URL), you will find a request to the Web Mapping Application: https://tpwd.maps.arcgis.com/sharing/rest/content/items/f5e8debeaa994abe888d86a7112649ff/data?f=json

The response is a JSON file which has a map attribute that in turn has an ItemID of ef0d5fe1a5f841ffb432445b1913cb55:

Now, search the Network tab for that ID. You will find two items, you need this one: https://tpwd.maps.arcgis.com/sharing/rest/content/items/ef0d5fe1a5f841ffb432445b1913cb55/data?f=json

This is also a JSON file, of the Web Map this time, containing all used layers and basemaps.

Best Answer

Related Solutions

[GIS] Create layer from ArcGIS REST URL in ArcObjects using C#

ArcGIS Online – Extracting ArcGIS REST Server from Webmap URL

Related Question