title: Mapbox GL JS image overlay with multiple maps on page
body: <p>I now understand how image overlays work (I am a newbie) and have no issue inserting them into a map now, however I have 4 maps on one page (image attached of how it looks) and I am wanting to overlay an image on one of them (top left). Below is my code that works - and below that code that doesn't work. Where do I need to insert the addsource() and addlayer() for this to work? Working code would be very helpful as I cannot seem to find this out myself. I spent the last 2 hours trying to figure this out.</p>
  
  <p>Code that works : (nothing is added below map named "topleftmapbox" so the code works)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset='utf-8' /&gt;
  &lt;title&gt;Quad Pane Display&lt;/title&gt;
  &lt;meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /&gt;
  &lt;script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'&gt;&lt;/script&gt;
  &lt;link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' /&gt;
  &lt;style&gt;
  body { margin:0; padding:0; }
  #map { position:absolute; top:100%; bottom:100%; left:100%,right:100%, width:100%; padding:0;}
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body background="bg.jpg"&gt;
  &lt;style&gt;
  html, body, #page, #map {
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  cursor: url(cursor.gif), pointer;
  overflow: hidden;
  }
  
  
  body * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  }
  
  
  .topleftmapclass {height : 50%; width : 50%;  bottom: 50%; right : 50%; position : absolute; z-index : 200;}
  .toprightmapclass { height : 50%; width : 50%;  nottom: 50%; left : 50%; position : absolute; z-index : 200;}
  .bottomleftmapclass {height : 50%; width : 50%;   top : 50%; right : 50%; position : absolute; z-index : 200;}
  .bottomrightmapclass { height : 50%; width : 50%;  top : 50%; left : 50%; position : absolute; z-index : 200;}
  &lt;/style&gt;
  
  
  &lt;script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'&gt;&lt;/script&gt;
  &lt;link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' /&gt;
  
  
  &lt;div id='topleftmap' class='topleftmapclass'&gt;&lt;/div&gt;
  &lt;div id='toprightmap' class='toprightmapclass'&gt;&lt;/div&gt;
  &lt;div id='bottomleftmap' class='bottomleftmapclass'&gt;&lt;/div&gt;
  &lt;div id='bottomrightmap' class='bottomrightmapclass'&gt;&lt;/div&gt;
  
  
  &lt;script&gt;
  mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2ppanVpMTIwMDF3NDNrcjA5eHlpMjlsOSJ9._4sT3921GYQlIlsZ31EyQA';
  
  
  var topleftmapbox = new mapboxgl.Map({
  container: 'topleftmap',
  zoom: 14,
  pitch: 53,
  style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
  center: [-98.028491, 29.703963]
  });
  
  
  
  
  var toprightmapbox = new mapboxgl.Map({
  container: 'toprightmap',
  style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
  center: [-98.028491, 29.703963],
  zoom: 7,
  attributionControl: false
  });
  
  
  
  
  var bottomleftmapbox = new mapboxgl.Map({
  container: 'bottomleftmap',
  style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
  center: [-98.028491, 29.703963],
  zoom: 7,
  attributionControl: false
  });
  
  
  
  
  var bottomrightmapbox = new mapboxgl.Map({
  container: 'bottomrightmap',
  style: 'mapbox://styles/formula4/cjifh68hb0lus2st8q6rz4v49',   
  center: [-98.028491, 29.703963],
  zoom: 7,
  attributionControl: false
  });
  
  
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this code (with code added below "topleftmapbox" does NOT work) :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset='utf-8' /&gt;
  &lt;title&gt;Quad Pane Display&lt;/title&gt;
  &lt;meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /&gt;
  &lt;script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'&gt;&lt;/script&gt;
  &lt;link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' /&gt;
  &lt;style&gt;
  body { margin:0; padding:0; }
  #map { position:absolute; top:100%; bottom:100%; left:100%,right:100%, width:100%; padding:0;}
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body background="bg.jpg"&gt;
  &lt;style&gt;
  html, body, #page, #map {
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  cursor: url(cursor.gif), pointer;
  overflow: hidden;
  }
  
  
  body * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  }
  
  
  .topleftmapclass {height : 50%; width : 50%;  bottom: 50%; right : 50%; position : absolute; z-index : 200;}
  .toprightmapclass { height : 50%; width : 50%;  nottom: 50%; left : 50%; position : absolute; z-index : 200;}
  .bottomleftmapclass {height : 50%; width : 50%;   top : 50%; right : 50%; position : absolute; z-index : 200;}
  .bottomrightmapclass { height : 50%; width : 50%;  top : 50%; left : 50%; position : absolute; z-index : 200;}
  &lt;/style&gt;
  
  
  &lt;script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'&gt;&lt;/script&gt;
  &lt;link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' /&gt;
  
  
  &lt;div id='topleftmap' class='topleftmapclass'&gt;&lt;/div&gt;
  &lt;div id='toprightmap' class='toprightmapclass'&gt;&lt;/div&gt;
  &lt;div id='bottomleftmap' class='bottomleftmapclass'&gt;&lt;/div&gt;
  &lt;div id='bottomrightmap' class='bottomrightmapclass'&gt;&lt;/div&gt;
  
  
  &lt;script&gt;
  mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2ppanVpMTIwMDF3NDNrcjA5eHlpMjlsOSJ9._4sT3921GYQlIlsZ31EyQA';
  
  
  var topleftmapbox = new mapboxgl.Map({
  container: 'topleftmap',
  zoom: 14,
  pitch: 53,
  style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
  center: [-98.028491, 29.703963]
  });
  
  
  
  
  
  
  topleftmapbox.addSource("dopplerimage", {"type": "image",
  "url": "KEWX_L2_Z.gif",
  "coordinates": [
  [-98.0387, 29.7125], 
  [-98.0182, 29.7125],  
  [-98.0387, 29.6927], 
  [-98.0387, 29.6920]  
  ]})
  
  
  
  topleftmapbox.addLayer({
  "id": "overlay",
  "source": "dopplerimage",
  "type": "raster",
  "paint": {"raster-opacity": 0.85}
  })
  
  
  
  var toprightmapbox = new mapboxgl.Map({
  container: 'toprightmap',
  style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
  center: [-98.028491, 29.703963],
  zoom: 7,
  attributionControl: false
  });
  
  
  
  
  var bottomleftmapbox = new mapboxgl.Map({
  container: 'bottomleftmap',
  style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
  center: [-98.028491, 29.703963],
  zoom: 7,
  attributionControl: false
  });
  
  
  
  
  var bottomrightmapbox = new mapboxgl.Map({
  container: 'bottomrightmap',
  style: 'mapbox://styles/formula4/cjifh68hb0lus2st8q6rz4v49',   
  center: [-98.028491, 29.703963],
  zoom: 7,
  attributionControl: false
  });
  
  
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ztMh9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ztMh9.jpg" alt="Screenshot of how it this currently looks without overlay on top-left map :"></a></p>