openlayers 3 GeJSON display issue

Question

I am following this tutorial and I can't display the GeoJSON file mentionned 7day-M2.5.json. I copied and pasted the same code ; there is no error message in debug tools.

var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        title: 'Global Imagery',
        source: new ol.source.TileWMS({
          url: 'http://demo.opengeo.org/geoserver/wms',
          params: {LAYERS: 'nasa:bluemarble', VERSION: '1.1.1'}
        })
      }),
      new ol.layer.Vector({
        title: 'Earthquakes',
        source: new ol.source.Vector({
            url: '/exercices/data/7day-M2.5.json',
            format: new ol.format.GeoJSON()
        }),
        style: new ol.style.Style({
            image: new ol.style.Circle({
            radius: 3,
            fill: new ol.style.Fill({color: 'white'})
            })
        })
    })
    ],

The problem seems to be the json file because of "this" : in ol.js window, "this" is the reference to the GeoJSON. I can't go further, no idea.

Answer 1

I don't know which exact source you have used in your example, therefore I went for the one in ol3-workshop project in GitHub. In your code above is a severe error in the 4th line, you commented out new ol.layer.Tile({, try to remove the comment here. I have also created a working example right here, if there is still another error appearing for you: http://codepen.io/westefan/pen/VjOaxN

HTML:

<h1>My Map</h1>
<div id="map"></div>

CSS:

#map {
    height: 256px;
    width: 512px;
}

JAVASCRIPT:

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
        title: 'Global Imagery',
        source: new ol.source.TileWMS({
          url: 'http://demo.opengeo.org/geoserver/wms',
          params: {LAYERS: 'nasa:bluemarble', VERSION: '1.1.1'}
        })
      }),
        new ol.layer.Vector({
            title: 'Earthquakes',
        source: new ol.source.Vector({
            url: 'https://raw.githubusercontent.com/boundlessgeo/ol3-workshop/master/src/data/layers/7day-M2.5.json',
            format: new ol.format.GeoJSON()
        }),
        style: new ol.style.Style({
            image: new ol.style.Circle({
            radius: 3,
            fill: new ol.style.Fill({color: 'white'})
            })
        })
        })
    ],
    view: new ol.View({
        projection: 'EPSG:4326',
        center: [0, 0],
        zoom: 0,
        maxResolution: 0.703125
    })
});

EDIT: Added source code to stackoverflow.

Answer 2

I found it. There were two parameters :

1- Path of the url was not good. I had to repeat the folder where my html was, in first place (i.e. before the rest of the path)

2- I work with Chrome and forgot to disable web-internet-security, parameter preventing GeoJson to be displayed...

Thanks for help anyway.