Clustering markers and Heatmap

Example with two button which create 1000 markers every click, and other button when is clicked fit map bounds. There are buttons for enable clustering or enable heat map

main.js

var map;
var allMarkers = [];

function initMap() {
  var drawmarkers = document.querySelector('#drawmarkers');
  var enableclustering = document.querySelector('#enableclustering');
  var disableclustering = document.querySelector('#disableclustering');
  var removemarkers = document.querySelector('#removemarkers');
  var enableheatmap = document.querySelector('#enableheatmap');
  var disableheatmap = document.querySelector('#disableheatmap');
  drawmarkers.addEventListener('click', function () {
    var arrayMarkers = [];

    for (var i = 0; i < 1000; i += 1) {
      var marker = new cercaliagl.Marker({
        position: new cercaliagl.LonLat(-3.71 + Math.random() * 0.075, 40.45 - Math.random() * 0.05),
        popup: new cercaliagl.Popup({
          title: 'Title',
          content: '<b>Content</b>'
        })
      });
      arrayMarkers.push(marker);
    }

    map.addMarkers(arrayMarkers);
    map.centerToMarkers(arrayMarkers);
    allMarkers = allMarkers.concat(arrayMarkers);
  });
  enableclustering.addEventListener('click', function () {
    map.enableClustering();
  });
  disableclustering.addEventListener('click', function () {
    map.disableClustering();
  });
  removemarkers.addEventListener('click', function () {
    map.removeMarkers(allMarkers);
    allMarkers = [];
  });
  enableheatmap.addEventListener('click', function () {
    map.enableHeatmap();
  });
  disableheatmap.addEventListener('click', function () {
    map.disableHeatmap();
  });
}

map = new cercaliagl.Map({
  target: 'map',
  center: new cercaliagl.LonLat(-3.71, 40.45)
});
map.whenReady(initMap);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Clustering markers and Heatmap</title>
    <style>
      .map {
        width: 100%;
        height: 640px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <button class="btn demo-button" id="drawmarkers">Draw markers</button>
    <button class="btn demo-button" id="enableclustering">Enable clustering</button>
    <button class="btn demo-button" id="disableclustering">Disable clustering</button>
    <button class="btn demo-button" id="removemarkers">Remove markers</button>
    <button class="btn demo-button" id="enableheatmap">Enable heat map</button>
    <button class="btn demo-button" id="disableheatmap">Disable heat map</button>

    
    <link rel="stylesheet" type="text/css" href="//maps.cercalia.com/gl/v1.0/cercaliagl.css">
    <script src="//maps.cercalia.com/gl/v1.0/cercaliagl.js?key=YOUR_API_KEY"></script>
    <script src="main.js"></script>
  </body>
</html>