Docs
Navigation SDKs
All docs
Docs
Mapbox GL JS
Examples
Layers (30)
Extrude polygons for 3D indoor mappingDisplay buildings in 3DAdjust a layer's opacityAdd a 3D modelAnimate a lineAnimate a series of imagesAnimate a pointChange building color based on zoom levelChange the case of labelsDisplay HTML clusters with custom propertiesChange a layer's color with buttonsCreate and style clustersStyle circles with a data-driven propertyAdd a custom style layerStyle lines with a data-driven propertyDisplay and style rich text labelsAdd a pattern to a polygonAdd a new layer below labelsAdd a GeoJSON lineDraw GeoJSON pointsAdd a GeoJSON polygonCreate a heatmap layerAdd hillshadingCreate a gradient line using an expressionAdd multiple geometries from one GeoJSON sourceStyle ocean depth dataChange worldview of administrative boundariesShow and hide layersUpdate a choropleth layer by zoom levelVisualize population density

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/v0.53.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/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>