簡単・軽快・安価で伸びしろ多い「Geolonia Maps」をWordPressに埋め込んで使ってみた

カトアキ

2021.09.15

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

Geolonia Maps に触る会 #1の参加レポートです。

こんな流れで、実演もはさみつつ色々なお話を聞けました。

  1. Geolonia Maps のかんたんな紹介
  2. 実際にやってみよう！
  3. Geolonia にフィードバックを伝えよう
  4. Q&A

本ブログでは、聞いた内容を自分なりにまとめてみたいと思います。

結論

  • Geolonia Mapsとはデジタル地図のSaaSである
  • 次の特徴がある
    • ピンの数が増えても動作が軽快
    • シンプルで簡単に使える
    • 安価
    • これからどんどん機能が増える予定で、積極的にフィードバック募集中

Geolonia Mapsって何？

地図のSaaSです。

類似のものでいうと、Google マップやMapbox等があります。

ちなみに、イベントの公開アンケートではGoogleマップを使っている方が多かったです。

何ができるの？

WEBサイトに地図を埋め込んだりすることができます。

埋め込んだ地図にマーカーを付けたりできます。会社のロゴを入れたりもできます。ポップアップを出すこともできます。

地図のスタイルをカスタマイズすることもできます。

3D表示もできます。

その上で、動作がすごく軽快です。

公式サイトの「よくあるご質問」にこう書かれています。

Geolonia Mapsが「高速・軽量」とはどういうことですか？

オリジナルのデータを大量に追加表示するときに高速、軽量に表示され、サクサク動きます。近日リリース予定の機能を利用した場合、1,000のレストランを表示する、1万個のAED設置場所を表示する、日本全国の病院を表示するといった処理を行うと、たとえばGoogle Mapsでは処理が重たくなり、ズームしたりスクロールしたりするとうまく表示ができないといった問題を解決しています。

例えば、実際に公式サイトの事例に上がっているワクチンマップを使ってみると分かるんですが「拡大・縮小」「移動に伴うピンの読み込み」がめっちゃ早いです。

【2021/9/13 更新データ】新型コロナワクチン接種マップ - Medical DOC（メディカルドキュメント）

その他、どんなことができるか、というのがコードレベルで(CodePenへのリンクがある)まとまっているのでここをみると良さそうです

→JavaScript API | Geolonia 公式ドキュメント https://docs.geolonia.com/javascript-api/

じゃあもう全部コレ使えばいいの？

いいえ。そうとは言い切れないかもしれません。。

軽量で高速で・・などいい点をリストアップしましたが、まだまだ機能拡張を進めている段階なので、他の地図サービスを利用したほうがいい部分もあるようです。

例えば、前述の「ワクチンマップ」であれば、ピンのポップアップ内にGoogle マップへのリンクが入っています。これは、会場への経路検索をするユースケースでは、現状Google マップで行うのが一番良さそうと判断したからだそうです。

個人的には「Google マップの機能が必要だけど、マップのベースはGeoloniaにオフロードしよ」みたいな併用は賢い使い方だなと思いました。料金的にもその方が安く済むケースがありそうです。

Geolonia Mapsが「安い」とはどういうことですか？

Google Maps、Mapboxを意識して値段の設定をしました。どこよりも安く地図を提供することで、デジタル地図の利用がさらに普及することを目指しています。

どうやって使うの？

WordPressに埋め込んでみました。

環境

  • WordPress 5.8.1
  • Simple Custom CSS and JSプラグインを利用
    • 所定の箇所にHTMLやJSのコードを埋め込むために使用
    • 他の方法で代替できるのであれば不要です
  • ブロックエディタを利用します

1. サインイン

初めに https://app.geolonia.com/#/signin にアクセスして、アカウントを作成します

作成したアカウントでサインインできると、ダッシュボードに遷移します。

2. APIキーを取得

ダッシュボードの左メニューにある「APIキーの管理」からAPIキー画面に遷移します。

「新規作成」のボタンを押してAPIキーの作成をリクエストします。

すぐにAPIキーが生成されて、確認できる状態になります。

3. 許可リストにサイトのURLを設定

次に設定の「地図の表示を許可するURLのリスト」のセクションで、地図を表示したいサイトのURLを設定します。

今回は私のサイト「https://web-iot.net」に設定します。

4. Simple Custom CSS and JSプラグインでCDNのコードを追加

Simple Custom CSS and JSプラグイン で、APIキー画面右側にある「ステップ1」のコード（CDNからjsを取得するコード）を追加します。

bodyタグの最後に入れる必要があるので、表示位置は「フッター」を指定します。　「bodyタグの後」にセットしてしまうと動かないので注意して下さい。

5. Simple Custom CSS and JSプラグインでCSSのコードを追加

前のステップと同様に「ステップ3」のCSSを追加します。

6. 固定ページに埋め込み地図HTMLコードを追加

まずは「ステップ2」の「HTMLを取得」ボタンを押します。

すると、地図が表示されます。

地図を動かして、位置を決めます。

決めた位置に対応する埋め込み地図のHTMLコードが生成されますので、控えておきます。

固定ページを作成して、先ほど控えた埋め込み地図のHTMLをカスタムHTMLのブロックで追加します。（ここでは、境界が分かりやすいように地図の下に適当なテキストを追加しました。）

7. 動作確認

作成したページにアクセスしてみます。

その他、気になったこと

  • 地図データについて
    • OpenStreetMapや国土地理院のデータを主に利用している
    • 粒度は街区レベルである
  • 料金について
  • 地図サービスの規約について
    • Google マップを利用して取得した緯度経度を他サービスで転用するのは規約違反になる

おわりに

まだまだ発展途上で、どんどんフィードバック取り込んで良くしていくぞ！という熱量が感じられるGeoloniaチームのセッションでした。

公式twitterでラフに質問や感想を上げたり、ソフトウェアエンジニアの方であればGitHubリポジトリのissueに直接フィードバックを書いたりしてみたら積極的に反応もらえそうな温度感でした。

今後、WordPress のプラグインやCSVとの連携などの機能が増える予定とのことなので、今が意見を言うチャンスかも知れないですね。

参考

*