【Mapbox】自宅を表示してみた

# 前提
* Mapboxのアカウント作成
https://docs.mapbox.com/

* クレジットの登録が必要

* API keyの取得しておく

# ドキュメント通りにhtmlを作成

https://docs.mapbox.com/mapbox-gl-js/example/globe-spin/
こちらの例をそのまま使う。
**※YOUR_MAPBOX_ACCESS_TOKENの部分は、自分のAPIトークンに置き換える必要あり**

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Create a rotating globe</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.css"
      rel="stylesheet"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <style>
      #btn-spin {
        font: bold 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
        background-color: #3386c0;
        color: #fff;
        position: absolute;
        top: 20px;
        left: 50%;
        z-index: 1;
        border: none;
        width: 200px;
        margin-left: -100px;
        display: block;
        cursor: pointer;
        padding: 10px 20px;
        border-radius: 3px;
      }
      #btn-spin:hover {
        background-color: #4ea0da;
      }
    </style>
    <div id="map"></div>
    <button id="btn-spin">Pause rotation</button>
    <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",
        style: "mapbox://styles/mapbox/navigation-night-v1",
        projection: "globe", // Display the map as a globe, since satellite-v9 defaults to Mercator
        zoom: 14,
        center: [139.753357,35.685401],
      });

      map.on("style.load", () => {
        map.setFog({}); // Set the default atmosphere style
      });

      // The following values can be changed to control rotation speed:

      // At low zooms, complete a revolution every two minutes.
      const secondsPerRevolution = 120;
      // Above zoom level 5, do not rotate.
      const maxSpinZoom = 5;
      // Rotate at intermediate speeds between zoom levels 3 and 5.
      const slowSpinZoom = 3;

      let userInteracting = false;
      let spinEnabled = true;

      function spinGlobe() {
        const zoom = map.getZoom();
        if (spinEnabled && !userInteracting && zoom < maxSpinZoom) {
          let distancePerSecond = 360 / secondsPerRevolution;
          if (zoom > slowSpinZoom) {
            // Slow spinning at higher zooms
            const zoomDif = (maxSpinZoom - zoom) / (maxSpinZoom - slowSpinZoom);
            distancePerSecond *= zoomDif;
          }
          const center = map.getCenter();
          center.lng -= distancePerSecond;
          // Smoothly animate the map over one second.
          // When this animation is complete, it calls a 'moveend' event.
          map.easeTo({ center, duration: 1000, easing: (n) => n });
        }
      }

      // Pause spinning on interaction
      map.on("mousedown", () => {
        userInteracting = true;
      });

      // Restart spinning the globe when interaction is complete
      map.on("mouseup", () => {
        userInteracting = false;
        spinGlobe();
      });

      // These events account for cases where the mouse has moved
      // off the map, so 'mouseup' will not be fired.
      map.on("dragend", () => {
        userInteracting = false;
        spinGlobe();
      });
      map.on("pitchend", () => {
        userInteracting = false;
        spinGlobe();
      });
      map.on("rotateend", () => {
        userInteracting = false;
        spinGlobe();
      });

      // When animation is complete, start spinning if there is no ongoing interaction
      map.on("moveend", () => {
        spinGlobe();
      });

      document.getElementById("btn-spin").addEventListener("click", (e) => {
        spinEnabled = !spinEnabled;
        if (spinEnabled) {
          spinGlobe();
          e.target.innerHTML = "Pause rotation";
        } else {
          map.stop(); // Immediately end ongoing animation
          e.target.innerHTML = "Start rotation";
        }
      });

      spinGlobe();
    </script>
  </body>
</html>

```


自宅の設定場所

```javascript
      const map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/navigation-night-v1",
        projection: "globe", // スタイルを変更してみた
        zoom: 14, // 初期表示時のズームレベルを設定
        center: [139.753357,35.685401], // ここで自宅の経度緯度を設定
      });
```

## 経度緯度の調べ方
こちらのサイトから、取得したい位置まで中心を移動させます。

http://bboxfinder.com/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668402/bba44fa5-b329-c700-d464-57f47a7c007d.png)

中心部分の緯度経度が一番下に表示されているのでそれをコピーすればOK！！

さあこれで地図アプリがつくれますねぇ。

よいMapbox lifeを！