位置情報付きjsonデータのヒートマップによる可視化失敗
flickrから集めた写真に関するジオタグなどの情報をクローリングして、jsonファイルにしたものを、ヒートマップで可視化する試みをしています。jsonファイルについては
{"bbox":[135.559,34.8749,135.8788,35.3212],"search":"kyoto","data":[
{"id":"4281151592","owner":"31676563@N05","secret":"d5a48deb7e","server":"2801","farm":3,"title":"Runner","ispublic":1,"isfriend":0,"isfamily":0,"dateupload":"1263712135","datetaken":"2010-01-17 13:17:14","datetakengranularity":"0","datetakenunknown":0,"ownername":"Teruhide Tomori","tags":["sports","japan","women","kyoto","running","京都","日本","nippon","runner","関西","ekiden","近畿","42195km","女子駅伝"],"latitude":"35.039483","longitude":"135.756855","accuracy":"15","context":0,"place_id":"vAd3SUZTUb5ktGbw","woeid":"2345871","geo_is_family":0,"geo_is_friend":0,"geo_is_contact":0,"geo_is_public":1,"url_sq":"https://farm3.staticflickr.com/2801/4281151592_d5a48deb7e_s.jpg","height_sq":75,"width_sq":75,"url_m":"https://farm3.staticflickr.com/2801/4281151592_d5a48deb7e.jpg","height_m":"333","width_m":"500","url_z":"https://farm3.staticflickr.com/2801/4281151592_d5a48deb7e_z.jpg","height_z":426,"width_z":"640","hit":["kyoto"],"area":0},
{"id":"4281207666","owner":"31676563@N05","secret":"9db15de6a9","server":"2790","farm":3,"title":"A runner","ispublic":1,"isfriend":0,"isfamily":0,"dateupload":"1263714441","datetaken":"2010-01-17 13:14:16","datetakengranularity":"0","datetakenunknown":0,"ownername":"Teruhide Tomori","tags":["sports","japan","women","kyoto","running","京都","日本","nippon","runner","関西","ekiden","近畿","42195km","女子駅伝"],"latitude":"35.039483","longitude":"135.757005","accuracy":"15","context":0,"place_id":"vAd3SUZTUb5ktGbw","woeid":"2345871","geo_is_family":0,"geo_is_friend":0,"geo_is_contact":0,"geo_is_public":1,"url_sq":"https://farm3.staticflickr.com/2790/4281207666_9db15de6a9_s.jpg","height_sq":75,"width_sq":75,"url_m":"https://farm3.staticflickr.com/2790/4281207666_9db15de6a9.jpg","height_m":"500","width_m":"333","url_z":"https://farm3.staticflickr.com/2790/4281207666_9db15de6a9_z.jpg","height_z":"640","width_z":427,"hit":["kyoto"],"area":0},
{}]}
といった形となっています。
ヒートマップについてはleafletと、Leaflet.heat(https://github.com/Leaflet/Leaflet.heat) を利用しています。
htmlファイルを開き、ファイルを選択して可視化させようとしたところ、コンソールには
data_array Object { d_array: Array[735] }
と出ておりヒートマップの描画に失敗しました。
heatLayerの引数には[[34.8749,135.559,0.5]]のような緯度、経度、ヒートマップの重み付けデータが入ります。その部分を今回はjsonデータ内のデータからもってきて、用意した配列に格納し引数として渡すという狙いでした。
以下コードです。よろしくお願いします。
document.getElementById('files').addEventListener('change', function (evt) {
var reader = new FileReader();
reader.onload = function (e) {
var src = {
max:45,
data:[]
};
var data_array = {
d_array:[]
};
var dataset = JSON.parse(e.target.result);
var east = Math.max(dataset.bbox[0],dataset.bbox[2]);
var west = Math.min(dataset.bbox[0],dataset.bbox[2]);
var north = Math.max(dataset.bbox[1],dataset.bbox[3]);
var south = Math.min(dataset.bbox[1],dataset.bbox[3]);
var cells = 50;
var grid = {};
document.getElementById("tag").innerHTML = "Search: "+dataset.search;
var range = Math.min(north - south, east - west) / cells;
dataset.data.forEach(function(item){
if(item.latitude && item.longitude) {
var lat = parseFloat(item.latitude);
var lng = parseFloat(item.latitude);
var weight = item.ispublic;
var sn = Math.floor((lat - south) / range);
var we = Math.floor((lng - west) / range);
if(grid[sn+"."+we]) {
grid[sn+"."+we]++;
} else {
grid[sn+"."+we]=1;
}
var da = {
lat:lat,
lng:lng,
weight:weight
};
var d = {
lat:lat,
lng:lng,
count: 1
};
src.data.push(d);
data_array.d_array.push(da);
}
});
console.log("L.heatLayer: ", L.heatLayer);
var heatmap = L.heatLayer(data_array,{
radius: range,
blur: 10,
maxZoom: 18,
}).addTo(map);
map.fitBounds([
[dataset.bbox[1],dataset.bbox[0]],
[dataset.bbox[3], dataset.bbox[2]]
]);
};
reader.readAsText(evt.target.files[0]);
});