0

I'm currently following a MOOC for SIG bases. For some exercise we have to create a web page with an openlayers 3 map, and import a vector layer (a geojson file) that we host in the same directory as the html file. They provided a htlm file, a javascript file and the vector layers in a way that it is already supposed to work without any modifications. ( All they want us to do for the exercise is changing some parameters and add new functions. )

So far, I could open the web page in firefox, and display the map from Openlayers 3 by updating the openlayer link in the html file. However I'm struggling to display the geojson vector layers on it. I think it migth come from a CORS issue because I have a message telling me that the CORS request is not using http, which is true as long as I try to import a local file to my web-page. So I tried some add-ons to bypass the CORS rules but it's still not working at all... I've trying any things, many ideas I found in internet but nothing is working so far and I'm not familiar at all with html and javascript langage. I've already checked that the SCR of the vector layer is EPSG:4326, and the file format is .geojson. The file 'district.geojson' is in the same folder as the .html and the .js files. If someone could help me it would be really nice. Maybe the way to type htlm script for openlayers3 changed (the file is from 2016) ?

Here is the html file :

<!doctype html>
<head>  
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js" type="text/javascript"></script> <!-- Change version here -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">  <!-- Change version here -->

    <style>
        html,body{
            height:100%;
            width:100%;
        }
        #map {
            height:100%;
            background-color: lightgrey;
        }
    </style>
    <!-- Insert style for popup here -->
    <title>Openlayer Seychelles</title> <!-- Change title here -->
</head>
<body>
    <div id ="map"></div>
     <!-- Insert popup div code here -->
    <script type="text/javascript" src="Openlayers_Senegal.js"></script> <!-- Adapt path here -->
</body>

And here is the javascript file :

var map;

//Définition de quelques styles pour les couches vecteur
// *** Change the whole District_Style here ***
var District_Style = new ol.style.Style({ 
      fill: new ol.style.Fill({ color: 'rgba(200, 10, 10, 0.2)'}),
      stroke: new ol.style.Stroke({ color: 'rgba(255,0,0,1)', width: 1 })
  });


map = new ol.Map({
  target: 'map',
  view: new ol.View({ 
    center: ol.proj.fromLonLat([-13.3, 13.7]), //*** Change center and zoom here ***
    zoom: 8
  })
});

// create and add the tile layer
var osmlayer = new ol.layer.Tile({
source: new ol.source.OSM()
})
map.addLayer(osmlayer);

//Ajout de fichiers geojson
var vector = new ol.layer.Vector({
style: District_Style,
source: new ol.source.Vector({
  url: './districts.geojson', //***Change path here ***
  format: new ol.format.GeoJSON(),
})
});
map.addLayer(vector);
sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Thomas
  • 1
  • If you are using IIS localhost it may be .geojson is not set as a MIME type. Try renaming to .json – Mike Feb 09 '21 at 14:49
  • If you’re loading the HTML file shown in the question from a web server, then when th `Openlayers_Senegal.js` JavaScript file is loaded and run, the `./districts.geojson` will be loaded as a relative path over http/https from same the web server. But if instead you are opening the HTML file directly into a browser from your local filesystem, then the browser will refuse to load the `./districts.geojson` file from your local filesystem. So the solution is to make sure use a web server to load it. – sideshowbarker Feb 09 '21 at 15:21
  • Thank you very much for your help. I've tried to remain to .json but it still doesn't work unfotunately. As for loading by using a web server I understand why it could be the solution regarding at the CORS issue. However I'm not sure to understand what it really means, and know how to do it. Maybe by using Node.js or something like that ? – Thomas Feb 09 '21 at 16:16
  • Yes, by using Node.js or something. Probably the easiest way is to use a simple Python web server; see https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server#running_a_simple_local_http_server and https://stackoverflow.com/a/27986564/441757 – sideshowbarker Feb 09 '21 at 17:16

0 Answers0