地図のスタイルをカスタマイズ

Geolonia の地図のスタイルをカスタマイズする方法を紹介します。

地図のスタイルを変更する

Geolonia の地図では、いくつかのスタイルを用意しています。

スタイルは、以下のように data-style 属性を使用して指定することができます。

geolonia-basic (デフォルト)

geolonia-basic はデフォルトのスタイルです。

data-style 属性による指定がない場合はこのスタイルが自動的に選択されます。

<div
  class="geolonia"
  data-lat="35.632546"
  data-lng="139.881328"
  data-zoom="16"
  data-style="geolonia-basic"
>東京ディズニーランド</div>
東京ディズニーランド

geolonia-basic-3d

このスタイルは、デフォルトの geolonia-basic とほぼ同じですが、3D 効果が有効化されている点で、デフォルトのスタイルとは異なります。

<div
  class="geolonia"
  data-lat="35.632546"
  data-lng="139.881328"
  data-zoom="16"
  data-style="geolonia-basic-3d"
>東京ディズニーランド</div>
東京ディズニーランド

地図の角度を指定する

Geolonia 地図のスタイルのいくつかは 3D に対応しています。

3D に対応したスタイルでは、以下のように data-pitch 属性をつけて角度をつけて表示すると効果的です。

<div
  class="geolonia"
  data-lat="35.632546"
  data-lng="139.881328"
  data-zoom="16"
  data-style="geolonia-basic-3d"
  data-pitch="60"
>東京ディズニーランド</div>
東京ディズニーランド

3D 用のデータはオープンストリートマップのデータに依存しています。

地図のマーカーをカスタマイズする

Geolonia 地図では、JavaScript を書かなくても簡単に独自のマーカーを表示することができます。

東京ディズニーランド

カスタムマーカーを使用するには、まずマーカー用の HTML を用意します。

<div id="custom-marker">
  <img src="/img/custom-marker.png" alt="">
</div>

このマーカーには任意の ID 属性やクラス属性をセットして、CSS セレクタで指定できるようにしてください。この例では、custom-marker という ID をセットしています。

次に、data-marker 属性で、CSS セレクタと同じフォーマットで先程のマーカーを指定してください。

<div
  class="geolonia"
  data-lat="35.632546"
  data-lng="139.881328"
  data-zoom="16"
  data-custom-marker="#custom-marker"
>東京ディズニーランド</div>

必要に応じて、CSS でマーカーの見た目を調整してください。

#custom-marker
{
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: none;
}

#custom-marker img
{
  max-width: 100%;
  height: auto;
}

カスタムマーカーのサンプルコードは以下の URL でも見ることができます。

https://playcode.io/297180