「javascript / Ajax / Google Apps」カテゴリーアーカイブ

javascriptとjQuery、Googleマップやスプレッドシートを使うTips。ちょっとした社内ツールなど。

八王子市のオープンデータを使ってみる

公開されたデータを試しに使ってみました。マーカーのマウスオーバーで施設名が表示され、クリックで詳細をポップアップします。

上の地図は次の手順で表示しています。

1.八王子市のCSVデータを読み込む
2.マーカー部分のAjaxを作成する
3.Googleマップとマーカーを表示する

オープンデータは保存せず、表示の都度、八王子市のサーバーから読み込みます。何かのノウハウを持っていたり、自分独自のデータがあれば2の処理で組み合わせます。オープンデータ、サーバ上の処理、クライアントの表示、という3階層イメージで構築すると柔軟かと思います。

データはここ↓から読み込みます。
http://www.city.hachioji.tokyo.jp/open_data/044899.html
利用時間や開館曜日が文字列なのがともかく残念です。これでは「今利用できる施設だけを表示」というようなプログラムが簡単には作れません。ソフトウェア技術者が、というかコンピュータシステムが使い易い形にしないともったいないですね。

ソースコードです。CSSもphpも一つのファイルにしました。ご参考まで。

以上です。