1

I'm experiencing some issues with displaying OSM and GeoJSON.

With Firefox v30 I see my GeoJSON data, but OSM is invisible. With Chrome v35 I see OSM, not my GeoJSON...

What is the explanation? (except creating "Chrofox"..)

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        new ol.layer.Vector({
            title: 'operation',
            source: new ol.source.GeoJSON({
                //projection: 'EPSG:3857',
                url: 'emprise.geojson'}),
            style: new ol.style.Style({
                image: new ol.style.Circle({
                    radius:2,
                    fill: new ol.style.Fill({color: 'red'})
                })
            })
        })
    ],
    view: new ol.View({ <!--2D marche plus...2014 06 29 -->
        center:ol.proj.transform([1.22, 47.435], 'EPSG:4326', 'EPSG:3857'),
        zoom:9
    })
});

2 Answers 2

3

While the answer that you have posted works, it doesn't really get to the root of the issue.

The error indicates that you are trying to load the JSON from a a location that is not on the same domain. In the OP's case, the application is not being hosted from a webserver, and is trying to load the JSON from the file system.

The real solution for this is to use a Webserver to host the files & use the HTTP protocol to access the JSON files, instead of accessing your HTML, JS & JSON files from your file system.

0

I found it. It was a security property of Chrome:

XMLHttpRequest cannot load file:///C:/Users/.../emprise.json. Cross origin requests are only supported for HTTP.

I have to launch Chrome using a command prompt:

C:\Program Files (x86)\Google\Chrome\Application>chrome.exe --disable-web-securtiy

See for instance Stack Overflow question Error message 'XMLHttpRequest cannot load. Cross origin requests are only supported for HTTP in AngularJS'.

3
  • 3
    The real solution for this is to use a Webserver to host the files & use the HTTP protocol to access the html files, instead of accessing your HTML & JS files from your file system. Jul 3, 2014 at 1:49
  • @DevdattaTengshe Could you post your comment as an answer so we have something that can be upvoted :)
    – underdark
    Jan 2, 2015 at 17:36
  • @underdark: done Jan 5, 2015 at 3:27

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.