Publish your application｜Mash up the Linked Open Data

density = {};
density.url = {};
density.url.LAT = "http://www.w3.org/2003/01/geo/wgs84_pos#lat";
density.url.LON = "http://www.w3.org/2003/01/geo/wgs84_pos#long";

$(window).on("load", function(){
	
	$.jqplot.config.enablePlugins = true;
	var workList = LinkData.getWorks();
	for (var i = 0 ; i < workList.length;i++){
		var workId = workList[i];
		var fileList = LinkData.getFiles(workId);
		for (var j = 0 ; j < fileList.length;j++){
			var sb =[];
			sb[sb.length] ="<option value='";
			sb[sb.length] =workId;
			sb[sb.length] ="|";
			sb[sb.length] =fileList[j];
			sb[sb.length] ="'>";
			sb[sb.length] =LinkData.getWorkName(workId)[0]+ " - " +  fileList[j];
			sb[sb.length] ="</option>";
			$("#dataSelect").append(sb.join(""));
		}
	}

fixHeight();
	initMap();

$("#dataSelect").change(function () {
		var value = $("#dataSelect option:selected").val().split("|");
		changeDataSet(value[0], value[1]);
		lastDataListValue = $("#dataSelect option:selected").val();
	}).change();
});

$(parent).on("resize", fixHeight ) ;

function fixHeight(){

var pageHeight = $(parent).height();
	var pageWidth = $(parent).width();

// This is very big bad hack!!!
	pageHeight = pageHeight - 178;
	pageWidth = pageWidth - 200;
	$("#debugmessage").text(pageHeight );
	$("#zoomLevel").text(pageWidth );

$("#bodyContainer").height(pageHeight );
	$("#map").height(pageHeight);
	$("#map").width(pageWidth );
	if(map){
		map.refresh() ;
	}
}

/** map itself by ZDC.Map  */
	map = null;
	/** pop-up to show information of the place by ZDC.MsgInfo  */
	msg = null;
	/** pop-up to show density history graph of the place by ZDC.MsgInfo  */
	historyMsg = null;

placeData = {};
	placeData.subjects = [];
	placeData.properties = [];
	placeData.data = [];
	placeData.limit = 50;
	prevPolyLine = null;
	densityCache = [];
	densityWidget = null;

lastDataListValue = null;

scaleBar = new ZDC.ScaleBar();
	map.addWidget(scaleBar);

ZDC.Search.getDensInfo( {} , initLastDataCreation);
	
	ZDC.addListener(map, ZDC.MAP_CHG_ZOOM, 	function(){
		$("#zoomLevel").html(map.getZoom());
		refreshDensityInfo();
	});
	densityWidget = new ZDC.UserWidget(map.getLatLon(), { offset : new ZDC.Pixel(0,20)});
	map.addWidget(densityWidget);
	
	ZDC.addListener(map, ZDC.MAP_MOUSEMOVE , drawRectangle );
	ZDC.addListener(map, ZDC.MAP_MOUSEMOVE , moveDensityWidget );
	ZDC.addListener(map, ZDC.MAP_DRAG_END , refreshDensityInfo );
}
function initMsgInfo(){
	msg = new ZDC.MsgInfo(new ZDC.LatLon(34.984608, 135.773678),
   	{
		offset: ZDC.Pixel(3, -18)
	});
	map.addWidget(msg);
	historyMsg = new ZDC.MsgInfo(new ZDC.LatLon(34.984608, 135.773678),
   	{
		offset: ZDC.Pixel(3, -18)
	});
	map.addWidget(historyMsg);
}
function refreshMap() {
	msg.close();
	historyMsg.close();
	var latlons = createAllLatLonAry();
	var adjustZoom = map.getAdjustZoom(latlons);
	map.moveLatLon(adjustZoom.latlon);
	map.setZoom(adjustZoom.zoom);
	map.setHome();
}

function createAllLatLonAry(){
	var result = [];
	for(var i = 0; i < placeData.data.length ; i++){
		result.push( new ZDC.LatLon(placeData.data[i].lat, placeData.data[i].lon));
	}
	return result;
}

if(prevPolyLine  && ZDC.isPolygonContainLatLon(latlon, prevPolyLine.getPoints())){
		//return without update polyline.
		return;
	}
	if(prevPolyLine){
		map.removeWidget(prevPolyLine);
	}
	for(var i = 0 ; i < densityCache.length; i++){
		var bounds = densityCache[i].bounds;
		if( 
			bounds.sw.lat  <= latlon.lat && latlon.lat <= bounds.ne.lat &&
			bounds.sw.lon  <= latlon.lon && latlon.lon <= bounds.ne.lon){
			
			var latlons = [];
			latlons.push(new ZDC.LatLon(bounds.ne.lat , bounds.ne.lon));
			latlons.push(new ZDC.LatLon(bounds.ne.lat , bounds.sw.lon));
			latlons.push(new ZDC.LatLon(bounds.sw.lat , bounds.sw.lon));        
			latlons.push(new ZDC.LatLon(bounds.sw.lat , bounds.ne.lon));     
		
			var pl = new ZDC.Polyline( latlons, 
									  {
										  strokeWeight: 3,
										  strokeColor: '#FF0000',
										  closePath: true
									  });
			prevPolyLine = pl;
			map.addWidget(pl);
//			$("#debugmessage").html( densityCache[i].densities[0].density);
			var density = getComma(densityCache[i].densities[0].density);
			densityWidget.setHtml("<div id='densityWidget'>推定人数：<span id='densityNum'>"+ density + "</span></div>") ;
			densityWidget.open();
			break;
		}
	}

}

}

function showData(){
	sortPlaceData();
	showMarker();
	$("#result").html("");
	showPositionInfo();
	refreshDensityInfo();
}

function sortPlaceData(){
	placeData.data.sort(
	function(a,b){
    	if( a.density < b.density ) return 1;
        if( a.density > b.density ) return -1;
        return 0;
	}
	);
}

function showPositionInfo(){
	for(var i = 0 ; i < placeData.data.length; i++){
		var place = placeData.data[i];
		var sb = [];
		var rank = i + 1;
		
		var numPos = (i * -30) - 30;
		sb[sb.length] = "<div id ='place" +place.id+ "' style='cursor: pointer;'>";
		
		sb[sb.length] = "<div style='position: relative;float:left'>";
		sb[sb.length] = "<a class='pinImageWrapper' >";

sb[sb.length] = "<img class='pinImage' style='top: "+getMarkerPosByRanking(rank,placeData.data.length )+"px; ' src='http://test.api.its-mo.com/img/mapicon-color.png'>";
		sb[sb.length] ="</a>";
		if(i < 	30){
			sb[sb.length] ="<a class='pinImageNumWrapper' >";
			sb[sb.length] ="<img class='pinImageNum' style='top: "+numPos+"px;' src='http://test.api.its-mo.com/img/mapicon-num.png'></a>";
		}
		sb[sb.length] = "</div>";

//		sb[sb.length] = getDensityTitleByRanking(rank,placeData.data.length );
//		sb[sb.length] = "<div style='clear:both;'></div>";
		
		
		sb[sb.length] = "<div>";
		sb[sb.length] =  place.name;
		sb[sb.length] = '<br>周辺の推定人数　' + getComma(place.density);
		sb[sb.length] = "</div>";
		sb[sb.length] = "</div>";
		$("#result").append(sb.join(""));
		$("#place"+ place.id).click(popupSelectedPoint);
	}
}
function popupSelectedPoint(event){
	var id = event.delegateTarget.id.substring(5);
	for(var i = 0 ; i < placeData.data.length ; i++){
		var place = placeData.data[i];
		if(place.id == id){
			map.moveLatLon(new ZDC.LatLon(place.lat, place.lon));
			ZDC.trigger(place.marker , ZDC.MARKER_CLICK);
			break;
		}
	}
}
function removeMarker(){
	for(var i = 0 ; i <  placeData.data.length ; i++){
		var onePlace = placeData.data[i];
		map.removeWidget(onePlace.marker);
	}
}
function showMarker(){
	// to show 1st as top position, scan from end to start.
	for(var i = placeData.data.length - 1 ; 0 <= i; i--){
		var onePlace = placeData.data[i];
		var latlon = new ZDC.LatLon(onePlace.lat, onePlace.lon);
		var rank = i + 1;
		var color = getColorByRanking(i, placeData.data.length );
		var size = "L" ;
		var markerOpt = {
            /* マーカのサイズに合わせて位置を調整する */
//            offset: new ZDC.Pixel(1, -38),
//			color : ZDC.MARKER_COLOR_ID_RED_L ,
			color : ZDC["MARKER_COLOR_ID_"+ color +"_L" ] ,
			number: ZDC["MARKER_NUMBER_ID_" +rank +"_L" ]
		};
		var mrk = new ZDC.Marker(latlon, markerOpt);
		onePlace.marker = mrk;
		mrk.setTitle(onePlace.name);
		map.addWidget(mrk);
		ZDC.bind(mrk, ZDC.MARKER_CLICK,
				 {place: onePlace , latlon: latlon, msg: msg , historyMsg: historyMsg , rank : rank},
				 showMsgInfo);
	}
}

this.msg.setHtml(sb.join(""));
	this.msg.open();
	ZDC.bindDom(document.getElementById("showGraphMsg"), "click", {
		historyMsg:this.historyMsg, msg :this.msg, latlon : this.latlon 
	}, showGraphInfo) 
}

function showGraphInfo(){
	var latlon = this.latlon
	var latlon2 = new ZDC.LatLon(latlon.lat + 0.00001 ,latlon.lon + 0.00001);
	var box = new ZDC.LatLonBox(latlon , latlon2);
	$("historyGraph").html("");
	var sb = [];
	sb[sb.length] = "<div id='historyMsgContent'><div id='graphAddress' style='text-align:center;'></div>";
	sb[sb.length] = "<div id='historyGraph' ></div>";
	sb[sb.length] = "</div>";
	this.historyMsg.setHtml(sb.join("") );
	this.historyMsg.moveLatLon(latlon);
	
	var query = {
		box : box ,
		meshlvl : "5",
		retronum : 24
	};
	
	var callback = function(status, result) {
		var densities =[];
		var times =[];
		for(var i = 0 ; i < result.item[0].densities.length; i++){
			densities[densities.length] = result.item[0].densities[i].density;
			times[times.length] = result.item[0].densities[i].date.slice(-2);
		}
		var orgDens = result.item[0].densities;
		var title = orgDens[0].date + " - " + orgDens[orgDens.length - 1].date;
		var start = orgDens[0].date;
		var end = orgDens[orgDens.length - 1].date;
		var month = parseInt(start.substring(4,6));
		var day =  parseInt(start.substring(6,8));
		var hour =  parseInt(start.substring(8,10));

var addressQuery = { latlons : [latlon]}
	var addressCallback = function(status, result) {
		$("#graphAddress").html(result[0].address.text +" 付近");
	}
	ZDC.Search.getAddrByLatLon(addressQuery, addressCallback) 
	
	this.msg.close();
	this.historyMsg.open();
}

}
function getObjectList(workId, fileName) {
	placeData.count = 0;
	placeData.data = [];
	$.each(placeData.subjects, function(sKey, sValue) {
		if(placeData.count++ > placeData.limit) {
			return false;
		}
		var onePlace = {};
		onePlace.subject = sValue;
		onePlace.id = sKey;
		onePlace.other = {};
		placeData.data.push(onePlace);
		
		var nameCandidateByLabel = null;
		var nameCandidateByName = null;
		$.each(placeData.properties, function(pKey, pValue) {
			var obj = LinkData.getObjects(workId, fileName, sValue, pValue);

if(pValue == "http://www.w3.org/2000/01/rdf-schema#label"){
				nameCandidateByLabel = obj.join("_");
			}else if( (pValue.match(/name$/) || pValue.match(/Name$/)) && nameCandidateByName == null ){
//			}else if( (pValue.endsWith("name") || pValue.endsWith("Name")) && nameCandidateByName == null ){
				nameCandidateByName = obj[0];
				onePlace.other[pValue] = obj.join("_");
			} else if(pValue == density.url.LAT){
				onePlace.lat = parseFloat(obj[0]);
				// this is bad work around... 
				onePlace.lat = onePlace.lat - 0.0032;
			} else if(pValue == density.url.LON){
				onePlace.lon = parseFloat(obj[0]);
				// this is bad work around... 
				onePlace.lon = onePlace.lon + 0.00274;
			} else{
				onePlace.other[pValue] = obj.join("_");
			}	
		});
		if (nameCandidateByName){
			onePlace.name = nameCandidateByName;
		}else if( nameCandidateByLabel ){
			onePlace.name = nameCandidateByLabel;	
		}else{
			onePlace.name = sValue;
		}
		
		pickupDensity(onePlace);
	});
}

// temporary moved from smallfunction.js

function getMeshlvlByZoom(zoom){
	if(zoom <=2){
		return "1";
	}
	if(zoom <=5){
		return "2";
	}
	if(zoom <=8){
		return "3";
	}
	if(zoom <=10){
		return "4";
	}else {
		return "5";
	}

}

html { height: 100% }

body{
	background: none repeat scroll 0 0 #FFFFFF;
	 height: 100%; margin: 0; padding: 0; 
}
#bodyContainer {
	width: 100%;
	height : 100%;
}

#loc_selector {
    width: 200px;
    float: left;
    margin-right: -200px;
    overflow: scroll;
	height : 100%;
}

#footer{
    clear: both;
}

#zenrinMapContainer{
   width: 100%;
   float: right;
}

#mainContent{
	margin-left: 200px;
}

#lastDataUpdate {
	background-color: #FFFFFF;padding: 4px;
}

#densityWidget {
	background-color: #FFFFFF;padding: 4px;
	border: 1px solid #000000;
}
#densityNum{
	font-weight: bold;
}

#showGraphMsg {
	color: #0000FF;
	cursor: pointer;
	text-decoration: underline;
}

#graphAddress{
	/* to make center.*/
	　text-align:center;
}
#historyMsgContent{

width:500px;
	height: 350px;

}

#dataList {
	float: right;
}

.caption {
  background: #B0E0E6;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 5px;
}

#dataSelect {
	font-size: 20px;
	margin-bottom: 10px;
}

#result > div {
	margin-bottom: 20px;
}

.dataListLabel {
	font-size: 18px;
	color: AAA;
}

.info th {
	background: #B0E0E6;
	font-weight: normal;
	padding: 0 5px;
	text-align: left;
}

.info .dencity {
	font-weight: bold;
	font-size: 20px;
	text-align: right;
}

.pinImageWrapper {
	border-width: 0px; width: 31px; height: 38px; display: block; position: relative; overflow: hidden; cursor: pointer;
}

.pinImage {
	border-width: 0px; left: 0px; position: absolute;
}
.pinImageNumWrapper {
	border-width: 0px; width: 31px; height: 30px; top: 0px;display: block; position: absolute; overflow: hidden; cursor: pointer;
}

.pinImageNum {
	z-index: 0; border-width: 0px;  left: 0px; position: absolute;
}

.densityTitle1{
 background: none repeat scroll 0 0 red;
}
.densityTitle2{
 background: none repeat scroll 0 0 yellow;
}
.densityTitle3{
 background: none repeat scroll 0 0 green;
}
.densityTitle4{
 background: none repeat scroll 0 0 blue;

}

Select Input Data

LinkData Work	Table Data
公共施設一覧	Public_facility
小金井市防災施設リスト	Koganei_Disaster_Prevention_Map
京都市観光スポットリスト_2013	shrines_in_kyoto temples_in_kyoto
鯖江市避難施設	area_list refuge refuge_list schema
横手市AED設置場所	aed_yokote
鯖江観光LOD	sabae_tourism_bunkazai sabae_tourism_gurumeguri sabae_tourism_hyakukei sabae_tourism_ijin sabae_tourism_sabakan sabae_tourism_sisetu sabae_tourism_test
流山市災害用井戸設置場所	nagareyama_saigaiyouido

Add LinkData work(LinkData)

Click the Browse button or drag and drop to choose files to upload

The Maximum upload size is 1MB.(bmp,gif,jpeg,jpg,png)

Edit Application

Please enter information for the application to be registered.

*Required field

Account Name

Application Name*: Remove; Remove; Add name for another language

Collaborators

Image: Change image

You can upload jpg, gif, png file formats

Website: x

Add website

Tag

License

API version

Initial Cost: ￥

Annual Cost: ￥

Description: データセットに含まれる各スポットを、周辺（250m四方内）の推定人数の多い順にランキング表示する地図アプリです。<br>推定人数は（株）ゼンリンデータコムさんの「混雑度マップAPI」を利用して取得しています。<br>http://lab.its-mo.com/service/densitymap.html<br><br>※11/15現在「混雑度マップAPI」に遅延が発生しており、データの表示に時間がかかることがあります。 Remove; Add description for another language

Security Level: public limited private

: finish Editing

Select Input Data

Edit Application

Please enter information for the application to be registered.

History