Display a satellite map on a webpage | Mapbox GL JS

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.

JavaScript

React

JavaScript

React


<!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>

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

JavaScript

React


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;

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

追加の開発者リソース

このexampleは役に立ちましたか？