title: How do I add a simple image overlay in Mapbox Javascript?
body: <p>The following link in the Mapbox Javascript API describes how to add an image overlay on a map, and it is very simple : </p>
  
  <p><a href="https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/" rel="noreferrer">https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/</a></p>
  
  <p>This works! However, I am trying to add an image overlay on a custom map. I am wanting to do this without creating tiles or anything of the like.</p>
  
  <p>I can't find a way to overlay an image on a satellite map (that's my goal, just a weather radar GIF on a satellite map), but I can't seem to get this to work on any other map besides the one in the link above! How do I do this? I don't want the map they are using in their example. I just would like to overlay this on any custom map without needless complexity as they have in their example. Thank you for any help.</p>
  
  <p>EDIT : This is the code - I tried to change it after a comment here but I still am doing something wrong.</p>
  
  <pre><code>&lt;link href='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' 
  rel='stylesheet' /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id='map' style='width: 100%; height: 100%;'&gt;&lt;/div&gt;
  
  
  &lt;script&gt;
  mapboxgl.accessToken = 
  'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2lzNWl5N3RpMDNhYTNvcDFvNGVrZmZheCJ9.2X- 
  n4Yk2XyxYqoPbP_IMnQ';
  var map = new mapboxgl.Map({
  container: 'map',
  zoom: 4,
  style: 'mapbox://styles/mapbox/satellite-v9',
  center: [-80.425, 37.437]
  });
  
  
  
  map.addSource("myImageSource", {"type": "image",
  "url": "radar.gif",
  "coordinates": [
  [-80.425, 46.437],
  [-71.516, 46.437],
  [-71.516, 37.936],
  [-80.425, 37.936]
  ]})
  
  
  
  map.addLayer({
  "id": "overlay",
  "source": "myImageSource",
  "type": "raster",
  "paint": {"raster-opacity": 0.85}
  })
  
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>