ここ最近のWeb地図周辺の動向をまとめてみた
Web地図の歴史というのは Google Maps 登場以前と登場後に分けられるのですが、2015年現在、まさにGoogle Maps登場と同じぐらいの変革がWeb地図の世界に訪れているのではないか？ と勝手に思っているので自分の観測範囲内でまとめてみました。
概要
簡単に要点をまとめると、CanvasとかSVGとかWebGLとかブラウザ周りの表現力の進化がWeb地図にも影響を及ぼしていて、そこにGeoJSONのようなそれまでGISなどに疎かったフロントエンドエンジニアにも気軽に扱うことができるフォーマットが普及し始めたことと、降って湧いたようなデータビジュアライゼーションブームなどによって爆発的にエコシステムが増殖し、さらにフロントエンド回りの新技術、仮想DOMとか Web Components とかFRPだとかもろもろいろいろ絡まってよくわからないけど地味に凄いことになっています。
GeoJSON
地図タイルに匹敵する発明と言えるんじゃないでしょうか。ここ最近のWeb地図周辺の進化は直接的にしろ間接的にしろ、その中心にGeoJSONがドカっと君臨しています。GithubがGeoJSONの地図表示に対応したことでさらに利用者が拡大し、「GIS? “GHOST IN THE SHELL”のこと？」といったユーザーまでもが、気軽に地理情報を作成・シェアし今までにないエコシステムが広がっています。データ形式のいち規格が普及することで、こんなにも様相が変わるというのは凄い事ですね。
GeoJSON フォーマット仕様
GeoJSONを使いこなすためのWebサービスまとめ
GeoJSON Specification
次の段階としてGeobufというものが提唱されています。（GeoJSONをプロトコルバッファをつかってシリアライズするともっと小さく早くなるよ！ということらしいです）
mapbox/geobuf
ベクトルタイルマップ
乱暴に説明すると「GeoJSONを地図タイルみたいに分割して配信し、クライアント側で読み込んで表示するぜ！」という仕組みです。(今のところはGeoJSONが多いですが、いずれGeobufなど別のフォーマットで配信されるようになるかも)
地図タイルは静的なラスタ画像なので基本クライアント側でスタイルを弄ったりすることができません。どうしてもカスタマイズしたい場合は、自分で地図タイルサーバーを構築して動的に画像を生成する必要がありました。（Google Maps APIのようにある程度スタイルをカスタマイズできる機能を提供しているサービスや、読み込んだ画像をCanvasに転写したりCSS filterを使ってゴニョゴニョする方法もありますが、どれも限定的です）
ベクトルタイルであれば、「何を表示して何を表示しない」とかどんな色や模様で表示するとか全て自由に設定することができます。その表現力の高さは後述するTangramなどのサンプルから確認できます。
Vector tiles – OpenStreetMap Wiki
Vector Tiles Overview | Mapbox
Vector Tiles – D3 examle
国土地理院さんもベクトルタイルの配信をすでに開始されています。
ベクトルタイルの提供実験について｜国土地理院
gsi-cyberjapan/experimental_fgd
巨大なGeoJSONファイルを”クライアントサイドで”分割しベクトルタイル化するというライブラリ。
mapbox/geojson-vt
ジオビジュアライゼーション
今さらD3について説明はしませんが、もしD3にGeo機能が備わっていなかったら、今頃このブログはまったく違うジャンルになっていたことでしょう。フロントエンドエンジニアにCartographyという新たな武器をもたらした革命的なライブラリと言えるんじゃないかと個人的に断言します。
D3.js – Data-Driven Documents
D3以外で、最近ちょっと気になっているのが「Kartograph」です。pythonで作成された地理情報の処理や地図の作成を行うkartograph.pyと作成した地図をブラウザ上で表示するkartograph.jsがセットになったライブラリで公式のサンプルを見て分かる通り、とても綺麗な地図が描画できるっぽいので興味があるのですが手を出せていません。
Kartograph.org
地図クライアント
注目度が高いのはleafletでしょうか。高機能ゆえに巨大なOpenlayersに対して、小さくて小回りの利くLeafletは様々なプラグインとともに最近人気を集めています。多くのユーザーの手によってプラグインが作られていく様はまさにWeb地図界のjQueryといったところ、個人的にはD3と組み合わせやすいところがお気に入り。
Leaflet – a JavaScript library for mobile-friendly maps
OpenLayers 3 – Welcome
また、leafletをベースとした地図クライアントライブラリ「mapbox.js」を提供しているmapbox社が次期クライアントとして「mapxboxGL」を配信しています。
ベクトルタイルを読み込みWebGLを使って地図を表示するライブラリで動作がとても軽快です。
Mapbox GL | Mapbox
3D
「グーグル、Google Earthやめるってよ」というニュースが流れてからCesiumの注目度が一気に上がっています。WebGLを使って3D地球儀を表示するライブラリーですが、非常に多くの機能を備え利用者の増加とともにプラットフォームとしての存在感を増しています。日本では以前Google Earthで作成されていた「台風リアルタイム・ウォッチャー」などがCesiumに移行しています。
私は個人的に「三次元コワイ。二次元最高！」な人なのでまだあまりCesiumを使っていないのですが、実のところCesiumは3D地球儀以外にもフラットな2D地図表示モードなどもあるので、汎用的なweb地図クライアントとして利用することができます。
Cesium – WebGL Virtual Globe and Map Engine
Tangramは2.5次元地図クライアントです(嘘)
ベクトルタイルを読み込みWebGLを使って地図を表示するライブラリですが、その際GLSLを記述することで非常に柔軟なスタイリングが行えます。その表現力の高さは「Tangram Styles Sandbox」をご覧ください。GLSLの知識が必要となるのでハードルは高いですが、使いこなせれば思い通りのスタイリングが可能です。
Tangram, A Mapping Library · Mapzen
Tangram で国土地理院ベクトルタイル提供実験のデータを見る – 世界の測量
空間分析
やはりここはTurf.jsでしょう。Maxbox謹製の「もう全部JavaScriptでやろうぜ！」ライブラリ。決して数値計算にたけているとはいえないJavaScriptでもここまでできる！といわんばかりで、逆に「ほとんどの用途では、このぐらいの精度で十分でしょう？」という割り切りが心地よいライブラリですね。
こういうの好きです。
Turf.js
地理空間データ分析ライブラリ「turf.js」まとめ – NAVER まとめ
クラウドサービス
「個人で地図サーバーとか建てるの（n´Д｀）<ﾒﾝﾄﾞｸｻｲ」に答えてくれるサービス群であると同時に、それぞれの企業が今後のWeb地図の行き先を左右するプレイヤーでもあったりします。個人的にはバックエンドの地理情報データベースとしてSQLなどなじみのあるテクノロジーを利用できるCartoDBを使ってみたいななんて思っています。
Mapbox | Design and publish beautiful maps
Maps for the Web, made easy — CartoDB
Mapzen · an open-source mapping lab.
その他
Esriさんところの「ArcGIS API for JavaScript」も弄ってみたいのだけれど、どこまでが無料でどっからが有料なのかよくわからないので保留中。
Oculus + cesiumでヘッドマウントディスプレイを利用してCesiumを表示するcesium-vrなるプラグインも興味があるが、そもそもOculus持ってない。
その他にも、ここ最近話題のフレームワーク「angular.js」や「React.js」とかと地図クライアントライブラリやD3.jsを如何に組み合わせるか？などの技術情報も次から次へと流れてくるわけですが……流れの速さに付いていけていません orz
