Goong Maps 2

by pvtd264

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>Create a heatmap layer</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://cdn.jsdelivr.net/npm/@goongmaps/[email protected]/dist/goong-js.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/@goongmaps/[email protected]/dist/goong-js.css" rel="stylesheet" />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }

    </style>
  </head>

  <body>
    <div id="map"></div>
  </body>

</html>

JavaScript

goongjs.accessToken = 'YOUR_TOKEN';
var map = new goongjs.Map({
  container: 'map',
  style: 'https://tiles.goong.io/assets/goong_map_web.json',
  center: [-120, 50],
  zoom: 2
});

map.on('load', function() {
  // Add a geojson point source.
  // Heatmap layers also work with a vector tile source.
  map.addSource('earthquakes', {
    'type': 'geojson',
    'data': 'https://docs.goong.io/assets/earthquakes.geojson'
  });

  map.addLayer({
      'id': 'earthquakes-heat',
      'type': 'heatmap',
      'source': 'earthquakes',
      'maxzoom': 9,
      'paint': {
        // Increase the heatmap weight based on frequency and property magnitude
        'heatmap-weight': [
          'interpolate',
          ['linear'],
          ['get', 'mag'],
          0,
          0,
          6,
          1
        ],
        // Increase the heatmap color weight weight by zoom level
        // heatmap-intensity is a multiplier on top of heatmap-weight
        'heatmap-intensity': [
          'interpolate',
          ['linear'],
          ['zoom'],
          0,
          1,
          9,
          3
        ],
        // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
        // Begin color ramp at 0-stop with a 0-transparancy color
        // to create a blur-like effect.
        'heatmap-color': [
          'interpolate',
          ['linear'],
          ['heatmap-density'],
          0,
          'rgba(33,102,172,0)',
          0.2,
          'rgb(103,169,207)',
          0.4,
          'rgb(209,229,240)',
          0.6,
          'rgb(253,219,199)',
          0.8,
          'rgb(239,138,98)',
          1,
          'rgb(178,24,43)'
        ],
        // Adjust the heatmap radius by zoom level
        'heatmap-radius': [
          'interpolate',
          ['linear'],
          ['zoom'],
          0,
          2,
          9,
          20
        ],
        // Transition from heatmap to circle layer by zoom level
        'heatmap-opacity': [
          'interpolate',
       ...