D3.jsで緯度経度をクリックで取得

D3ではありがたいことに、緯度経度をgeoJSONやtopoJSONからpixel変換した位置でmousedownにて取得することも可能。

そのためには、
 projection.invert(point)
を使う。
https://github.com/mbostock/d3/wiki/Geo-Projections#invert
x,yを[x,y]の形で配列で返してくれる。

d3.mouse(this)でmouseクリック位置を取得してくれるので、これを使用。

ついでに、mouseクリックしたあたりに緯度経度を表示させたいので、
d3.event.pageXをつかってその位置に表示。

で、できたコードは以下のような感じです。
（緯度経度が非常に低い桁数まで表示されるので、toFixedで適当に丸めています。）

d3.select("svg").on("mousedown.log", function(d) {
   var latlon = svg.selectAll(".result");
   latlon.remove();
   var pointNow = projection.invert(d3.mouse(this));
   var fixedX = Number(pointNow[0]).toFixed(3);
   var fixedY = Number(pointNow[1]).toFixed(3);
   svg.append("text").attr("class","result").attr("x",d3.event.pageX ).attr("y",d3.event.pageY).text("results:" + fixedX+","+fixedY);
  });

地図情報をD3で使えるJSON形式に

地図情報をJSON形式にしてD3.js等で表示させるために、以下のページが参考になる。
http://ja.d3js.node.ws/blocks/mike/map/

そして、国土数値情報というサイトにデータがある。
http://nlftp.mlit.go.jp/ksj/
利用規約をよく読み、ダウンロード。

以下のページに非常に親切な解説があった。
http://blog.hitsuji.me/make-shape-file/
親切で感謝です。
こちらも参考になりました。
http://kshigeru.blogspot.jp/2013/03/d3-geojson-polygon.html

そして、以下のページは日本語にも訳されており、基本を網羅してくださっているページなので、とても大事。
http://ja.d3js.node.ws/blocks/mike/map/
勉強になります。（筆者はD3の開発者さんですね。）


で、国土地理院から.shpデータを落とし、
それを親切なサイトさんで紹介してあってインストールしたQGISにてgeoJSON形式に変換し、
terminalにてtopoJSONに変換して、表示。

が、中心座標をその県の中心座標にしないと表示が真っ白で「あれれ？」となりました。
中心座標を緯度経度で決め、表示スケールを決めてみると、無事表示されました。

よかった！

参考：QGIS入門

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

補足1：topojson -p N03_004 -o hokkaido_topo.json hokkaido.geojson
　といった形で、propertyをN03_004で市区町村データを保持してやり、-oでアウトプット。
　東京の場合は「区」のデータが抜けるので、N03_003も加えてある必要あり。
　topojson -p N03_004 -p N03_003 -o tokyo_topo.json tokyo.geojson

　複数県に渡る場合は、N03_001の県情報も加えてやる必要があるかもしれず、その場合はN03_001を加え、「d.properties.N03_001」などでアクセスすると吉。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

補足2：geoJSONを生成する際に、「OGR error:Failed to create GeoJSON datasource:」というようなエラーが出て悩みました。
単純に、「Save as」のところで「Browse」をクリックして、保存先フォルダを選ぶ必要があっただけでした。。。こちらのページが参考になりました。感謝。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

追記1：topoJSONに変換しても、頂点データ数が多すぎて表示が重いので、減らす方法を探すと、便利なサイトがありました！！
感激しました。。。
大感謝です。
http://www.mapshaper.org/

ここにgeoJSONやtopoJSONをアップするだけ。
そして、頂点数を減らしていくと、1.1MBだったファイルが65kBなどに。。。
すごいっす。
（私のsafariでは変換後のデータをDLできず、chromeではOKでした。）

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

追記2：command lineでtopoJSONに変換する際、ファイルサイズが大きいとrun out of memoryとなる。そこで解決策をググると、
https://github.com/mbostock/topojson/issues/71
こんなページがありました。
試してみます。。。

フリーの日本地図データ

無料で、商用利用も可能な日本地図の白地図データがあったのでリンクメモです。

http://www.freemap.jp/japan/ja_kouiki_japan_big_scale_3.html

illustratorで各都道府県をオブジェクト化し、svg形式にして使えば、
Raphaelでいけそう。


http://www.freemap.jp/about_use_map.html
に商用利用も、使用許諾が必要ない旨も書いてあります。

素晴らしい。。

（無料版は、各都道府県の境目処理が簡易的なので、その作業は必要そうですね。。それにしてもありがたい。）

マウス位置の取得と、動的表示。

jQueryで以下のようにすると、マウス位置を取得できて便利でした。
(http://api.jquery.com/mousemove/ 参照)

       $(function(){
            $("#canvas").mousemove(function(e){
            X=e.clientX;
            Y=e.clientY;
            });
        });

ラファエル上で取得した位置をグローバル変数で受け取り、以下のように使うと、動的に地図の場所名などが表示できて便利です。
        $("#"+state).css({display:"block",left:X,top:Y});

ラファエルの地図と同時に使っています。

Raphaelでクリッカブルマップ、やっと実装。

Raphaelで地図をクリッカブルにしようと思い、IE対策で苦労していた。
最終的に以下のフォーラム投稿が参考になったので、メモ。

http://groups.google.com/group/raphaeljs/browse_thread/thread/b2f6afcb16d06bbd/a2a1d338301f26c2?lnk=gst&q=map#a2a1d338301f26c2

st[0].onmouseup = function() {
      alert("");

};

のようにしてonmouseupで処理し、その中に実行したい関数を書けばOKだった。

(要するに、IEにおいては、attachEventしてのonclickやjQueryのclickでは、(on)mouseover ,mouseoutなどと並列処理ができなかったため、onmousedownかonmouseupにした、というわけです。）

RaphaelとGoogle map APIの融合ライブラリ（cartgrapher.js)

Raphaelをベースにし、Google map APIを使用して、
エリアごとの人口分布地図や、
ツイッターユーザーの分布などを表示させる、といったことができるライブラリが公開されていた。

http://cartographer.visualmotive.com/

すごい。

Raphaelでクリッカブルマップの参考になるサイト。

Raphaelを使ってクリッカブルマップを作ろうと思っていますが、
思っている通りのことを実現しているサイトがあったのでリンクメモです。
http://freejoblistings.ca/
（■追記：jsのソースを見ると、あまりに詳細で難解なので、現時点では無理だと判明。。
すごいな。）

以下のフォーラムで作者の人がクリッカブルなマップについて何か書いてるのでメモ。
http://groups.google.com/group/raphaeljs/browse_thread/thread/8406d083c5dcab65/d59a01dcd3c8130d?lnk=gst&q=freejoblistings#d59a01dcd3c8130d