0

I have downloaded OpenLayers v6.3.1 libraries and successfully displayed a simple map on my local server, and now I'm trying to load a GeoJSON file as a new vector layer into this map.

But for some reason it's not loading.

Here is what it shows in Chrome : enter image description here

And here is the code.

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="css_cyclo_temp.css">
    <link rel="stylesheet" href="libraries/ol.css">
    <title>TestMap</title>
  </head>
  <body>

    <script type="text/javascript" src="libraries/ol.js"></script>

    <div id="map" class="map"></div>
    <script type="text/javascript">
      

            var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          new ol.layer.VectorImage ({
            visible: true,
            source: new ol.source.Vector ({
              //projection : 'EPSG:3857',
              url: "kml/test.geojson",
              format: new ol.format.GeoJSON()
            }),

          })
            
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([4.8374852,45.7568633]),
          zoom: 12
        })
      });

    </script>
  </body>
</html>
3
  • This is the error : Access to XMLHttpRequest at 'file:///C:/wamp64/www/cyclo_temp/v2/kml/test.geojson' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. kml/test.geojson:1 Failed to load resource: net::ERR_FAILED
    – Hub Lot
    Apr 11, 2020 at 13:42
  • 3
    Most browsers do not allow xhr requests to the C: drive. To test locally you must either run from localhost or use a browser such as Edge which does allow file protocol xhr.
    – Mike
    Apr 11, 2020 at 13:55
  • You have to use a web server like IIS, Apache, nginx...
    – himyata
    Apr 14, 2020 at 11:03

1 Answer 1

1

Your code is correct, I see you also have WAMP installed, you are just trying to access your webpage the wrong way.

Try http://localhost/cyclo_temp/v2/TestMap.html instead of file:///C:/wamp64/www/cyclo_temp/v2/TestMap.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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