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>
Improve this question
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
    Commented 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
    Commented Apr 11, 2020 at 13:55
  • You have to use a web server like IIS, Apache, nginx...
    – himyata
    Commented Apr 14, 2020 at 11:03

1 Answer 1

Reset to default
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

Improve this answer

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.