Stylize heatmap

main.js

var map;
var markersGroup1Layer;
var markersGroup2Layer;
var heatmapLayerStyleGroup1 = {
  maxzoom: 15,
  paint: {
    'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 0.1, 15, 1.5],
    'heatmap-color': ['interpolate', ['linear'], ['heatmap-density'], 0, 'rgba(0, 0, 255, 0)', 0.1, 'royalblue', 0.3, 'cyan', 0.5, 'lime', 0.7, 'yellow', 1, 'red'],
    'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 1, 15, 14],
    'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 0.8, 15, 0.3]
  }
};
var heatmapPointStyleGroup1 = {
  minzoom: 14,
  paint: {
    'circle-radius': ['interpolate', ['linear'], ['zoom'], 12, 3, 16, 6],
    'circle-color': 'red',
    'circle-stroke-color': 'blue',
    'circle-stroke-width': 1
  }
};
var heatmapLayerStyleGroup2 = {
  maxzoom: 15,
  paint: {
    'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 0.1, 15, 1.5],
    'heatmap-color': ['interpolate', ['linear'], ['heatmap-density'], 0, 'rgba(255, 0, 0, 0)', 0.1, 'pink', 0.3, 'magenta', 0.5, 'purple', 0.7, 'violet', 1, '#4a0648'],
    'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 1, 15, 14],
    'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 0.8, 15, 0.3]
  }
};
var heatmapPointStyleGroup2 = {
  minzoom: 14,
  paint: {
    'circle-radius': ['interpolate', ['linear'], ['zoom'], 12, 3, 16, 6],
    'circle-color': 'blue',
    'circle-stroke-color': 'blue',
    'circle-stroke-width': 1
  }
};

var enableHeatmapClicked = function enableHeatmapClicked() {
  markersGroup1Layer.enableHeatmap(heatmapPointStyleGroup1, heatmapLayerStyleGroup1);
  markersGroup2Layer.enableHeatmap(heatmapPointStyleGroup2, heatmapLayerStyleGroup2);
};

var disableHeatmapClicked = function disableHeatmapClicked() {
  markersGroup1Layer.disableHeatmap();
  markersGroup2Layer.disableHeatmap();
};

var generate500Markers = function generate500Markers() {
  var arrayMarkers = [];

  for (var i = 0; i < 500; i += 1) {
    var marker = new cercaliagl.Marker({
      position: new cercaliagl.LonLat(-3.71 + Math.random() * 0.075, 40.45 - Math.random() * 0.05)
    });
    arrayMarkers.push(marker);
  }

  return arrayMarkers;
};

map = new cercaliagl.Map({
  target: 'map',
  center: new cercaliagl.LonLat(-3.71, 40.45)
});
markersGroup1Layer = new cercaliagl.MarkerLayer({
  id: 'group1'
});
markersGroup2Layer = new cercaliagl.MarkerLayer({
  id: 'group2'
});
map.whenReady(function () {
  var enableheatmap = document.querySelector('#enableheatmap');
  var disableheatmap = document.querySelector('#disableheatmap');
  map.addLayer(markersGroup1Layer);
  map.addLayer(markersGroup2Layer);
  var markersGroup1 = generate500Markers();
  var markersGroup2 = generate500Markers();
  map.addMarkers(markersGroup1, markersGroup1Layer);
  map.addMarkers(markersGroup2, markersGroup2Layer);
  map.centerToMarkers(markersGroup1.concat(markersGroup2));
  enableheatmap.addEventListener('click', enableHeatmapClicked);
  disableheatmap.addEventListener('click', disableHeatmapClicked);
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Stylize heatmap</title>
    <style>
      .map {
        width: 100%;
        height: 640px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <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>