Docs
Navigation SDKs
All docs
Docs
Mapbox GL JS
Examples
Layers (31)
Display buildings in 3DExtrude polygons for 3D indoor mappingAdd a 3D modelAdjust a layer's opacityAnimate a lineAnimate a series of imagesAnimate a pointChange building color based on zoom levelChange the case of labelsDisplay HTML clusters with custom propertiesCreate and style clustersChange a layer's color with buttonsAdd a custom style layerStyle circles with a data-driven propertyStyle lines with a data-driven propertyDisplay and style rich text labelsAdd a pattern to a polygonAdd a GeoJSON lineAdd a new layer below labelsDraw GeoJSON pointsAdd a GeoJSON polygonCreate a heatmap layerCreate a gradient line using an expressionAdd multiple geometries from one GeoJSON sourceStyle ocean depth dataShow and hide layersChange worldview of administrative boundariesUpdate a choropleth layer by zoom levelVariable label placementVisualize population densityAdd hillshading

Add an image

Dark vector baselayer with radar weather image overlay.

Mapbox GL unsupported
Mapbox GL requires WebGL support. Please check that you are using a supported browser and that WebGL is enabled.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add an image</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
 
<div id='map'></div>
<script>
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>