Heatmap

How to create heatmaps in MapX

1. Create a vector view
2. Set title, abstract, source and attributes (and alternative attributes)
3. In edit style, add a JSON like this in Custom style (here, we weight on 'fatalities'):

{
  "enable": true,
  "paint": {
    "heatmap-weight": [
      "interpolate",
      [
        "linear"
      ],
      [
        "get",
        "fatalities"
      ],
      0, 0.1,
      1, 0.5
    ],
    "heatmap-intensity": [
      "interpolate",
      [
        "linear"
      ],
      [
        "zoom"
      ],
      0, 1,
      9, 3
    ],
    "heatmap-color": [
      "interpolate",
      [
        "linear"
      ],
      [
        "heatmap-density"
      ],
      0.1,"rgba(107, 0, 71, 0.1)",
      0.2,"rgba(163, 0, 109, 1)",
      0.7,"rgba(250, 150, 0, 1)",
      0.8,"rgba(255, 231, 46, 1)",
      1,"rgba(255, 247, 184, 1)"
    ],
    "heatmap-radius": [
      "interpolate",
      [
        "linear"
      ],
      [
        "zoom"
      ],
      0, 2,
      9, 20
    ],
    "heatmap-opacity": [
      "interpolate",
      [
        "linear"
      ],
      [
        "zoom"
      ],
      0, 1,
      20, 1
    ]
  },
  "layout": {},
  "filter": ["all"],
  "minzoom": 0,
  "maxzoom": 22,
  "type": "heatmap"
}

Figure 1: Edit style panel

Based on example : https://www.mapbox.com/mapbox-gl-js/example/heatmap-layer/

Doc : https://www.mapbox.com/mapbox-gl-js/style-spec/#layers-heatmap