2

I'm working with openlayers3 and I wanted to load a GeoJSON file from my local ../assets/data/countries.geojson. Nothing is wrong but it didn't appear on the screen.

This is my code:

<!doctype html>
<html>
  <head>
    <title>Vector Examples</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.13.0/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.13.0/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="../assets/ol3/js/ol.js"></script>
    <script>




var originalSource=new ol.layer.Vector({
   source: new ol.source.Vector({
   projection : 'EPSG:3857',
      url: '../assets/data/countries.geojson',
      format: new ol.format.GeoJSON({

         defaultDataProjection :'EPSG:4326', 
         projection: 'EPSG:3857'

      })
   })
});

      var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857');

      var view = new ol.View({
        center: center,
        zoom: 2
      });

      var map = new ol.Map({
        target: 'map',
        layers: [originalSource],
        view: view
      });
    </script>
  </body>
</html>
Improve this question
8
  • Why do you introduce projections here? Default behaviour should work. You can copy code from openlayers.org/en/v3.13.0/examples/vector-layer.html and change URL to your geojson file to see if it solves your issue.
    – ThomasG77
    Jan 24, 2016 at 15:53
  • You also have have a reference to OpenLayers 3 library twice e.g <script src="http://openlayers.org/en/v3.13.0/build/ol.js"></script> and <script src="../assets/ol3/js/ol.js"></script>
    – ThomasG77
    Jan 24, 2016 at 15:56
  • i already tried the example that openlayers offer when i used with chrome it gives the cross origin error and with mozilla no mistakes but still the vector won't load
    – othman
    Jan 24, 2016 at 16:03
  • To not care about cross origin error > wiki.sln.suny.edu/display/SLNKB/…
    – ThomasG77
    Jan 24, 2016 at 16:08
  • still the same problem i think the problem is in the extent when i used vectorLayer.getSource().getExtent(); it gives me [Infinity, Infinity, -Infinity, -Infinity]
    – othman
    Jan 24, 2016 at 16:12

1 Answer 1

Reset to default
1

One of the things that I did not know about when I started to use JavaScript map libraries like OpenLayers was when a file is loaded from a file system verses a web server. In my early days with OpenLayers, I would try try the OL examples and wonder why they worked on the OpenLayers site but did not work off off c:\user or /user/myid/olfiles. The rude thing that I did not understand was why say, a txt file, would work being served off a local file system but not, say, a GeoJSON example. Then I realized that you needed a webserver for some layers file types and not others. You need to have an apache webserver for the geojson/kml examples or something like http://brackets.io/ editor that allows you to run your example OpenLayers.js file from a local file system. The long story short: You cannot open a GeoJSON file with a file:// type url. You'd also have the same problems with LEAF.js.

Improve this answer

Your Answer

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

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