Publish your application｜Mash up the Linked Open Data

forked:Gyoza map

Save a snapshot
reload

Import an externally hosted application: URL
Check style

save
finish Editing
Cancel

JavaScript
CSS
HTML
Images
Input Data
ReadMe
Snapshots

API Reference (1.0)
Properties

forked:Gyoza map
jquery-1.7.1.min.js
http://developers.its-mo.com/apps/key/cgi/loader.cgi?key=93c3e198ed7b7c5043bdf7cdab9c8439&ver=NEW&force=1&api=zdcmap.js,control.js,shape.js,geo.js,imglayer.js,search.js,areamap.js,railwaymap.js,submap.js,usercontrol.js,userwidget.js,density.js&alert=1
http://app.linkdata.org/js/jquery/jqplot1.0.8/jquery.jqplot.min.js
http://app.linkdata.org/js/jquery/jqplot1.0.8/plugins/jqplot.categoryAxisRenderer.min.js
http://app.linkdata.org/js/jquery/jqplot1.0.8/plugins/jqplot.barRenderer.min.js

history

forked:Gyoza map
http://app.linkdata.org/css/jquery/jqplot1.0.8/jquery.jqplot.min.css

history

forked:Gyoza map

history

forked:Gyoza map

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
渋谷餃子店リスト	shibuya_gyoza

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: You can upload jpg, gif, png file formats

Website: x

Add website

Tag

License

API version

Initial Cost: ￥

Annual Cost: ￥

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