Mapbox GL JSにカスタムマーカーを追加 | ヘルプ | ドキュメント

このチュートリアルでは、コーディングが必要なJavaScriptライブラリであるMapbox GL JSを使用して、カスタムマーカーを使いインタラクティブなウェブマップを作成する方法を学習します。GeoJSONデータをインラインで読み込み、HTMLマーカーを使ってマップに追加する方法を学びます。最後に、マーカーがクリックされた時のポップアップを追加します。最終的なマップはこのように見えるはずです：

はじめに

このプロジェクトでは、mapbox-markersというローカルフォルダを作成し、プロジェクトファイルを格納することを推奨します。このフォルダーはプロジェクトフォルダーと呼ばれます。

このガイドを進めるには、以下のものが必要です:

アクセス・トークン：これはあなたのアカウント専用です。アクセス・トークンを利用し、マップをあなたのアカウントと連携させます。あなたのアクセス・トークンはアカウントページから確認できます。
テキストエディタ：結局最後にはHTML、 CSS、JavaScriptを書く必要があります。
カスタムイメージ：このチュートリアルでは、各カスタムHTMLマーカー内の画像でオフィスの場所を表示します。カスタムアイコンとして使用するPNGファイルをダウンロードし、index.htmlファイルと同じプロジェクトフォルダに保存してください。

arrow-downファイルをダウンロード

Mapbox GL JS mapを作りましょう

Mapbox GL JSを使う準備が整いました！まず、新規HTMLファイルを作成し、Mapbox GL JSマップを初期化するコードを書きます。

マップの初期化

テキストエディタを開いてください。
新規HTMLファイルを作成してください。
以下のコードをテキストエディタに貼り付け、Mapbox GL JSマップを初期化します。
APIアクセス・トークンとmapboxgl.accessTokenを利用していることを確認してください。
ファイルをindex.htmlとしてプロジェクトフォルダに保存します。
ブラウザでファイルを開いてください。
ブラウザに初期化されたMapbox GL JSマップがMapbox Lightスタイルで表示されているはずです。マーカーはまだ表示されていません。

<!DOCTYPE html>
<html>
  <head>
      <meta charset='utf-8' />
      <title></title>
      <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
      <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
      <script src='https://api.tiles.mapbox.com/mapbox-gl-js/2.14.1/mapbox-gl.js'></script>
      <link href='https://api.tiles.mapbox.com/mapbox-gl-js/2.14.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_MAPBOX_ACCESS_TOKEN';

    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v',
      center: [-96, 37.8],
      zoom: 3
    });
    // code from the next step will go here!
    </script>
  </body>
</html>

上記のように、Mapbox GL JSマップにはいくつかのオプションが必要になります:

container: マップが存在するページ上の<div>要素のid。この場合、<div>のidは 'map'です。
style: マップスタイルのスタイルURL。この場合、スタイルURL mapbox://styles/mapbox/light-10.を持つMapbox Lightマップを使用します。
center: [longitude, latitude]形式のマップの最初の中心点。
zoom: マップの初期ズームレベル。

GeoJSONデータを読み込む

HTMLファイルにインラインGeoJSONを追加して、データを読み込みます。このGeoJSONは、マーカーがマップ上のどこに表示されるかを決定します

マップを初期化するコードと</script>タグの前に、以下を貼り付けます。このコードは、GeoJSONデータに等しく設定された変数geojsonを宣言します。

const geojson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [-77.032, 38.913]
      },
      properties: {
        title: 'Mapbox',
        description: 'Washington, D.C.'
      }
    },
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [-122.414, 37.776]
      },
      properties: {
        title: 'Mapbox',
        description: 'San Francisco, California'
      }
    }
  ]
};

book

注意

GeoJSONファイルが大きい場合は、インラインではなく、外部ソースとして読み込むことを推奨します。データをロード後、HRML DOM要素を作成するコードを各マーカーに追加し、Mapbox GL JS Markerメソッドを使いGeoJSON機能に連結してください。これは、リモートで接続している場合はURLに接続するか、AJAXコールを使用してローカルまたはサードパーティAPIから読み込むことで実行できます。

HTMLマーカーの追加

データをロード後、HRML DOM要素を作成するコードを各マーカーに追加し、Mapbox GL JS Markerメソッドを使ってGeoJSON機能に連結してください。チュートリアルの初期段階でプロジェクトフォルダに保存した画像を使います。

マーカーメソッドを使用してマーカーを追加すると、GeoJSONの各ポイントに空のdivが追加されます。マーカーをマップに追加する前に、マーカーのスタイルを指定する必要があります。

スタイルマーカー

まず、マーカーのスタイル設定に必要なCSSを追加します。この場合、markerと呼ばれるクラスのbackground-imageとしてダウンロードした画像ファイルを追加します。同じindex.htmlファイルで、styleタグ内のコードを＃map宣言の下に貼り付けます。

.marker {
  background-image: url('mapbox-icon.png');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

マップにマーカーの追加

次に、マーカー作成に必要なJavaScriptを追加し、マップに追加します。次のコードをscriptタグのmapオブジェクト宣言の終わりと、closing scriptタグの間に貼り付けます。

// add markers to map
for (const marker of geojson.features) {
  // create a HTML element for each feature
  const el = document.createElement('div');
  el.className = 'marker';

  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el).setLngLat(marker.geometry.coordinates).addTo(map);
}

ファイルを保存し、ブラウザを更新してください。カスタムHTMLマーカーのマップが表示されるはずです。

ポップアップの追加

最終ステップとして、Mapbox GL JSを使ったマーカーにポップアップを追加します。これは、mapboxgl.Marker宣言内で行います。

スタイルポップアップ

最初に、ポップアップのスタイル設定に必要なCSSコードを追加します。同じindex.htmlファイルで、styleタグ内のコードを.marker宣言の下に貼り付けます。

.mapboxgl-popup {
  max-width: 200px;
}

.mapboxgl-popup-content {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

マーカーにポップアップを追加

次に、各ポイントに関する情報を含むポップアップを追加し、マーカーがクリックされたときにポップアップを表示するために必要なJavaScriptを追加します。

.setPopupコードを、scriptタグ内の.setLngLat()メソッドと.addTo()メソッドの間に貼り付けます。
- ポップアップに表示したいデータに適切なキーが使われていることを確認してください。この例では、データのtitleとdescriptionプロパティを表示します。
ファイルを保存し、ブラウザを更新します。
マーカーをクリックすると、ポップアップが表示されるはずです。

new mapboxgl.Marker(el)
  .setLngLat(marker.geometry.coordinates)
  .setPopup(
    new mapboxgl.Popup({ offset: 25 }) // add popups
      .setHTML(
        `<h3>${marker.properties.title}</h3><p>${marker.properties.description}</p>`
      )
  )
  .addTo(map);

mapboxgl.Popupメソッドを使用してポップアップを宣言するときにオフセット値を追加して、ポップアップがマーカーの中央になっていることを確認してください。

最終製品

これでMapbox GL JSを使用し、カスタムデータとスタイリングでインタラクティブなマーカーマップを作成することができました。

次のステップ

Mapbox GL JSでプロジェクトを作成しました。次は他のチュートリアルを確認してあなたのWebアプリを更に拡張してください:

Mapbox GL JSの事例でプロジェクトとコードをより拡張するアイディアをご覧ください。