Heatmap clipping

by Tristen Brown

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css">
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>

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

Babel + JSX

/* See https://github.com/mapbox/mapbox-react-examples/ for full example */

mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';

const map = new mapboxgl.Map({
	container: 'map',
	style: {
    'version': 8,
    'center': [-80, 34],
    'zoom': 4,
    'sources': {
        'composite': {
            'url': 'mapbox://mapbox.mapbox-streets-v7',
            'type': 'vector'
        }
    },
    'sprite': 'mapbox://sprites/tristen/cjic84bpf05gt2smp8jzyli2n',
    'glyphs': 'mapbox://fonts/tristen/{fontstack}/{range}.pbf',
    'layers': [
        {
            'id': 'background',
            'type': 'background',
            'paint': {
                'background-color': 'hsl(72, 95%, 79%)'
            }
        },
        {
            'id': 'water',
            'type': 'fill',
            'source': 'composite',
            'source-layer': 'water',
            'paint': {
                'fill-color': 'hsl(201, 100%, 73%)'
            }
        },
        {
            'id': 'place-label copy',
            'type': 'heatmap',
            'source': 'composite',
            'source-layer': 'place_label',
            'paint': {
                'heatmap-radius': 80
            }
        },
        {
            'id': 'place-label',
            'type': 'symbol',
            'source': 'composite',
            'source-layer': 'place_label',
            'layout': {
                'visibility': 'visible',
                'text-field': [
                    'to-string',
                    [
                        'get',
                        'name'
                    ]
                ],
                'text-font': [
                    'Open Sans ExtraBold',
                    'Arial Unicode MS Regular'
                ],
                'text-size': 12
            },
            'paint': {
                'text-color': 'hsl(20, 100%, 54%)',
                'text-halo-color': 'hsl(0, 100%, 100%)',
            ...