28832


flickrから集めた写真に関するジオタグなどの情報をクローリングして、jsonファイルにしたものを、ヒートマップで可視化する試みをしています。jsonファイルについては

[code]

    {"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},
    {}]}
    
[/code]

といった形となっています。

ヒートマップについてはleafletと、Leaflet.heat(<https://github.com/Leaflet/Leaflet.heat>)
を利用しています。

htmlファイルを開き、ファイルを選択して可視化させようとしたところ、コンソールには

[code]

    data_array Object { d_array: Array[735] }
    
[/code]

と出ておりヒートマップの描画に失敗しました。  
heatLayerの引数には[[34.8749,135.559,0.5]]のような緯度、経度、ヒートマップの重み付けデータが入ります。その部分を今回はjsonデータ内のデータからもってきて、用意した配列に格納し引数として渡すという狙いでした。

以下コードです。よろしくお願いします。

[code]

        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]);
    });
    
[/code]

  
  


CC BY-SA 3.0
2016-09-08T09:37:09.903
28764
2016-09-12T05:02:35.763
2016-09-08T12:47:04.820
16933
16933
question
javascript leaflet
位置情報付きjsonデータのヒートマップによる可視化失敗


自己解決しましたので、報告します。  
ヒートマップの描画に失敗していた件ですが、L.heatLayerの第1引数であるdata_arrayをdata_array.d_arrayとすることで描画できました。よく考えたら、配列の要素を追加するpushではdata_array.d_array.pushってしてるし描画の際の配列の参照もそれに従ってないとだめなのかなと思いました。（正しい理解なのか今も不安ですが・・・）


CC BY-SA 3.0
2016-09-12T05:02:35.763
28832
2016-09-12T05:02:35.763
16933
28764
answer