Heat map

Heat map using mapboxgl core functions

A Heat map example using MapboxGL functions. Points are about restaurants in France. See MapboxGL documentation https://docs.mapbox.com/help/tutorials/make-a-heatmap-with-mapbox-gl-js/

main.js

var map = new cercaliagl.Map({
  target: 'map',
  controls: [],
  center: new cercaliagl.LonLat(2.3617545438310117, 48.859927392057045),
  zoom: 11
});
map.whenReady(function () {
  var mapboxMap = map.getMapboxglMap();
  mapboxMap.addSource('earthquakes', {
    type: 'geojson',
    data: 'resources/restaurants.geojson'
  });
  mapboxMap.addLayer({
    id: 'earthquakes-heat',
    type: 'heatmap',
    source: 'earthquakes',
    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'],
      // Adjust the heatmap radius by zoom level
      'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 1, 15, 14],
      // Transition from heatmap to circle layer by zoom level
      'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 0.8, 15, 0.2]
    }
  });
  mapboxMap.addLayer({
    id: 'earthquakes-point',
    type: 'circle',
    source: 'earthquakes',
    minzoom: 14,
    paint: {
      'circle-radius': ['interpolate', ['linear'], ['zoom'], 12, 3, 16, 6],
      'circle-color': 'rgba(0,0,0,0.4)',
      'circle-stroke-color': 'white',
      'circle-stroke-width': 1
    }
  });
});

index.html

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