Mapbox GL requires WebGL support. Please check that you are using a supported browser and that WebGL is enabled.

<!DOCTYPE html><html><head><metacharset='utf-8'/><title>Add a new layer below labels</title><metaname='viewport'content='initial-scale=1,maximum-scale=1,user-scalable=no'/><scriptsrc='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script><linkhref='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css'rel='stylesheet'/><style>body{margin:0;padding:0;}#map{position:absolute;top:0;bottom:0;width:100%;}</style></head><body><divid='map'></div><script>
mapboxgl.accessToken ='<your access token here>';var map =newmapboxgl.Map({
container:'map',
style:'mapbox://styles/mapbox/streets-v9',
center:[-88.13734351262877,35.137451890638886],
zoom:4});
map.on('load',function(){var layers = map.getStyle().layers;// Find the index of the first symbol layer in the map stylevar firstSymbolId;for(var i =0; i < layers.length; i++){if(layers[i].type ==='symbol'){
firstSymbolId = layers[i].id;break;}}
map.addLayer({'id':'urban-areas-fill','type':'fill','source':{'type':'geojson','data':'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_urban_areas.geojson'},'layout':{},'paint':{'fill-color':'#f08','fill-opacity':0.4}// This is the important part of this example: the addLayer// method takes 2 arguments: the layer as an object, and a string// representing another layer's name. if the other layer// exists in the stylesheet already, the new layer will be positioned// right before that layer in the stack, making it possible to put// 'overlays' anywhere in the layer stack.// Insert the layer beneath the first symbol layer.}, firstSymbolId);});</script></body></html>