Embed API について
Geolonia の Embed API では、JavaScript の知識がなくても HTML を記述するだけで地図をカスタマイズすることが可能なようになっています。
<div
class="geolonia"
data-lat="35.675888"
data-lng="139.744858"
data-zoom="12"
>国会議事堂</div>
また、この API は、内部的には Mapbox 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 Mapbox 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 の読み込みをデフォルトでサポートしています。
以下のサンプルはアメリカ地質調査所が公開している過去1週間に発生した地震の 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 や プルリクエストによるフィードバックをいつでも歓迎しています。