はじめに | Mapbox GL JS、MapLibre GL JS 互換の Geolonia Maps 公式ドキュメンテーション

Embed API について

Geolonia の Embed API では、JavaScript の知識がなくても HTML を記述するだけで地図をカスタマイズすることが可能なようになっています。

<div
  class="geolonia"
  data-lat="35.675888"
  data-lng="139.744858"
  data-zoom="12"
>国会議事堂</div>

国会議事堂

また、この API は、内部的には MapLibre GL JS を利用しており、JavaScript を使ってさらに高度なカスタマイズをすることも可能です。

Embed API の動作環境

Internet Exploerer 11 以降及びすべてのモダンブラウザの最新版。
Firefox などの一部のブラウザでは、WebGL に対する制限により、一つのページ内に16個を超える地図を設置することはできません。
API キー YOUR-API-KEY に限り、iframe 内での利用を許可しておりません。

ご利用中のブラウザが対応ブラウザかどうかは以下のようなコードで確認することができます。

if (!geolonia.supported()) {
  alert('Your browser does not support MapLibre GL.')
} else {
  const map = new geolonia.Map('#map')
}

ベクトルタイル

Geolonia の地図では、地図の表示方法にベクトルタイルという仕組みを採用しており、WebGL で動的にレンダリングされています。

これによって、地図のアニメーションや、3D、地図の見た目の大胆なカスタマイズなども可能になっています。

遅延読み込みをデフォルトでサポート

ウェブマスターにとってウェブサイトの表示速度は、もっとも重要な課題のひとつです。

わたしたちは、たとえばフッターの隅に設置されるだけの地図がページ全体の表示速度に悪影響を及ぼすことは望ましくないと考えています。

そのため、Geolonia の地図はそのブロックがページ内に表示されてからはじめてレンダリングを開始するように設計されています。

遅延読み込みが動作する様子は、このページをリロードして、上下にスクロールしてみるとおわかりいただけると思います。

国際化

Geolonia の地図は、日本語および英語に対応しています。

言語の切り替えはユーザーのブラウザの設定に基づいて自動的に行われますので、ウェブマスターのみなさんが、地図の言語について意識する必要はほとんどありません。

<div
  class="geolonia"
  data-lat="35.675888"
  data-lng="139.744858"
  data-zoom="12"
  data-lang="en"
>国会議事堂</div>

国会議事堂

GeoJSON

Geolonia の地図では、GeoJSON の読み込みをデフォルトでサポートしています。

以下のサンプルはアメリカ地質調査所が公開している過去１週間に発生した地震の GeoJSON を読み込んだ地図です。

<div
  class="geolonia"
  data-geojson="https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson"
></div>

スタイルについて

Geolonia はベクトルタイルという方式の地図を利用しているためスタイルの切り替えが簡単にできることが大きな特徴の一つです。

Embed API では、data-style という属性を使ってスタイルを指定することが可能になっています。

<div
  class="geolonia"
  data-lat="35.675888"
  data-lng="139.744858"
  data-zoom="16"
  data-pitch="60"
  data-style="geolonia/midnight"
>国会議事堂</div>

国会議事堂

オープンソース

Embed API は、API 用のソースコードそのものがオープンソースで公開されています。

https://github.com/geolonia/embed

またすべてのスタイルもオープンソースで公開しており、みなさんが自由にフォークしてオリジナルのスタイルを作ることも可能です。

https://github.com/geolonia/basic

わたしたちは、Issue やプルリクエストによるフィードバックをいつでも歓迎しています。