Correction for cluster example in my "Beginner's Guide OpenLayers 3" due to change in OpenLayers library itself by ThomasG77

Due to request on Twitter https://twitter.com/Stephanux40/status/833289922777903104

There were two issues:

change due to ol.source.GeoJSON removal in 3.5.0 https://github.com/openlayers/openlayers/releases/tag/v3.5.0 See section “New Vector API” for the exact documentation for upgrading.
because the data from cluster.geojson is using projection 3857 instead of the default EPSG 4326, we needed to add in the new ol.format.GeoJSON the following:

  ..
  format: new ol.format.GeoJSON({
    defaultDataProjection: 'EPSG:3857'
  })
  ..

index.html

<!doctype html>
<html>
  <head>
    <title>Vector Examples</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
    <link rel="stylesheet" href="samples.css" type="text/css" />
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
    <script>
      // set up a vector source to read the geojson data
      var originalSource = new ol.source.Vector({
        url: 'cluster.geojson',
        format: new ol.format.GeoJSON({
          defaultDataProjection: 'EPSG:3857'
        })
      });

      // create a layer from it so we can visualize the original data
      var originalLayer = new ol.layer.Vector({
        source: originalSource
      });

      // a clustered source is configured with another vector source that it
      // operates on
      var clusterSource = new ol.source.Cluster({
        source: originalSource
      });

      // it needs a layer too
      var clusterLayer = new ol.layer.Vector({
        source: clusterSource
      });

      // some data to use as the background
      var vectorSource = new ol.source.Vector({
        url: 'countries.geojson',
        format: new ol.format.GeoJSON()
      });

      var vectorLayer = new ol.layer.Vector({
        source: vectorSource
      });

      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: [vectorLayer, clusterLayer],
        view: view
      });
    </script>
  </body>
</html>

samples.css

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.map {
  height: 500px;
  width: 100%;
  background-color: #b5d0d0;
}

.half-map {
  float: left;
  height: 500px;
  width: 50%;
  background-color: #b5d0d0;
}

.full-map {
  width: 100%;
  height: 100%;
  background-color: #b5d0d0;
}

.marker {
  width: 24px;
  height: 24px;
  font-size: 24px;
}

#popup {
  background: red;
}

#myposition > .ol-mouse-position {
  position: relative;
  margin-left:20px;
  font-size: 30px;
}

.export-geojson {
  position: absolute;
  top: 65px;
  left: 8px;
  background: rgba(255,255,255,0.4);
  border-radius: 4px;
  padding: 2px;
}

.ol-touch .export-geojson {
  top: 80px;
}

.export-geojson a {
  display: block;
  color: white;
  font-size: 16px;
  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
  font-weight: bold;
  margin: 1px;
  text-decoration: none;
  text-align: center;
  border-radius: 2px;
  height: 22px;
  width: 22px;
  background: rgba(0,60,136,0.5);
}

.ol-touch .export-geojson a {
  font-size: 20px;
  height: 30px;
  width: 30px;
  line-height: 26px;
}

.export-geojson a:hover {
  background: rgba(0,60,136,0.7);
}

.list-group-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popover {
  z-index: auto;
  width: 240px;
}

.popover-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popover-content {
  height: 260px;
  overflow-y: auto;
}

.popover-content img {
  max-width: 208px;
}