グローバル都市マッチングシステム｜Mash up the Linked Open Data

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

if(typeof Application==="undefined"||!Application){var Application = {};}

// 
var cityData = [];	// 都市データ
// 降水量、土壌水分量、積雪深は以下のようなデータ構造
// [dataType:dataType, data:[cityCode: cccccc, dataList:[{month:YYYYMM, data:xxxxxx}]]]
var dataMap = [];
// 類似データ
// [cityCode: ccccc, data: [{type: ttttt, data: sssssss}]]
var similarityDataMap = [];

// map
var map = null;

// アプリケーションのビジネスロジック
Application.lc = function(){this.init();};

Application.lc.prototype = {
	// 初期化処理
	init : function(){
		this.loadData();
	},
	// データロード
	loadData : function(){
		var application = new Application.lc.LinkData();
		var cityDataArray = application.getLinkDataResult('world_city');
		cityData = this._structCityData(cityDataArray);
		
		var preDataArray = application.getLinkDataResult('precipitation');
		dataMap.push({dataType: 'precipitation', data: this._structPreData(preDataArray)});
		var smcDataArray = application.getLinkDataResult('soil_moisture_content');
		dataMap.push({dataType: 'soil_moisture_content', data: this._structSmcData(smcDataArray)});
		var sndDataArray = application.getLinkDataResult('snow_depth');
		dataMap.push({dataType: 'snow_depth', data: this._structSndData(sndDataArray)});

for(var i = 0; i < dataArray.length; i++){
			var bigger = i;
			for(var j = i + 1; j < dataArray.length; j++){
				if(dataArray[bigger].data[0] < dataArray[j].data[0]){
					bigger = j;
				}
			}
			var data = dataArray[i];
			dataArray[i] = dataArray[bigger];
			dataArray[bigger] = data;
		}
		
		return dataArray;
	}
};

// LinkData関連
Application.lc.LinkData = function(){};

Application.lc.LinkData.prototype = {
	/** 
	 * 指定ファイル内のデータを取得
	 * @param dataname 取得するデータソースのファイル名
	 * @result データソースファイル内の全データの配列
	 */
	getLinkDataResult : 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.push({key: prop, data: obj});
						});
						resultArray.push(objArray)
					});
				}
			});
		});
		return resultArray;
	}
};

Application.lc.Draw = function(){this._init();};

Application.lc.Draw.prototype = {
	_init : function(){
		//google.maps.event._setCityBox = this._setCity;
	},

drawMap : function(cityData){
		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);
		
		this._plotMarker(map, cityData, '|AFAFFF|000000');
	},
	
	_markerArray : new Array(),

_plotMarker : function(map, mapDataList, markerIcon){
		for(var i = 0; i < mapDataList.length; i++){
			var cityData = {};
			cityData.cityCode = mapDataList[i].cityCode;
			for(var mi = 0; mi < mapDataList[i].data.length; mi++){
				if(mapDataList[i].data[mi].key == 'city_name_ja') cityData.cityName = mapDataList[i].data[mi].data;
				if(mapDataList[i].data[mi].key == 'country_ja') cityData.countryName = mapDataList[i].data[mi].data;
				if(mapDataList[i].data[mi].key == 'lat') cityData.lat = mapDataList[i].data[mi].data;
				if(mapDataList[i].data[mi].key == 'long') cityData.lng = mapDataList[i].data[mi].data;
			}
			this.attachMarker(map, cityData, markerIcon);
		}
	},
	
	
	_openInfoWindow : null,

attachMarker : function(map, cityData, iconInfo){
		var markerOpt = null;
		if(iconInfo == null){
			markerOpt = {
				position: new google.maps.LatLng(cityData.lat, cityData.lng),
				map: map,
			};
		} else {
			markerOpt = {
				position: new google.maps.LatLng(cityData.lat, cityData.lng),
				map: map,
				icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + iconInfo
			};
		}
		var marker = new google.maps.Marker(markerOpt);

resetMarker : function(selectCityCode, selectDataType){
		this.clearMarker();
		
		var simiDatasourceName = this._getSimilarityDatasource(selectDataType);
		
		var cityDataArray = null;
		for(var mi = 0; mi < similarityDataMap.length; mi++){
			if(similarityDataMap[mi].cityCode == selectCityCode){
				if(cityDataArray == null) cityDataArray = new Array();
				cityDataArray.push({cityCode: similarityDataMap[mi].cityCode, data: similarityDataMap[mi].cityData});
				for(var di = 0; di < similarityDataMap[mi].data.length; di++){
					if(similarityDataMap[mi].data[di].type == simiDatasourceName){
						for(var si = 0; si < similarityDataMap[mi].data[di].data.length; si++){
							// データ内の都市コードの座標を取得
							for(var ci = 0; ci < cityData.length; ci++){
								if(similarityDataMap[mi].data[di].data[si].key == cityData[ci].cityCode){
									cityDataArray.push(cityData[ci]);
								}
							}
						}
					}
				}
			}
		}
		
		
		for(var i = 0; i < cityDataArray.length; i++){
			var convData = {};
			convData.cityCode = cityDataArray[i].cityCode;
			for(var mi = 0; mi < cityDataArray[i].data.length; mi++){
				if(cityDataArray[i].data[mi].key == 'city_name_ja') convData.cityName = cityDataArray[i].data[mi].data;
				if(cityDataArray[i].data[mi].key == 'country_ja') convData.countryName = cityDataArray[i].data[mi].data;
				if(cityDataArray[i].data[mi].key == 'lat') convData.lat = cityDataArray[i].data[mi].data;
				if(cityDataArray[i].data[mi].key == 'long') convData.lng = cityDataArray[i].data[mi].data;
			}
			
			var markerStyle = '|AFAFFF|000000';
			if(i == 0) markerStyle = null;
			if(i >= 1 && i <= 4) markerStyle = i + '|FFAFAF|000000';
			if(i >= 5 && i <= 6) markerStyle = i + '|FF8C00|000000';
			if(i >= 7 && i <= 8) markerStyle = i + '|FAFFFA|000000';
			if(i >= 9 && i <= 10) markerStyle = i + '|77FF77|000000';
			this.attachMarker(map, convData, markerStyle);
		}
		
		
		
//		this._markerArray = new Array();
//		this._plotMarker(map, cityDataArray, '|FFAFAF|000000');

this._markerArray.forEach(function(marker, idx){
			marker.setMap(map);
		});
	},
	
	clearMarker : function(){
		this._markerArray.forEach(function(marker, idx){
			marker.setMap(null);
		});
	},

drawChart : function(selectCityCode){
		var dataList = this._getDataList(selectCityCode);
		if(dataList == null || dataList.length == 0){
			console.log('気象データがありません');
			return;
		}

google.load("visualization", "1", {packages:["corechart"]});

var application = new Application.lc();
var draw = new Application.lc.Draw();
google.setOnLoadCallback(draw.drawMap(cityData));

function _setCityBox(cityCode, cityName, countryName){
	var countryNameBox = $('#country_name');
	var cityCodeBox = $('#city_code');
	countryNameBox.empty();
	cityCodeBox.val('');
	countryNameBox.append(cityName + '(' + countryName + ')');
	cityCodeBox.val(cityCode);
}
// 都市選択ボックスのクリア
$('#city_clear').click(function(event){
	var countryName = $('#country_name');
	countryName.empty();
	countryName.append('都市名, 国名');
	$('#city_code').val('');
});

// 
$('#apply').click(function(){
	draw.clearChart();
	
	var cityCode = $('#city_code').val();
	var checkedDataTypeList = draw.getCheckDataTypeList();
	var dataType 
	draw.drawChart(cityCode);
	draw.resetMarker(cityCode, checkedDataTypeList);
});

// checkbox styling

$(function(){
	$('img.checked').hide();
	$('#param_check label').toggle(
		function () {
			$(this).addClass('checked').prev('input').attr('checked','checked');
			$(this).find('img.default').hide();
			$(this).find('img.checked').show();
		},
		function () {
			$(this).removeClass('checked').prev('input').removeAttr('checked');
			$(this).find('img.default').show();
			$(this).find('img.checked').hide();
		}
	);
});

/* 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 */

#preference {
	float: left;
	width: 280px;
	height: 450px;
	background: #41adc0;
	color: #FFF;
	position: relative;
}

#preference #step1, #preference #step2 {
	margin-bottom: 20px;
}

#preference .caption, #preference #apply {
	background: #FFF;
	color: #41adc0;
	margin: 5px;
	padding: 3px 10px;
	font-family: impact;
	font-size: 1.3em;
	border: 0px;
	letter-spacing: 1px;
}

#preference .comment {
	text-align: center;
	padding: 10px 10px 0 10px;
	margin: 0;
}

#preference .city-name p {
	border: solid 1px #FFF;
	margin: 10px;
	padding: 5px 10px;
	position: relative;
}

#preference .city-name img {
	width: 12px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

#preference #param_check input {
	display: none;
}

#preference #param_check label {
	border: dashed 1px #FFF;
	display: block;
	padding: 5px 10px;
	margin: 10px;
	line-height: 24px;
	cursor: pointer;
	position: relative;
}

#preference #param_check label.checked {
	background: #FFF;
	color: #41adc0;
}

#preference #param_check img {
	width: 22px;
	float: left;
	margin: 0 15px 0 5px;
}

#preference #param_check img.checkmark {
	position: absolute;
	top: 6px;
	right: 0px;
}

#preference #apply {
	width: 260px;
	cursor: pointer;
	border-radius: 5px;
	height: 40px;
	margin: 10px;
	position: absolute;
	bottom: 0;
	left: auto;
	right: auto;
}

#map {
	min-width: 700px;
	max-width: 1000px;
	height: 450px;
}

#chart {
	max-width: 1280px;
}

<div id="container">
	<div id="title">
		<img id="logo-img" src="http://app.linkdata.org/asset/e98a2897.png" />
		<h1>グローバル都市マッチングシステム</h1>
		<h3>気候の似ている都市を探せるシステム</h3>
	</div>
	<div id="application">
		<div id="preference">
			<div id="step1">
				<p class="caption">Step-1</p>
				<p class="comment">地図上のピンをクリックして<br>都市を選択してください</p>
				<div class="city-name">
					<p>
						<span id="country_name">都市名, 国名</span>
						<input type="hidden" name="city_code" id="city_code" />
						<img id="city_clear" src="http://app.linkdata.org/asset/58a688c2.png" />
					</p>
				</div>
			</div>
			<div id="step2">
				<p class="caption">Step-2</p>
				<p class="comment">マッチングに利用するデータを<br>選択してください</p>
				<div id="param_check">
					<input type="checkbox" name="dataType" id="prc" value="precipitation" />
					<label for="prc">
						<img class="default" src="http://app.linkdata.org/asset/89b02c7c.png" />
						<img class="checked" src="http://app.linkdata.org/asset/3970e3c1.png" />
						<img class="checked checkmark" src="http://app.linkdata.org/asset/3fae30b1.png" />
						降水量</label>
					<input type="checkbox" name="dataType" id="snd" value="snow_depth" />
					<label for="snd">
						<img class="default" src="http://app.linkdata.org/asset/a127a38e.png" />
						<img class="checked" src="http://app.linkdata.org/asset/52e62f47.png" />
						<img class="checked checkmark" src="http://app.linkdata.org/asset/3fae30b1.png" />
						積雪深</label>
					<input type="checkbox" name="dataType" id="smc" value="soil_moisture_content" />
					<label for="smc">
						<img class="default" src="http://app.linkdata.org/asset/508384a7.png" />
						<img class="checked" src="http://app.linkdata.org/asset/da6dd986.png" />
						<img class="checked checkmark" src="http://app.linkdata.org/asset/3fae30b1.png" />
						土壌水分量</label>
				</div>
			</div>
			<input type="button" name="apply" id="apply" value="apply" />
		</div>
		<div id="map">map</div>
		<div id="chart"></div>
		
	</div>
</div>