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>
Matt
19.4k4 gold badges25 silver badges64 bronze badges
-
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_FAILEDHub Lot– Hub Lot2020年04月11日 13:42:49 +00:00Commented Apr 11, 2020 at 13:42
-
3Most 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– Mike2020年04月11日 13:55:55 +00:00Commented Apr 11, 2020 at 13:55
-
You have to use a web server like IIS, Apache, nginx...himyata– himyata2020年04月14日 11:03:40 +00:00Commented Apr 14, 2020 at 11:03
1 Answer 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
nmtoken
13.6k5 gold badges39 silver badges91 bronze badges
answered Apr 14, 2020 at 16:43
lang-js