workshop ol cluster

by Francesco Boccacci

HTML

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
<body>
  <div id="map" class="map"></div>
</body>

CSS

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

.map {
  height: 100%;
  width: 100%;
}

JavaScript

const map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      target: 'map',
      view: new ol.View({
        center: [1253220.67184, 5430658.10783],
        zoom: 10
      })
});

const layerGeoJSON = {
      "type": "FeatureCollection",
      "crs": {
        "type": "name",
        "properties": {
          "name": "urn:ogc:def:crs:EPSG::3857"
        }
      },
      "features": [{
        "type": "Feature",
        "properties": {
          "id": 0
        },
        "geometry": {
          "type": "Point",
          "coordinates": [1285633.0823047876, 5438366.8619631492]
        }
      }, {
        "type": "Feature",
        "properties": {
          "id": 1
        },
        "geometry": {
          "type": "Point",
          "coordinates": [1263081.2445396364, 5421782.7375592068]
        }
      }, {
        "type": "Feature",
        "properties": {
          "id": 2
        },
        "geometry": {
          "type": "Point",
          "coordinates": [1255507.7046010012, 5422374.3119415911]
        }
      }, {
        "type": "Feature",
        "properties": {
          "id": 3
        },
        "geometry": {
          "type": "Point",
          "coordinates": [1283102.6267211954, 5404827.6611737078]
        }
      }, {
        "type": "Feature",
        "properties": {
          "id": 4
        },
        "geometry": {
          "type": "Point",
          "coordinates": [1218705.9081681131, 5456712.4451680398]
        }
      }, {
        "type": "Feature",
        "properties": {
          "id": 5
        },
        "geometry": {
          "type": "Point",
          "coordinates": [1252466.0546455004, 5407962.9015037082]
        }
      }, {
        "type": "Feature",
        "properties": {
          "id": 6
        },
        "geometry": {
          "type": "Point",
          "coordinates": [1238353.6431157354, 5445772.6010855669]
        }
      }, {
        "type":...