Skip to main content

Display a satellite map on a webpage

This example shows how to initialize a map on a webpage with Mapbox GL JS.

This example is like the Display a map on a webpage example, but it uses the style URL for the Mapbox Satellite style. Since globe projection and atmospheric styling are not included by default in the Satellite style, we set them in GL JS.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a satellite map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/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_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map', // container ID
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/satellite-v9', // style URL
projection: 'globe', // Display the map as a globe, since satellite-v9 defaults to Mercator
center: [137.915, 36.259], // starting position [lng, lat]
zoom: 9 // starting zoom
});
map.on('style.load', () => {
map.setFog({}); // Set the default atmosphere style, since satellite-v9 doesn't include atmosphere by default.
});
</script>

</body>
</html>
Was this example helpful?