複数のカスタムマーカーを追加する

以下のように、複数のカスタムマーカーを追加する方法を紹介します。

このクックブックでは、 JavaScript API を使用した実装方法を紹介しています。Embed API を使った実装はできませんのでご注意下さい。

まずコードを見たい方は CodePen をご覧ください。

地図の初期化

まず、地図を表示するための div タグを用意します。

<div id="map"></div>

データを取得する

次に、地図に表示するデータを取得します。今回は、デモ用に用意している GeoJSON の URL を指定しますが、 実際には、ご自身のデータの URL を指定してください。

お手元の CSV ファイルを GeoJSON に変換するには、クックブックの 「CSV を GeoJSON に変換し、地図で表示する」 をご参考下さい。

map.on("load", async () => {
  try {
    // GeoJSON を fetch で取得
    const response = await fetch(
      "https://geolonia.github.io/style-demo-source/cookbook-popup.json"
    );
    // レスポンスを json に変換
    const geojson = await response.json();
  } catch (error) {
    console.error(error);
  }
});

カスタムマーカーを追加する

まず、カスタムマーカーの HTML要素 を作成します。

const markerElm = document.createElement("div");
markerElm.className = "custom-marker"; // クラス名をセット
markerElm.innerHTML = feature.properties.title; // GeoJSON feature の title をセット

次に、geolonia.Marker を使用して、カスタムマーカーを追加します。

const marker = new geolonia.Marker(markerElm)
  .setLngLat(feature.geometry.coordinates) // 緯度経度をセット
  .addTo(map); // 地図に追加

以上の手順を、GeoJSON の features をループし、feature の 数だけ繰り返すことで、複数のカスタムマーカーを追加することができます。

map.on("load", async () => {
  // ... 省略 ...
  // GeoJSON の features をループ
    geojson.features.forEach((feature) => {

      // カスタムマーカーの DOM を作成
      const markerElm = document.createElement("div");
      markerElm.className = "custom-marker";
      markerElm.innerHTML = feature.properties.title;

      // マーカーを追加
      const marker = new geolonia.Marker(markerElm)
        .setLngLat(feature.geometry.coordinates)
        .addTo(map);
    });
  // ... 省略 ...
});

マーカーを CSS でカスタマイズする

追加した custom-marker クラスを CSS でカスタマイズすることで、マーカーの見た目を変更することができます。

.custom-marker {
  background-color: #f5f5f5;
  color: #333333;
  padding: 5px 10px;
  font-weight: bold;
  border: 1px solid #333333;
  box-shadow: rgb(50 50 93 / 25%) 0px 13px 27px -5px,
    rgb(0 0 0 / 30%) 0px 8px 16px -8px;
}

コード全体を見るには、以下の CodePen のサンプルコードを参照してください。

See the Pen 複数のカスタムマーカーを追加 by Geolonia (@geolonia) on CodePen.

CodePen でサンプルコードを編集