Torisugariの日記: 地図とHTML Canvas
スラッシュドット(J)で紹介されていた国土地理院の試験運用地図サービスは良くできていてびっくりさせられます。例えば、『国土地理院』を検索すると、緯度経度はもちろん、きちんとセンタリングまでしてくれています(国土地理院の検索結果)。
それで、一歩進んで、「この地図にどうやって落書きするのか」という話になった時、その解決策の一つがcanvasではないか、と思っているわけです。ウェブ上の用途の場合、2万5000分の1の4分割でも広すぎる場合がほとんどで、何らかのカタチでハイライト(というか、文字通りスポットライト)を表現できた方が、ずっと見るのが楽になるでしょうから。
というわけで、いろいろ遊んでみました。
canvasで地図上の矩形(国土地理院)をハイライトさせる
canvasで地図上の任意の点をハイライトさせる (URLで座標指定)
canvasで地図上の任意の点をハイライトさせる(左側のクリッカブルマップをクリックしてみてください)
canvasで国土地理院から国立防災科学研究所への道のりを示す
上のやつは、画像上の座標をURLの引数等のベースにしているなんちゃって実装なんですが、世間的に通用させるには、きちんと緯度・経度を元にハイライトを入れられるようにしないといけないでしょうね。これくらいのレベルでも夏休みの自由研究で作ったりすると、楽しいとは思います。逆に、緯度・経度さえしっかり対応できていれば、Microformats世代のサービスとして戦う力がある、と胸を張って言えるのではないでしょうか。
ところで、canvasはIE以外では大抵実装されているはずなんですが、IEでは、http://excanvas.sourceforge.net/があれば大丈夫、でしょうかね。
地図とHTML Canvas More ログイン