JavaScript を使用した高度なカスタマイズ

Geolonia の地図は国際化にも対応しています。このページでは、地図の言語の設定方法について紹介します。

Mapbox GL JS との互換性

Geolonia の Embed API は、Mapbox GL JS を内部的に使用しており、100% 互換性があります。

Embed API の HTML インターフェースで提供されていないより高度なカスタマイズが必要な場合は、Mapbox GL JS API を使用することでさらに多くのことが実現可能になります。

<div
  id="toturial-009"
  data-lat="35.65810422222222"
  data-lng="139.74135747222223"
  data-zoom="9"
><strong>日本経緯度原点</strong><br>東京都港区麻布台二丁目</div>

<script type="text/javascript" src="https://api.geolonia.com/v1/embed?geolonia-api-key=YOUR-API-KEY"></script>

<script>
  var map = new geolonia.Map( document.getElementById( 'toturial-009' ) );
  
  setInterval( function() { 
    map.rotateTo( map.getBearing() + 90 ) 
  }, 3000 );
</script>
日本経緯度原点
東京都港区麻布台二丁目

すべてのソースコードをみる

上の例では、toturial-009 という ID 属性をもつ要素に対して地図を設置し、その Map オブジェクトを map という変数に代入しています。

ここまでのチュートリアルで紹介した地図の HTML とは違い、geolonia という class 属性を持っていないことに注意してください。この class 属性を与えてしまうと、思い通りに動作しないことがあります。

あとは、Mapbox GL JS API のドキュメントに基づいて、3秒に一度、地図を90度回転させています。

class 属性 geolonia および tilecloud について

上述しましたが、JavaScript で何らかのカスタマイズをする場合、クラス属性に geolonia という値は使用しないようにご注意願います。また、 旧プロジェクト名である tilecloud も予約されたクラス属性の値になっていますので、同様に使用しないようにご注意願います。

Geolonia の Embed API は、ロードされるとページ内に含まれる .geolonia および .tileclouddocument.querySelectorAll() で検索し、それらを地図用のコンテナとして用いようとします。

この時、みなさんのウェブページの表示速度に悪影響を及ぼさないように、それぞれの地図に対して IntersectionObserver を使用して遅延ロードが行われるようにセットされます。

したがって、地図コンテナが画面の表示範囲内に入るまで(もしくは CSS の display プロパティの値が block になるまで ) Map オブジェクトが空になりますので、クラス属性に geolonia および tilecloud という値をセットしてしまうと、みなさんのスクリプトが期待通りに動作しないことが予測されますのでご注意ください。