OpenLayers3 functionalities not working

Question

I have no difficulties exploring interesting features among the OpenLayers3 Examples. However, when I copy the code below into a local .html file and open it in the same browser, certain functionalities (eg vector layers) stop working.

The Earthquakes heatmap , for instance, comes only with the black base layer and the heat (vector) layer is not displayed at all. All CSS and js are accessed properly via CDNs. I've tested many examples on 3 different computers in total.

Can anybody say what may cause this problem and how to solve it? Thanks a lot.

Answer 1

The issue is likely to be that the urls for the data in the examples are relative paths, and you don't have the data required. In the Earthquakes heatmap example the data source for the heatmap is set in this chunk:

 var vector = new ol.layer.Heatmap({
  source: new ol.source.Vector({
    url: 'data/kml/2012_Earthquakes_Mag5.kml',
    format: new ol.format.KML({
      extractStyles: false
    })
  }),
  blur: parseInt(blur.value, 10),
  radius: parseInt(radius.value, 10)
});

Unless you are hosting 2012_Earthquakes_Mag5.kml locally with the same relative path the data will not be found. The url of the data is actually http://openlayers.org/en/v3.11.1/examples/data/kml/2012_Earthquakes_Mag5.kml , which you could download and serve locally to test out the examples.