はじめに

Geolonia の地図をサイトに埋め込むまでの流れについて紹介します。

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 を使ったより高度なカスタマイズも可能です。

ベクトルタイル

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="klokantech-3d"
>国会議事堂</div>
国会議事堂

オープンソース

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

https://github.com/geolonia/embed

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