Language
Login
Language Setting
X
English
日本語 [Japanese]
about this App
forked:横浜市営地下鉄乗降者数(平成23年度)
useful
0
Loading...
/* This is a Example program to retrieve and display the data. Press the Run button on the right of the screen (described the behavior of the Example program below). Please create a new application rewrite this program work. */ var all_data; // 表示する月の変数 var c_month; function initialize(){ all_data = new Array(); // データをLinkDataから取得 tmp_a_data = new Array(); $.each(LinkData.getWorks(), function(workKey, workValue) { //$("#result").append("<h3>Work: " + workValue + "</h3>"); $.each(LinkData.getFiles(workValue), function(fileKey, fileValue) { //$("#result").append("<h4>File: " + fileValue + "</h4>"); $.each(LinkData.getSubjects(workValue, fileValue), function(subjKey, subjValue) { var tmp_data = {} tmp_data["id"] = subjValue; $.each(LinkData.getProperties(workValue, fileValue), function(propKey, propValue) { //$("#result").append("<div style='padding-top:10px;'>Subject : " + subjValue + "</div>"); //$("#result").append("<div style='padding-left:10px;'>Property : " + propValue + "</div>"); //$("#result").append("<div style='padding-left:20px;'>Objects</div>"); $.each(LinkData.getObjects(workValue, fileValue, subjValue, propValue), function(objKey, objValue) { //$("#result").append("<div style='padding-left:30px;'>" + objValue + "</div>"); if(propValue == "http://www.w3.org/2000/01/rdf-schema#label"){ tmp_data["label"] = objValue; }else if(propValue == "http://www.w3.org/2003/01/geo/wgs84_pos#lat"){ tmp_data["lat"] = objValue; }else if(propValue == "http://www.w3.org/2003/01/geo/wgs84_pos#long"){ tmp_data["lng"] = objValue; }else if(propValue == "http://linkdata.org/property/rdf1s616i#jk_kubun"){ tmp_data["jk_kubun"] = objValue; }else if(propValue == "http://purl.obolibrary.org/obo/during"){ tmp_data["tuki"] = objValue; }else if(propValue == "http://linkdata.org/property/rdf1s616i#numberOfPassenger"){ tmp_data["numOfPassenger"] = objValue; } }); }); tmp_a_data.push(tmp_data); }); }); }); //全データ all_data = tmp_a_data; // 表示する月 初期値 c_month ="2011-04-01 00:00:00"; //地図の中心点 var myLatLng = new google.maps.LatLng(35.548569,139.584217); //センター南駅近く var myMap = new google.maps.Map(document.getElementById('result'), { zoom: 13, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, scrollwheel: false }); //サークルの設定 var cityCircle; var circleCenter; for (var i in all_data) { //月で条件絞り込み「2011-04-01 00:00:00」 //かつ、乗車と降車区分で、circleの色を変えてみる。降車はcircleずらす if ((all_data[i].tuki == c_month)&&(all_data[i].jk_kubun == "乗車")){ circleCenter = new google.maps.LatLng(all_data[i].lat,all_data[i].lng);// 緯度経度から中心点をつくる var passengerOptions = { fillColor: '#ff0000', // 塗りつぶし色 fillOpacity: 0.05, // 塗りつぶし透過度(0: 透明 ⇔ 1:不透明) map: myMap, // 表示させる地図(google.maps.Map) strokeColor: '#ff0000', // 外周色 strokeOpacity: 1, // 外周透過度(0: 透明 ⇔ 1:不透明) strokeWeight: 1 , // 外周太さ(ピクセル) center: circleCenter, // 中心点 radius: all_data[i].numOfPassenger/1000 // 半径(m) }; //cityCircle = new google.maps.Circle(passengerOptions); } else if ((all_data[i].tuki == c_month)&&(all_data[i].jk_kubun == "降車")){ //ずらす処理 tmp_lng = Number(all_data[i].lng); near_lng = tmp_lng + 0.003000; circleCenter = new google.maps.LatLng(all_data[i].lat,near_lng);// 緯度経度から中心点をつくる var passengerOptions = { fillColor: '#0000FF', // 塗りつぶし色 fillOpacity: 0.05, // 塗りつぶし透過度(0: 透明 ⇔ 1:不透明) map: myMap, // 表示させる地図(google.maps.Map) strokeColor: '#0000FF', // 外周色 strokeOpacity: 1, // 外周透過度(0: 透明 ⇔ 1:不透明) strokeWeight: 1 , // 外周太さ(ピクセル) center: circleCenter, // 中心点 radius: all_data[i].numOfPassenger/1000 // 半径(m) }; //cityCircle = new google.maps.Circle(passengerOptions); }//if toji cityCircle = new google.maps.Circle(passengerOptions); }; //for toji }; //initialize toji // スライダー、セレクトボックスで表示月の変更があった場合の処理 function monthChange(){ //sliderの値 var user_a = $("input:radio[name='answer']:checked").val(); //地図の中心点 var myLatLng = new google.maps.LatLng(35.548569,139.584217); //センター南駅近く var myMap = new google.maps.Map(document.getElementById('result'), { zoom: 13, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, scrollwheel: false }); //サークルの設定 var cityCircle; var circleCenter; for (var i in all_data) { //月で条件絞り込み「2011-04-01 00:00:00」 //かつ、乗車と降車区分で、circleの色を変えてみる。降車はcircleずらす if ((all_data[i].tuki == c_month)&&(all_data[i].jk_kubun == "乗車")){ circleCenter = new google.maps.LatLng(all_data[i].lat,all_data[i].lng);// 緯度経度から中心点をつくる var passengerOptions = { fillColor: '#ff0000', // 塗りつぶし色 fillOpacity: 0.05, // 塗りつぶし透過度(0: 透明 ⇔ 1:不透明) map: myMap, // 表示させる地図(google.maps.Map) strokeColor: '#ff0000', // 外周色 strokeOpacity: 1, // 外周透過度(0: 透明 ⇔ 1:不透明) strokeWeight: 1 , // 外周太さ(ピクセル) center: circleCenter, // 中心点 radius: all_data[i].numOfPassenger/1000 // 半径(m) }; //cityCircle = new google.maps.Circle(passengerOptions); } else if ((all_data[i].tuki == c_month)&&(all_data[i].jk_kubun == "降車")){ //ずらす処理 tmp_lng = Number(all_data[i].lng); near_lng = tmp_lng + 0.003000; circleCenter = new google.maps.LatLng(all_data[i].lat,near_lng);// 緯度経度から中心点をつくる var passengerOptions = { fillColor: '#0000FF', // 塗りつぶし色 fillOpacity: 0.05, // 塗りつぶし透過度(0: 透明 ⇔ 1:不透明) map: myMap, // 表示させる地図(google.maps.Map) strokeColor: '#0000FF', // 外周色 strokeOpacity: 1, // 外周透過度(0: 透明 ⇔ 1:不透明) strokeWeight: 1 , // 外周太さ(ピクセル) center: circleCenter, // 中心点 radius: all_data[i].numOfPassenger/1000 // 半径(m) }; //cityCircle = new google.maps.Circle(passengerOptions); }//if toji cityCircle = new google.maps.Circle(passengerOptions); }; //for toji }; // スライダーとセレクトボックスの設定 function sliderctl(){ //slider control var select = $( "#minbeds" ); var slider = $( "<div id='slider' ></div>" ).insertAfter( select ).slider({ min: 1, max: 12, range: "min", value: select[ 0 ].selectedIndex + 1, slide: function( event, ui ) { select[ 0 ].selectedIndex = ui.value - 1; //chrome dev tool用 //console.log(select[0].options[select[0].selectedIndex].value); c_month = select[0].options[select[0].selectedIndex].value; monthChange(); } }); $( "#minbeds" ).change(function() { slider.slider( "value", this.selectedIndex + 1 ); //chrome dev tool用 //console.log(this.options[this.selectedIndex].value); c_month = this.options[this.selectedIndex].value; monthChange(); }); }; window.onload = function() { $(function(){ initialize(); sliderctl(); }); };
<div><form id="reservation"> <label for="minbeds">2011年度グリーンライン乗降者数<small>---<font color="#FF0000">赤</font>:乗車数---<font color="#0000FF">青</font>:降車数</small></label> <select name="minbeds" id="minbeds"> <option value="2011-04-01 00:00:00">2011/4</option> <option value="2011-05-01 00:00:00">2011/5</option> <option value="2011-06-01 00:00:00">2011/6</option> <option value="2011-07-01 00:00:00">2011/7</option> <option value="2011-08-01 00:00:00">2011/8</option> <option value="2011-09-01 00:00:00">2011/9</option> <option value="2011-10-01 00:00:00">2011/10</option> <option value="2011-11-01 00:00:00">2011/11</option> <option value="2011-12-01 00:00:00">2011/12</option> <option value="2012-01-01 00:00:00">2012/1</option> <option value="2012-02-01 00:00:00">2012/2</option> <option value="2012-03-01 00:00:00">2012/3</option> </select> </form></div> <div id="result" style="width:100%; height:90%"></div>
Preview
Input Data
ReadMe
Snapshots
LinkData Work
Table Data
2011年度横浜市営地下鉄グリーンライン乗降者数
Contributor:松本豊
Update:Mar 3, 2013
585 Downloads, 2 Applications
横浜市営地下鉄グリーンラインの平成23年(2011)度各駅ごと乗降車人数。
yokohama_greenline_passenger
Add LinkData work(LinkData)
Link http://app.linkdata.org/run/app1s308i?tab=readme
Initial content
jquery-1.7.1.min.js
https://maps.googleapis.com/maps/api/js?sensor=false
http://code.jquery.com/jquery-1.9.1.js
http://code.jquery.com/ui/1.10.1/jquery-ui.js
Work
Add
Clear
insert work id or work name.