Add a raster image to a map layer
This example animates a series of radar weather images over other map layers in a dark vector style.
To create the vector map style, the example provides a JSON object to define a map style
that uses map data in the publicly available Mapbox Streets v8 vector tileset as a source for several vector
layers, and recolors them to create a dark appearance.
To add the raster overlay, the example adds another source to the same JSON object, this time using an image
source, and adds a raster
layer to the JSON object.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Add a raster image to a map layer</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet"><script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script><style>body { margin: 0; padding: 0; }#map { position: absolute; top: 0; bottom: 0; width: 100%; }</style></head><body><div id="map"></div><script> // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com mapboxgl.accessToken = '<your access token here>';var mapStyle = {'version': 8,'name': 'Dark','sources': {'mapbox': {'type': 'vector','url': 'mapbox://mapbox.mapbox-streets-v8'},'overlay': {'type': 'image','url': 'https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif','coordinates': [[-80.425, 46.437],[-71.516, 46.437],[-71.516, 37.936],[-80.425, 37.936]]}},'sprite': 'mapbox://sprites/mapbox/dark-v10','glyphs': 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf','layers': [{'id': 'background','type': 'background','paint': { 'background-color': '#111' }},{'id': 'water','source': 'mapbox','source-layer': 'water','type': 'fill','paint': { 'fill-color': '#2c2c2c' }},{'id': 'boundaries','source': 'mapbox','source-layer': 'admin','type': 'line','paint': {'line-color': '#797979','line-dasharray': [2, 2, 6, 2]},'filter': ['all', ['==', 'maritime', 0]]},{'id': 'overlay','source': 'overlay','type': 'raster','paint': { 'raster-opacity': 0.85 }},{'id': 'cities','source': 'mapbox','source-layer': 'place_label','type': 'symbol','layout': {'text-field': '{name_en}','text-font': ['DIN Offc Pro Bold', 'Arial Unicode MS Bold'],'text-size': ['interpolate',['linear'],['zoom'],4,9,6,12]},'paint': {'text-color': '#969696','text-halo-width': 2,'text-halo-color': 'rgba(0, 0, 0, 0.85)'}},{'id': 'states','source': 'mapbox','source-layer': 'place_label','type': 'symbol','layout': {'text-transform': 'uppercase','text-field': '{name_en}','text-font': ['DIN Offc Pro Bold', 'Arial Unicode MS Bold'],'text-letter-spacing': 0.15,'text-max-width': 7,'text-size': ['interpolate',['linear'],['zoom'],4,10,6,14]},'filter': ['==', ['get', 'class'], 'state'],'paint': {'text-color': '#969696','text-halo-width': 2,'text-halo-color': 'rgba(0, 0, 0, 0.85)'}}]}; var map = new mapboxgl.Map({container: 'map',maxZoom: 5.99,minZoom: 4,zoom: 5,center: [-75.789, 41.874],style: mapStyle});</script> </body></html>