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.8.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.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>
This code snippet will not work as expected until you replace
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
mapRef.current = new mapboxgl.Map({
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/satellite-v9',
projection: 'globe',
center: [137.915, 36.259],
zoom: 9
});
mapRef.current.on('style.load', () => {
mapRef.current.setFog({});
});
return () => mapRef.current.remove();
}, []);
return <div ref={mapContainerRef} style={{ height: '100%' }} />;
};
export default MapboxExample;
This code snippet will not work as expected until you replace
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.Was this example helpful?