以下のように、複数のカスタムマーカーを追加する方法を紹介します。
このクックブックでは、 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.