読者です 読者をやめる 読者になる 読者になる

TileMill+UTFGrid+Leafletで地球を物色する

【音量注意】

貴方は宇宙人です。貴方の仕事は地球を侵略する事です。
さあ、この地図(http://monomoti.daa.jp/invadermap)で最も効果的な攻撃目標を探すのです。
"SEARCH"をクリックしてパン&ズームすれば、地図が音で目標を知らせてくれるので、新人の貴方でも大丈夫。
あ、いうまでもない事ですが、意識の高い宇宙人はIEOPERAは使わないのですよ。FireFoxSafariChromeしか認めません。いいですね?

中国の鳴りが良い

しょうもないものを作ってすみません...が一応ご説明します。
TileMillの白地図レイヤ(country)で生成されるUTFGrid*1をLeafletで参照して、地図の中心緯経度のPOP_EST属性の値を基に音の高低差を付けています。
UTFGridを使うなら本当はmapbox.jsでやるのがいいと思ったのですが、ヘタレな僕は任意の座標のグリッドの取得方法で若干ハマりそうだったので、LeafletのUTFGridプラグインhttps://github.com/danzel/Leaflet.utfgrid)を利用して、下記の様にしてみました。

	var map = utfGrid._map,
	    point = map.project(latlng),
	    tileSize = utfGrid.options.tileSize,
	    resolution = utfGrid.options.resolution,
	    x = Math.floor(point.x / tileSize),
	    y = Math.floor(point.y / tileSize),
	    gridX = Math.floor((point.x - (x * tileSize)) / resolution),
	    gridY = Math.floor((point.y - (y * tileSize)) / resolution),
		max = map.options.crs.scale(map.getZoom()) / tileSize;

	x = (x + max) % max;
	y = (y + max) % max;

	var data = utfGrid._cache[map.getZoom() + '_' + x + '_' + y];
	if (!data) {
		return { latlng: latlng, data: null };
	}

	var idx = utfGrid._utfDecode(data.grid[gridY].charCodeAt(gridX)),
	    key = data.keys[idx],
	    result = data.data[key];

来年の抱負

来年は、勤め先ではFOSS4Gツールを導入して作業を効率化し、個人的にはid: kochizufanさんの歴史国土や地図タイル工法協会で勉強させてもらって、ジオ充を目指します。

明日は、Noといえる男@Say_noさんです!

当エントリは、 FOSS4G Advent Calendar 2012 の12/19分として投稿したものです。ぜひ他の方のエントリも御覧下さい。

*1:本当は、id:tmizu23さんのラブリーなツールtile2utfgridを使って、標高で音を鳴らす「地図オルゴール」にしたかったのですが、OFF4Gのあとなかなか酒が抜けず、時間切れになりまして...orz