embed

チュートリアル 段3：見た目を変える

前の段でできたこと

段2で、自分のデータを GeoJSON として地図に載せました。でもベースの地図はデフォルトのまま。この段では、地図全体のスタイルを差し替えます。

スタイルとは

地図の「見た目」（道路の色、文字の大きさ、建物の塗りなど）はすべてスタイルで決まっています。スタイルは 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>

上のコードは、そのまま下で動いています。段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 属性を消してしまっていないか確認。スタイルとデータは独立した設定なので、両方を同時に指定できます。

次は

地図の見た目を変えられるようになりました。次の段4：インタラクションを足すで、マーカーをクリックしたらポップアップを出すインタラクションを追加します。