2

I am putting together a basic proof of concept for a client using OpenLayers to compare against Esri Javascript.

I understand that the medium to a long-term solution is to enable access on the server I am trying to gain data from. At this stage I am just prototyping and so wanted to load in a layer using the code, I probably will be using a proxy longer term anyway.

My starter for ten code is as follows:

<!DOCTYPE html>
<html>
  <head>
    <title>Tiled ArcGIS MapServer</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/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://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="module">

      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.Vector({ 
            source: new ol.source.Vector({
                url: 'http://sites.google.com/site/geined13/tours/Volcanoes_of_the_World.kmz?attredirects=0&d=1/cors-anywhere.html',
                format: new ol.format.KML()
            })
        }),
        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>

Presumably, I can add something from within the Vector source class to either use a proxy, or ignore any CORS issues?

The site is hosted in IIS BTW.

The error is :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource here. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

I have to admit I'm finding it difficult to find what I need in the Openlayers docs, couldn't find any demos using a proxy.

I have also found lots of posts around enabling CORS on the target server, this is not what I want to do right now at a sandbox prototyping stage. I am yet to persuade the client to use openlayers over Esri javascript (We will be wanting to manly use KML files from a server which we will NOT want to make public facing which is an issue with the ESRI control as it bounces via ArcGIS.com for some completely hard to grasp reason), so just want a quick and dirty prototype.

1

First try adding crossOrigin: 'anonymous'. If that doesn't work the source isn't CORS enabled. I did try and it's not CORS enabled, but using a proxy does work. For example:

source: new ol.source.Vector({
    url: 'myproxy.php?url=' + encodeURIComponent(
         'http://sites.google.com/site/geined13/tours/Volcanoes_of_the_World.kmz?attredirects=0&d=1/cors-anywhere.html'
    ),
    crossOrigin: 'anonymous',
    format: new ol.format.KML()
})
  • Although OpenLayers appears to be unable to process a KMZ file directly, it would need to be unzipped. – Mike Aug 29 '18 at 15:57
  • You can unpack the data from KMZ. I have a demo e.g rawgit.com/webgeodatavore/ol3-extras-demos/master/kmz/… (I also solved CORS issue using cors-anywhere.herokuapp.com website for demo purpose) – ThomasG77 Aug 29 '18 at 16:53
  • Excellent, thanks very much guys! Helpful answers and relevant to the question asked, if only other forums worked as well! ;o) – KieronFlynn Aug 30 '18 at 15:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.