Language
Login
Language Setting
X
English
日本語 [Japanese]
about this App
forked:faamo
useful
0
Loading...
if(typeof Application==="undefined"||!Application){var Application = {};} // map var map = null; // var cityMasterArray = null; var cityMarketArray = null; var cityObservationArray = null; // アプリケーションのビジネスロジック Application.faamo = function(){this.init();}; // faamoメイン Application.faamo.prototype = { // 初期化処理 init : function(){ this._loadStart(); var isSuccess = this._loadData(); if(!isSuccess){ this._loadError(); } else { this._loadEnd(); } }, // ロード時のローディング画面 _loadStart : function(){ console.log('now loading'); $('#main_contents').hide(); }, _loadEnd : function(){ $("#loading").delay(600).fadeOut(700); $('#main_contents').show(); console.log('load success'); }, _loadError : function(){ alert('load error'); }, // データロード _loadData : function(){ var application = new Application.faamo.LinkData(); // // if(this.isEmpty(cityMaster)){ cityMasterArray = application.getDataResult('city_master'); // } // // if(this.isEmpty(cityMarket)){ cityMarketArray = application.getDataResult('city_market'); // } // // if(this.isEmpty(cityObservation)){ cityObservationArray = application.getDataResult('city_observation'); // } return true; }, }; // LinkData関連 Application.faamo.LinkData = function(){}; Application.faamo.LinkData.prototype = { /** * 指定ファイル内のデータを取得 * @param dataname 取得するデータソースのファイル名 * @result データソースファイル内の全データの配列 */ getDataResult : function(dataname){ var resultArray = null; $.each(LinkData.getWorks(), function(wKey, workId){ $.each(LinkData.getFiles(workId), function(fKey, filename){ if(filename == dataname){ $.each(LinkData.getSubjects(workId, filename), function(sKey, subject){ if(resultArray == null) resultArray = new Array(); var objArray = []; $.each(LinkData.getProperties(workId, filename), function(pKey, property){ var obj = LinkData.getObjects(workId, filename, subject, property); var prop = property.split('#')[1]; objArray[prop] = obj[0]; }); resultArray.push(objArray); }); } }); }); return resultArray; } }; Application.faamo.Draw = function(){this._init();}; Application.faamo.Draw.prototype = { _init : function(){ }, drawMap : function(){ var latlng = new google.maps.LatLng(39, 138); var opts = { zoom: 2, mapTypeId: google.maps.MapTypeId.SATELLITE, center: latlng }; map = new google.maps.Map(document.getElementById("map"), opts); for(var i = 0; i < cityMasterArray.length; i++){ var cityData = cityMasterArray[i]; var markerOpt = new google.maps.Marker({ position: new google.maps.LatLng(cityData.lat, cityData.long), map: map, icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png' }); this._plotMarker(markerOpt, cityData); } }, _plotMarker : function(markerOpt, cityData){ var marker = new google.maps.Marker(markerOpt); var instance = this; google.maps.event.addListener(marker, 'click', function(event){ // popup表示 instance._showInfoWindow(markerOpt, cityData); // グラフの表示 instance._drowChart(cityData); // クリックしたマーカーのクラスを作る var heatmapData = new Array(); var cityCluster = cityData.cluster; cityMasterArray.forEach(function(cityMaster, idx){ // console.log(cityMaster.cluster + ' == ' + cityCluster); if(cityMaster.cluster == cityCluster){ // console.log(' -> match!!!!!'); // heatmap表示 heatmapData.push(new google.maps.LatLng(cityMaster.lat, cityMaster.long)); } }); var heatmap = new google.maps.visualization.HeatmapLayer({ data: heatmapData, radius:25 }); heatmap.setMap(map); }); marker.setMap(map); }, _openInfoWindow : null, _showInfoWindow : function(marker, cityData){ console.log('openwindow: ' + this._openInfoWindow); if (this._openInfoWindow) { this._openInfoWindow.close(); } this._openInfoWindow = new google.maps.InfoWindow({ content: this._buildHtmlMarketData(cityData) }); google.maps.event.addListener(this._openInfoWindow,'closeclick',function(){ this._openInfoWindow = null; }); this._openInfoWindow.open(marker.getMap(), marker); }, _buildHtmlMarketData : function(cityData){ var html = ''; var marketData = null; cityMarketArray.forEach(function(cityMarket, idx){ if(cityData.label == cityMarket.label){ marketData = cityMarket; return; } }); if(marketData == null) return null; html = cityData.city_name + '(' + cityData.country_name + ')<br />' + '人口増加予測:' + marketData.population_2013 + '(2013年) → ' + marketData.population_2030 + '(2030年予測)<br />' + '物価:' + '<img src="" />米:' + marketData.price_rice + '円(1Kgあたり)<br />' + '<img src="" />オレンジ:' + marketData.price_orange + '円(1Kgあたり)<br />' + '<img src="" />レタス:' + marketData.price_lettuce + '円(1玉あたり)<br />' + '主要品目:' + marketData.crop_rank1 + '、' + marketData.crop_rank2 + '、' + marketData.crop_rank3 + '、' + marketData.crop_rank4 + '、' + marketData.crop_rank5 + '、'; return html; }, _drowChart : function(cityData){ var parentNode = document.getElementById('charts'); $('#charts').empty(); var dataType = new Array(); dataType[0] = {type: 'ndvi', str: '植生分布密度指標'}; dataType[1] = {type: 'olst', str: '地表面温度'}; dataType[2] = {type: 'par', str: '光合成有機放射量'}; dataType[3] = {type: 'smc', str: '土壌水分量'}; for(var i = 0; i < dataType.length; i++){ var dataArray = this._createDataArray(cityData.label, dataType[i].type); var sourceData = [['月', dataType[i].str]].concat(dataArray); console.log('dataArray: ' + sourceData); var options = { title: dataType[i].str }; var childNode = document.createElement('div'); childNode.setAttribute('id', dataType[i].type); parentNode.appendChild(childNode); var chart = new google.visualization.LineChart(childNode); chart.draw(google.visualization.arrayToDataTable(sourceData), options); } }, _createDataArray : function(cityCode, dataType){ var dataArray = null; cityObservationArray.forEach(function(obs, idx){ if(dataArray == null) dataArray = new Array(); if(cityCode == obs.City_ID){ var data = 0; if(dataType == 'ndvi') data = obs.ndvi; if(dataType == 'olst') data = obs.olst; if(dataType == 'par') data = obs.par; if(dataType == 'smc') data = obs.smc; dataArray.push([parseInt(obs.month), parseFloat(data)]); } }); return dataArray; } }; google.load("visualization", "1", {packages:["corechart"]}); var application = new Application.faamo(); var draw = new Application.faamo.Draw(); google.setOnLoadCallback(draw.drawMap());
/* global */ #container { background: #FFF; padding: 10px 100px 10px 10px; font-size: 14px; min-width: 980px; } /* top */ #title { margin: 10px 0; } #title #logo-img { float: left; width: 70px; margin-right: 10px; } #title h1 { color: #41adc0; font-size: 1.6em; margin: 0; font-weight: normal; } #title h3 { color: #41adc0; font-size: 1.1em; margin: 0; font-weight: normal; } /* application */ #map { min-width: 700px; max-width: 1000px; height: 450px; }
<div id="container"> <div id="title"> <img id="logo-img" src="http://app.linkdata.org/asset/9ed92ef7.png" /> <img src="http://app.linkdata.org/asset/d021b18e.png" width="300" height="100" /> <h3>気候の似ている都市を探せるシステム</h3> </div> <div id="application"> <div id="loading"> <img src="http://app.linkdata.org/asset/e1c6626d.png"/> </div> <div id="main_contents"> <div id="map">map</div> <div id="charts"></div> </div> </div> </div>
Preview
Input Data
ReadMe
Snapshots
LinkData Work
Table Data
Faamo
Contributor:Sayoko Shimoyama
Update:Apr 13, 2014
1039 Downloads, 3 Applications
city_market
city_master
city_observation
Add LinkData work(LinkData)
Link http://app.linkdata.org/run/app1s627i?tab=readme
jquery-1.7.1.min.js
https://www.google.com/jsapi
http://maps.googleapis.com/maps/api/js?sensor=false&v=3&language=ja&libraries=visualization
Work
Add
Clear
insert work id or work name.