横手市×混雑度マッシュアップMAP｜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);
	});
}

function pickupDensity(onePlace){
		var latlon = new ZDC.LatLon(onePlace.lat ,onePlace.lon);
		var latlon2 = new ZDC.LatLon(latlon.lat + 0.00001 ,latlon.lon + 0.00001);
		var box = new ZDC.LatLonBox(latlon , latlon2);

var query = {
			box : box ,
			meshlvl : "5",
			retronum : "1"
		};
		
		var callback = function(status, result) {
			onePlace.density = result.item[0].densities[0].density;
		}
		ZDC.Search.getDensByBox(query, callback) ;
	}

// 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;
}

.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;

}

LinkData Work	Table Data
横手市農産物直売所 Contributor:横手市情報政策課 Update:Dec 27, 2013 760 Downloads, 1 Applications 横手市内の農産物直売所の一覧です	chokubai_yokote
横手市雪捨て場開放状況 Contributor:横手市情報政策課 Update:Mar 26, 2014 1323 Downloads, 2 Applications 横手市雪捨て場開放状況です<BR> ・搬入できるトラックに制限があるので確認してください<BR> ・状況が逐次変わりますので「timestamp」項目に注意してください	snow_disposal
横手市公共機関 Contributor:横手市情報政策課 Update:Aug 13, 2013 1048 Downloads, 1 Applications 横手市公共機関一覧です	publicinstitution_yokote
横手市フリースポット Contributor:横手市情報政策課 Update:Jun 21, 2017 1053 Downloads, 1 Applications 横手市フリースポット設置場所一覧です	freespot_yokote
横手市循環バス停留所・時刻表 Contributor:横手市情報政策課 Update:Jun 26, 2017 1007 Downloads, 1 Applications 平成25年10月1日より運行を開始した横手市循環バスのバス停留所と通過時刻です	loop_line_bus_yokote
横手市生涯学習スポーツ施設 Contributor:横手市情報政策課 Update:Aug 13, 2013 888 Downloads, 1 Applications 横手市生涯学習施設とスポーツ施設の一覧です	publicfacility_yokote
横手市文化財 Contributor:横手市情報政策課 Update:Oct 28, 2013 1202 Downloads, 1 Applications 横手市文化財の一覧です	cultural_assets_yokote
横手市防火水槽 Contributor:横手市情報政策課 Update:Sep 18, 2013 1015 Downloads, 1 Applications 横手市の防火水槽の一覧です	firetank_yokote
横手市AED設置場所 Contributor:横手市情報政策課 Update:Jul 20, 2020 2739 Downloads, 3 Applications 横手市のAED設置場所一覧です。必要時即連絡ができるように、電話番号を項目に持っています。必要時利用可能か明確にするために、開館時間と休日情報を項目に持っています。必要とする場所の位置情報を送れるように、メールアドレスを項目に持っています。	aed_yokote
横手市子育て関連施設 Contributor:横手市情報政策課 Update:Aug 16, 2013 918 Downloads, 1 Applications 横手市子育て施設の一覧です	childcare_yokote
横手やきそば暖簾会加盟店 Contributor:横手市情報政策課 Update:Nov 1, 2013 1035 Downloads, 1 Applications 横手やきそば暖簾会加盟店一覧です	yakisoba_yokote
横手市学校 Contributor:横手市情報政策課 Update:Dec 11, 2017 993 Downloads, 1 Applications 横手市学校一覧です。	school_yokote
横手市避難場所 Contributor:横手市情報政策課 Update:Aug 27, 2020 2669 Downloads, 3 Applications 横手市の避難場所一覧です。積雪により冬期間使用できなる避難場所があります。避難場所が使用できなくなった際にはデータを更新します。<BR> <BR> H25.12.16 冬期間でも使用できる避難場所のみにデータを更新しました	shelter_yokote_20200826 []
横手市の朝市 Contributor:横手市情報政策課 Update:Dec 27, 2013 756 Downloads, 1 Applications 新鮮な農産物が勢ぞろい。横手市で開催される朝市の一覧です。	asaichi_yokote
平成26年横手市の雪まつり Contributor:横手市情報政策課 Update:Feb 5, 2015 549 Downloads, 1 Applications 平成26年横手市の雪まつり（かまくら・ミニかまくら・雪の芸術・梵天）の会場位置情報です	snow_festival_yokote []
横手市消火栓 Contributor:横手市情報政策課 Update:Sep 18, 2013 1356 Downloads, 1 Applications 横手市の消火栓一覧です	hydrant_yokote