ドキュメントを検索

embed

チュートリアル Step 3: 地図スタイルの適用

この Step の前提

Step 2 を終えて、GeoJSON の地点データを地図に重ねた状態から始めます。この時点のベース地図は既定のスタイルです。この Step では、地図全体のスタイルを差し替えます。

スタイルとは

道路の色、文字の大きさ、建物の塗りといった地図の見た目は、すべてスタイルで定義されます。スタイルは JSON ファイルであり、URL で指定します。

embed では、data-style 属性に URL を指定することでベース地図を差し替えます。

スタイルを差し替える

<style>
  .geolonia { width: 100%; height: 100vh; }
</style>

<div class="geolonia"
     data-lat="35.68" data-lng="139.75" data-zoom="11"
     data-marker="off"
     data-geojson="/data/sample-spots.geojson"
     data-style="https://tile.openstreetmap.jp/styles/osm-bright/style.json"></div>

<script src="https://cdn.geolonia.com/embed/v5/embed?geolonia-api-key=YOUR-API-KEY"></script>

上のコードは、そのまま下で動作しています。Step 2 と同じデータが、別のスタイルの地図に重なっています。

Geolonia が用意するスタイル

Geolonia Maps は複数の標準スタイルを提供しています。data-style にスタイル名を指定すると切り替わります。

<div class="geolonia" data-style="geolonia/basic-v2"></div>
<div class="geolonia" data-style="geolonia/midnight"></div>
<div class="geolonia" data-style="geolonia/notebook"></div>

利用できるスタイル名の一覧は Geolonia Maps のスタイル一覧を参照してください。

ダークモードの地図を使う

背景の暗いサイトには、暗い配色のスタイルが適しています。data-style にダーク系のスタイル名を指定することで、地図をサイトの配色に合わせられます。

動いたか確認する

地図の背景（道路や建物）が変わっていれば成功です。複数のスタイルを指定し、サイトの配色に合うものを選択してください。

うまくいかないとき
  • 地図が真っ白になった → スタイル URL のつづりを確認。存在しない URL を指定すると何も描画されません。
  • GeoJSON のデータが消えた → data-geojson 属性が残っているか確認。スタイルとデータは独立した設定であり、同時に指定できます。

次の Step

以上で、地図スタイルの適用は完了です。次の Step 4: イベント処理とポップアップ で、マーカーのクリックに応じてポップアップを表示します。