新しい地図サービスが始まったとき、誰もが気になるのは「この地図サービスでD3.jsは使えるのだろうか？」という点でしょう。心配ありません。駅すぱあと路線図でD3.jsは使えますよ！ 日本全国シームレスな鉄道路線図API「駅すぱあと路線図」、ヴァル研究所が無償提供を開始 駅すぱあと路線図APIのアクセスキーを取得したので、さっそく遊んでみました。 とりあえず、D3を使うまでの解説を載せておきます。 ※ exampleはフリープランを利用して作成しているため1日100セッションを越えると動作しなくなります。 ゲットスタート 駅すぱあと路線図APIは、汎用地図ライブラリのleaflet.jsを利用しているとのことなので、まずはベーシックなサンプルを作成してD3.jsを使うのに必要となるオブジェクトにアクセスできるか確認します。 開発用のドキュメントやサンプルコードは下記ページにて公開されています

「全国のガソリンスタンドの位置を地図上にプロットしてみた。」で作成したバイナリベクトルタイルの作業工程メモです。 バイナリベクトルタイルとは 巨大なGeoJSONを分割しタイル化することで必要な情報だけを読みだして地図上に表示します。さらに分割したGeoJSONをバイナリファイルにすることでオーバーヘッドを減らしています。 バイナリベクトルタイル出会うまでの私 １．GeoJSON爆誕 「フロントエンドエンジニアでも簡単に地理情報を扱えるJSON形式の規格考えたよ！」 「素晴らしい！」 ２．TopoJSON誕生 「GeoJSON重くない？　もっと効率のいい規格作った！」 「最高！」 ３．ベクトルタイル到来 「GeoJSONを地図タイルみたいに分割して配信すればいいじゃないか！」 「なるほど。」 ４．バイナリベクトルタイル降臨　＜ー いまここ 「シリアライズしてバイナリファイルで配信すればより

大量のデータを地図上にマッピングする練習として、国土数値情報から取得した平成２７年の「燃料給油所データ」をすべて地図上にプロットしてみました。 密度の高い地域と、周囲に全然ガソリンを給油できる場所が見当たらないような地域などが見えて、なかなか面白いですね。 demo 全部で、77,657�件のポイントデータになるためGeoJSONにして掲載すると重くて地図が動きません。 以前、D3.jsとcanvasを使って全国の病院位置を地図上にマッピングしてみたことがありますが、動作が遅く他の地図情報(背景地図など)と組み合わせて表示するのは難しそうでした。 【D3.js】約97,000件の位置情報を地図にプロットしてみた。 そこで今回はバイナリベクトルタイルという技術を使って地図上にマッピングいてみました。 割と現実的に許容できる重さになったかなと思います。 詳しい作業工程については別記事にしてあり

Web地図の歴史というのは Google Maps 登場以前と登場後に分けられるのですが、2015年現在、まさにGoogle Maps登場と同じぐらいの変革がWeb地図の世界に訪れているのではないか？ と勝手に思っているので自分の観測範囲内でまとめてみました。 概要 簡単に要点をまとめると、CanvasとかSVGとかWebGLとかブラウザ周りの表現力の進化がWeb地図にも影響を及ぼしていて、そこにGeoJSONのようなそれまでGISなどに疎かったフロントエンドエンジニアにも気軽に扱うことができるフォーマットが普及し始めたことと、降って湧いたようなデータビジュアライゼーションブームなどによって爆発的にエコシステムが増殖し、さらにフロントエンド回りの新技術、仮想DOMとか Web Components とかFRPだとかもろもろいろいろ絡まってよくわからないけど地味に凄いことになっています。 G