神奈川県横浜市

forked:横浜市営地下鉄乗降者数（平成２３年度）

横浜市営地下鉄乗降者数（平成２３年度4月〜翌年3月）を地図上に表示。追加の機能として、スライダーとセレクトボックスで表示月を変更できるようにしました。滑らかな変化を想像していましたが、完全にリロードの処理で残念。データもこのような表現に適していない気がしています。

評価指数

アプリケーション

Play
JavaScript
CSS
HTML
概要
保存した実行結果

/*
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 // 半径（ｍ）
	};
	//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 // 半径（ｍ）
	};
	//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 // 半径（ｍ）
		};
		//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 // 半径（ｍ）
			};
		//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();
    });	
};

Initial content

このアプリをForkして新しいアプリを作るダウンロード

このアプリ作品をwebから探す

作者メッセージ送信	松本豊
Fork元のアプリ	松本豊 's 横浜市営地下鉄乗降者数（平成２３年度）
実行回数	390
ウェブサイト
ライセンス
Fork count	0
作成日	2013年3月5日
最終更新日	2013年3月5日