防災　横須賀｜Mash up the Linked Open Data

about this App

防災　横須賀

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

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

var data = {};
data.limit = 1;
data.count = 0;
data.workIds = [];
data.fileNames = [];
data.subjects = [];
data.properties = [];

Example.getWorks = function() {
	var callback = function(res) {
	console.log("ugoiteru?");
		$.each(res, function(key, workId) {
			data.workIds.push(workId);
		});
		
		$.each(data.workIds, function(key, workId) {
			console.log(workId);
			Example.getFiles(workId);
		});
	}
	LinkData.getWorks(callback);
};

Example.getFiles = function(workId) {
	var callback = function(res) {
		$.each(res, function(fileKey, fileName) {
			console.log(workId + "," + fileName);
			Example.getSubjects(workId, fileName);
		});
	}
	LinkData.getFiles(workId, callback);
};

Example.getSubjects = function(workId, fileName) {
	var callback = function(res) {
		$.each(res, function(subjectKey, subjectValue) {
			data.subjects.push(subjectValue);
		});
		
		Example.getProperties(workId, fileName);
	}
	
	LinkData.getSubjects(workId, fileName, callback);
};

Example.getProperties = function(workId, fileName) {
	var callback = function(res) {
		$.each(res, function(propertyKey, propertyValue) {
			data.properties.push(propertyValue);
		});
		
		Example.getObjectList(workId, fileName);
	}
	LinkData.getProperties(workId, fileName, callback);
};

Example.getObjectList = function(workId, fileName) {
	$.each(data.subjects, function(sKey, sValue) {
		data.count = 0;
		$.each(data.properties, function(pKey, pValue) {
			if(data.count++ > data.limit) {
				return false;
			}
			Example.getObjects(workId, fileName, sValue, pValue);
		});
	});
}

Example.getObjects = function(workId, fileName, subject, property) {
	var callback = function(res) {
		$("#result").append("<div style='padding-top:10px;'>Subject : " + subject + "</div>");
		$("#result").append("<div style='padding-left:10px;'>Property : " + property + "</div>");
		$("#result").append("<div style='padding-left:20px;'>Objects</div>");
		console.log("test1" + res);
		$.each(res, function(objectKey, objectValue) {
			console.log("test2" + objectKey + "," + objectValue);
			$("#result").append("<div style='padding-left:30px;'>" + objectValue + "</div>");
		});
	}
	LinkData.getObjects(workId, fileName, subject, property, callback);
};

window.onload = function() {
	initialize();
	//Example.getWorks();
	
}

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
}

#shelter_infowindow_class {
   width: 400px;
   height: 350px;
        font-size:10pt;
        overflow: hidden;
}

#map_canvas {
        width: 100%;
        height: 100%;
}

#user-window {
        position: absolute;
        color: #ffffff;
        top: 0px;
        right: 50px;
        width: 220px;
        border-radius: 3px;
        font: 12px sans-serif;
        font-weight: bold;
        padding: 0px;
        text-align: right;
}

#current {
        height: 20px;
        width: 140px;
        font-size: 10px;
        resize: none;
        overflow: hidden;
}

#shelter {
        height: 20px;
        width: 140px;
        font-size: 10px;
        resize: none;
        overflow: hidden;
}

#water-level-windowclass {
        width: 370px;
        height: 250px;
        font-size:8pt;
        overflow: hidden;
}

#water-level-area-windowclass {
        width: 480px;
        height: 500px;
        font-size:8pt;
        overflow: hidden;
}

#livecam-windowclass {
        width: 200px;
        height: 60px;
        font-size:8pt;
        overflow: hidden;
}

#rainfall-windowclass {
        width: 370px;
        height: 400px;
        font-size:8pt;
        overflow: hidden;
}

#rainfall-area-windowclass {
        width: 480px;
        height: 500px;
        font-size:8pt;
        overflow: hidden;
}

.open_menu{

background-color: rgba(0,0,0,0.6);
        color: #fff;
        font: 10px sans-serif;
        cursor: pointer;
        width:50px;
        padding: 2px;
        text-align: center;
}
#slideBox_menu{
         text-align: left;
        width: 230px;
        padding: 10px;
        border: 1px #ccc solid;
        display:none;
}

.open1{
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        font: 10px sans-serif;
        cursor: pointer;
        width:100px;
        padding: 2px;
        text-align: center;
}
#slideBox1{
        text-align: right;
        width: 215px;
        background-color: rgba(0,0,0,0.6);
        padding: 10px;
        border: 1px #ccc solid;
        display:none;
}

.open12{
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        font: 10px sans-serif;
        cursor: pointer;
        width:100px;
        padding: 2px;
        text-align: center;
}
#slideBox12{
        text-align: left;
        width: 200px;
        background-color: rgba(0,0,0,0.6);
        padding: 10px;
        border: 1px #ccc solid;
        display:none;
}

.open2{
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        font: 10px sans-serif;
        cursor: pointer;
        width:100px;
        padding: 2px;
        text-align: center;
}
#slideBox2{
        text-align: left;
        width: 200px;
        background-color: rgba(0,0,0,0.6);
        padding: 10px;
        border: 1px #ccc solid;
        display:none;
}

.open11{
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        font: 10px sans-serif;
        cursor: pointer;
        width:100px;
        padding: 2px;
        text-align: center;
}
#slideBox11{
        text-align: left;
        width: 200px;
        background-color: rgba(0,0,0,0.6);
        padding: 10px;
        border: 1px #ccc solid;
        display:none;
}

.open3{
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        font: 10px sans-serif;
        cursor: pointer;
        width:100px;
        padding: 2px;
        text-align: center;
}
#slideBox3{
        text-align: left;
        width: 200px;
        background-color: rgba(0,0,0,0.6);
        padding: 10px;
        border: 1px #ccc solid;
        display:none;
}

.open10{
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        font: 10px sans-serif;
        cursor: pointer;
        width:100px;
        padding: 2px;
        text-align: center;
}
#slideBox10{
        text-align: left;
        width: 200px;
        background-color: rgba(0,0,0,0.6);
        padding: 10px;
        border: 1px #ccc solid;
        display:none;
}

.open4{
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        font: 10px sans-serif;
        cursor: pointer;
        width:100px;
        padding: 2px;
        text-align: center;
}
#slideBox4{
        text-align: left;
        width: 200px;
        background-color: rgba(0,0,0,0.6);
        padding: 2px;
        border: 1px #ccc solid;
        display:none;
}

.open5{
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        font: 10px sans-serif;
        cursor: pointer;
        width:100px;
        padding: 2px;
        text-align: center;
}
#slideBox5{
        text-align: left;
        width: 200px;
        background-color: rgba(0,0,0,0.6);
        padding: 2px;
        border: 1px #ccc solid;
        display:none;
}

.open6{
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        font: 10px sans-serif;
        cursor: pointer;
        width:100px;
        padding: 2px;
        text-align: center;
}
#slideBox6{
        text-align: left;
        width: 200px;
        background-color: rgba(0,0,0,0.6);
        padding: 2px;
        border: 1px #ccc solid;
        display:none;
}

.open7{
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        font: 10px sans-serif;
        cursor: pointer;
        width:100px;
        padding: 2px;
        text-align: center;
}
#slideBox7{
        text-align: left;
        width: 200px;
        background-color: rgba(0,0,0,0.6);
        padding: 2px;
        border: 1px #ccc solid;
        display:none;
}

.open8{
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        font: 10px sans-serif;
        cursor: pointer;
         width:100px;
        padding: 2px;
        text-align: center;
}
#slideBox8{
        text-align: right;
        width: 215px;
        background-color: rgba(0,0,0,0.6);
        padding: 10px;
        border: 1px #ccc solid;
        display:none;
}
#genzai {
        height: 20px;
        width: 140px;
        font-size: 10px;
        resize: none;
        overflow: hidden;
}

.open9{
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        font: 10px sans-serif;
        cursor: pointer;
        width:100px;
        padding: 2px;
        text-align: center;
}
#slideBox9{
        text-align: right;
        width: 215px;
        background-color: rgba(0,0,0,0.6);
        padding: 10px;
        border: 1px #ccc solid;
        display:none;
}

#help_open{
        background-color: rgba(0,0,0,0.6);
  color: #ffffff;
        position: absolute;
        top: 10px;
        right: 150px;
        display:block;
        width: 30px;
        text-align: center;
        font-size: 10px;
        padding:2px;
        cursor: pointer;
}

#overlay_help{
        display: none;
        width: 90%;
        height:90%;
        text-align: center;
        position: fixed;
        top: 0;
        z-index: 100;
        background: rgba(0,0,0,0.7);
}

#help_close{
        background: #eeeeee;
        color: #717171;
        width: 70px;
        margin: auto;
        text-align: center;
        font-size: 15px;
        padding:5px 0 5px 10px;
        border-radius: 3px;
        cursor: pointer;
}

#aed_infowindow_class {
        width: 200px;
        font-size:8pt;
        overflow: hidden;
}

<div id="map_canvas"></div>
<div id="user-window">
	<p class="open_menu">menu</p>
	<div id="slideBox_menu">
		
		<p class="open12">AED</p>
		<div id="slideBox12"><form>
			<input type="checkbox" name="aed" value="1" onchange='Aed_change(value);' checked>表示する<br>
		</form></div>
		
		<p class="open11">広域避難地</p>
		<div id="slideBox11"><form>
			<input type="checkbox" name="wide_area" value="1" onchange='Wide_area_change(value);' checked>表示する<br>
		</form></div>
		
		<p class="open10">津波</p>
		<div id="slideBox10"><form>
			<input type="checkbox" name="tsunami_rank" value="1" onchange='Tsunami_rank_change(value);' checked>表示する<br>
			<select name="tsunami_rank" onchange='Tsunami_rank_change(value);'>
				<option value="1">ランク1</option>
				<option value="2">ランク2</option>
				<option value="3" selected>ランク3</option>
			</select>
		</form></div>
		
		<p class="open8">位置変更</p>
		<div id="slideBox8"><form id="genzai_form">
			<div>位置:<textarea id="genzai" wrap="off"></textarea>
				<input type="button" value="移動" onclick='Genzai_change(value);'>
			</div>
		</form></div>
		
	</div>
</div>