MapBox Heatmap hide outside boundaries - heatmap

Question

I'm creating a heatmap of the United States and the designers want to "stop" the color from bleeding outside the US borders. So under Texas, the colors would reach the edge of the state and just stop.
Is this possible?
I tried creating another layer that included Mexico, Canada, and the Pacific/Atlantic Oceans, but heatmaps render after and I can't find out how to set a render priority, either.
edit: Here is an image that shows the desired effect:
And here is my code, minus some irrelevant data:
mapboxgl.accessToken = 'accessTokenString';
var map = new mapboxgl.Map({
container: 'map-heatmap',
style: 'mapbox://uri/for/styles',
center: [-95.922211, 37.881266],
zoom: 3.15,
minZoom: 3.15,
maxZoom: 3.15,
maxPitch: 0,
dragPan: false,
dragRotate: false
});
map.on('load', function() {
map.addSource('states', {
'type': 'geojson',
'data': '/path/to/us-states-contiguous.geojson'
});
map.addLayer({
'id': 'state-fills',
'type': 'fill',
'source': 'states',
'layout': {},
'paint': {
'fill-color': '#F2F2F2'
}
});
map.addSource('mexico', {
'type': 'geojson',
'data': '/path/to/mexico.geojson'
});
map.addLayer({
'id': 'mexico',
'type': 'fill',
'source': 'mexico',
'layout': {},
'paint': {
'fill-color': '#fff'
}
});
map.addSource('heatmapCoordinates', {
'type': 'geojson',
data: {
"type": "FeatureCollection",
"features": {/* JSON coordinates */}
}
});
map.addLayer({
'id': 'myHeatmap',
'type': 'heatmap',
'source': 'heatmapCoordinates',
'layout': {},
'paint': {
'heatmap-weight': 1,
'heatmap-color': [
'interpolate',
['linear'],
['heatmap-density'],
0,
'rgba(0, 0, 0, 0)',
1,
'rgba(0, 183, 79, 1)',
],
'heatmap-radius': 100,
'heatmap-opacity': .5
}
}, 'mexico');
map.addLayer({
'id': 'state-borders',
'type': 'line',
'source': 'states',
'layout': {},
'paint': {
'line-color': 'rgba(43, 43, 43, .5)',
'line-width': .25
}
});
});
For some reason, the borders that I draw over the heatmap appear "on top" of it. But when I try a layer to "fill", (like with Mexico above), it won't appear over the heatmap gradients, always underneath.
So how would I be able to "clip" the heatmap's shading outside of the US borders to achieve the above image's desired effect?

Answer 1

Your heatmap renders above the clip polygons because you're adding it to the map afterwards.
You just need to change the order of the two addLayer() calls.