スタンプラリー＠川崎市宮前区｜Mash up the Linked Open Data

スタンプラリー＠川崎市宮前区

// Created by Tetsuro Toyoda Ver. 2015.01.22.2
var stampUrl = "http://app.linkdata.org/asset/4b2b5bcf.png";//スタンプの画像です。好きなものに変えてください
var circle = 200;// 目的地点との距離がこのメートル以下になればスタンプを押せます
var ageofstamp = 365; //この日数が経過するとスタンプはリセットされます
var nameToShow = "施設名" // ツイッターでシェアする際に、このプロパティの値を地点の名前としてツイッターに挿入します。省略（ヌル文字列）すればサブジェクト名が選択されます
var currlat = null; //現在地点の緯度
var currlong = null; //現在地点の経度
var destlat = null; //目的地の緯度
var destlong = null; //目的地の経度
var points = new Array(); // スタンプのある地点のリスト
var timerid; // 現在地点を定期的に観測するためのタイマー
var lastTimeOfSuccess =""; // 前回現在位置を取得するのに成功した時刻
var timerInterval = 10;//位置情報を取得する間隔（秒単位）
var displayMode = "allLoc"; // 表示モード
var map = null; // 現在地の情報を表示するマップ
var mapCircle = null;//目的地のサークル群
var mapCircleIsStamped = null;//サークルがスタンプされていればtrue
var currPosMarker = null;// 現在位置を表すマーカー
var directionsService = null;
var directionsDisplay = null;
var travelMode = ['NOTHING','WALKING','DRIVING'];
var travelModeJ = ['解除','徒歩','自動車'];
var travelIndex = 0;
var destinationURI = "";
var destButtonCaption = ['目的地に設定する','目的地設定を解除する'];
var debug = false; // デバッグ時にtrueでタイマーをオフにできる

function setDestination( i )
{
	var eid = 'destroutemap'+i.toString(10);
	document.getElementById('destroutebutton'+i.toString(10)).value = destButtonCaption[1];
	destinationURI = points[i][5];
	travelIndex = 1;
	curLoc();
}

function showAPoint(i,p)
{
			$("#result").append("<hr>");
			if ( p[1] != null && p[2] != null ) // 緯度経度がある地点には目的地設定ボタンをつける
			{
				$("#result").append("<input id='destroutebutton"+i+"' type='button' value='"+destButtonCaption[0]+"' onclick='setDestination("+i+")'/>");
//				$("#result").append("<div id='destroutemap"+i+"'></div>");
			}
			$("#result").append(p[0]);
}

function currTime() {
	DD = new Date();
	Month = DD.getMonth() + 1;
	Day = DD.getDate();
	Hours = DD.getHours();
	Minutes = DD.getMinutes();
	Seconds = DD.getSeconds();
	return Month+"月"+Day+"日"+Hours+"時"+Minutes+"分"+Seconds+"秒";
}

function zoomCurrentPos()
{
	var zoom = map.getZoom();
	zoom += 1;
	map.setZoom(zoom);
	map.setCenter(new google.maps.LatLng(currlat,currlong));
}

function zoomDestinationPos()
{
	var zoom = map.getZoom();
	zoom += 1;
	map.setZoom(zoom);
	map.setCenter(new google.maps.LatLng(destlat,destlong));
}
function changeTravalMode(i)
{
	travelIndex = i;
	showTravelMode();
	showRouteToDestinationFromURI();
}

//　目的地周辺のサークルオブジェクトを表示する
function newMapCircle( lat, long, isStamped, uri )
{
	var col = "#FF0000";
	if ( isStamped == true ) col = "#0000FF";
	var locationCircle = {
			strokeColor: col,
			strokeOpacity: 0.20,
			strokeWeight: 2,
			fillColor: col,
			fillOpacity: 0.20,
			map: map,
			center: new google.maps.LatLng(lat,long),
			radius: circle
			};
	var mc = new google.maps.Circle(locationCircle);
	// サークルがクリックされたらルート検索する
	google.maps.event.addListener(mc, 'click', function() {
		travelIndex += 1;
		showRouteToDestination(lat,long);
		destinationURI = uri;
 	});
	return mc;
}
function showRouteToDestination( lat, long )
{
		destlat = null;
		destlong = null;
		showTravelMode();
		// 目的地のサークルをクリックしてルート検索
		directionsDisplay.setMap(null);
		if ( travelMode[travelIndex] != 'NOTHING' )
		{
			destlat = lat;
			destlong = long;
			directionsDisplay.setMap(map);
 			var request = {
      			origin: new google.maps.LatLng(currlat,currlong),
      			destination: new google.maps.LatLng(lat,long),
      			travelMode: google.maps.TravelMode[travelMode[travelIndex]]
  			};
 			directionsService.route(request, function(response, status){
				if (status == google.maps.DirectionsStatus.OK) {
					directionsDisplay.setDirections(response);
				}
			});
		}
}

//現在位置地図のイニシャライズ
function initMap()
{
			var mapOptions = {
	    	zoom: 15,
 		   	center: new google.maps.LatLng(currlat, currlong)
  			};
			$("#map-canvas").height("50%");
			$("#map-canvas").width("100%");
  			map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 			currPosMarker = new google.maps.Marker({
				position: new google.maps.LatLng(currlat,currlong),
				map: map,
				title: 'Current Position'
			});
			directionsService = new google.maps.DirectionsService();
			directionsDisplay = new google.maps.DirectionsRenderer();
//			stampData();
//			sortPoints();
			// スタンプポイントに円を描く
			mapCircle = new Array();
	mapCircleIsStamped = new Array();
			$.each(points, function(i, p) {
	    // mapCircleに各地点のURIをキーにしてCircleを登録
				mapCircle[p[5]] = newMapCircle(p[1],p[2],p[3],p[5]);
				mapCircleIsStamped[p[5]] = p[3];
			});
}

// 全地点を表示
function allLoc() {
	displayMode = "allLoc";
	stampData();
	displayData();
}

// 目的地を探す	
function finDes() {
	displayMode = "finDes";
	stampData();
	displayData();
}

// スタンプを見る	
function vieSta() {
	displayMode = "vieSta";
	stampData();
	displayData();
}

// アプリを見る	
function seeApp() {
	displayMode = "seeApp";
	stampData();
	displayData();
}

function sortPoints()
{
	$.each(points, function(i, p) {
		p[6] = Distance(currlong, currlat, p[2], p[1]);
	});
	points.sort(function(p1, p2) {
		return p1[6] - p2[6];
	});
}

// Get a parameter value in URL (e.g. ?paramString=value )
function getParameterFromURL( paramString )
{			
	var value = "";
	var q = top.window.location.href.split("?");
	if ( q.length == 2 ){
		var r = q[1].split("&");
		for ( var i = 0; i < r.length; i++ ){
			var s = r[i].split("=");
			if ( decodeURIComponent(s[0]) ==  paramString )
				value = decodeURIComponent(s[1]);
		}
	}
 	return value;
}
function getCurrentAppURL()
{
	return decodeURIComponent(top.window.location).split("?")[0];
}

// Highlight keyword in the string
function highlight( string, keyword )
{
	if ( keyword.length > 0 ) {
		var ss = string.split(keyword);
		var len = ss.length;
		if ( len > 1 ) {
			string = ss[0];
			for ( i = 1; i < len; i++ )
//				string += "<font color=\"red\">"+keyword+"</font>"+ss[i];
				string += "<span class=\"highlight\">"+keyword+"</span>"+ss[i];
		}
	}
	return string;
}

// get the last name of the string separated with # and /
function getLastName( string )
{
	string = decodeURIComponent(string);
	var sharp = string.split("#");
	var slash = sharp[sharp.length-1].split("/");
	var lastName = slash[slash.length-1];
	return lastName;
}

// shortening URL e.g. http://.../123.jpg
function shortenURL( url )
{
	url = decodeURIComponent(url);
	var slash = url.split("/");
	var lastName = slash[slash.length-1];
	return url.split(":")[0]+"://.../"+lastName;
}

function SetCookie( uri, value )
{
	top.document.cookie = encodeURIComponent( uri ) + "=" + encodeURIComponent( value ) + "; max-age="+ageofstamp*24*3600;
}

function GetCookies()
{
    var result = new Array();
    var allcookies = top.document.cookie;
    if( allcookies != '' )
    {
        var cookies = allcookies.split( '; ' );

for( var i = 0; i < cookies.length; i++ )
        {
            var cookie = cookies[ i ].split( '=' );

// クッキーの名前をキーとして 配列に追加する
			var ck = decodeURIComponent(cookie[ 0 ]);
			if ( ck.indexOf("://linkdata.org") > 0 || ck.indexOf("://app.linkdata.org") > 0 )
				result[ ck ] = decodeURIComponent( cookie[ 1 ] );
      }
    }
    return result;
}

function Distance( long1, lat1, long2, lat2 )
{
	var r = 6378137; //地球の半径(m)
	var d = r * Math.acos( Math.sin(lat1/180*Math.PI)*Math.sin(lat2/180*Math.PI) + Math.cos(lat1/180*Math.PI)*Math.cos(lat2/180*Math.PI)*Math.cos((long2-long1)/180*Math.PI) );
	return d;
}

$(function(){
	$("#curloc").click(function(){ if ( $(window).width() <= 600 ) $("#menu").slideToggle(); curLoc(); return false;});
	$("#allloc").click(function(){ if ( $(window).width() <= 600 ) $("#menu").slideToggle(); allLoc(); return false;});
 	$("#findes").click(function(){ if ( $(window).width() <= 600 ) $("#menu").slideToggle(); finDes(); return false;});
 	$("#viesta").click(function(){ if ( $(window).width() <= 600 ) $("#menu").slideToggle(); vieSta(); return false;});
 	$("#seeapp").click(function(){ if ( $(window).width() <= 600 ) $("#menu").slideToggle(); seeApp(); return false;});
 $("#toggle").click(function(){
    $("#menu").slideToggle();
    return true;
  });
  $(window).resize(function(){
    var win = $(window).width();
    var p = 600;
    if(win > p){
      $("#menu").show();
    } else {
//      $("#menu").hide();
    }
	  		if ( map != null )
			google.maps.event.trigger(map, 'resize');

});
});

span.highlight {color: red;}
span.propertyName {color: gray;}
span.subject { color: blue; }
span.object{ color: black; }
body { background: white; }
a, a span { text-decoration: underline; }
a:hover, a span:hover { text-decoration: none; }

#map-canvas {
        height: 0%;
        margin: 0px;
        padding: 0px
}
#menu{
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
#menu li{
  display: block;
  float: left;
  width: 12.5%;
  margin: 0;
  padding: 0; }
#menu li a{
  display: block;
  padding: 12px 0 10px;
  background: #333;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
#menu li a:hover{
  background: #444;
}
#toggle{ 
 display: none;
}
@media only screen {
    #menu li{
    width: 20%;
    border-bottom: 1px solid #444;
  }
}
@media only screen and (max-width: 600px) {
  #menu{
    display: none;
  }
  #menu li{
    width: 100%;
  }
  #toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #222;
  }
  #toggle a{
    display: block;
    position: relative;
    padding: 12px 0 10px;
    border-bottom: 1px solid #444;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
  }
  #toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #222;
  }
  #toggle a:before{
    margin-top: -6px;
  }
  #toggle a:after{
    margin-top: 2px;
  }
}

実行画面
入力データ
概要
保存した実行結果

同じデータを使っているアプリケーション

作者:
更新日:
評価指数

データ作品	テーブルデータ
【観光レシピ】おいしい宮前区農産物＆ホッピー作者:Tetsuro_Toyoda 更新日:2014年12月21日 564 ダウンロード, 1 アプリケーション川崎市宮前区の観光スポットと農産物直売場をぐるっとめぐる鷺沼駅（田園都市線）からのバス＋散歩コースです。全体の所要時間は2~3時間です。途中で農産物直売場で買い物をして、最後に駅近くのホッピーの飲める店で一杯やって帰るガイドです。このページをシェアして宮前区とホッピーを応援してください！	miyamae_guide1

データ作品

テーブルデータ

【観光レシピ】おいしい宮前区農産物＆ホッピー

作者:Tetsuro_Toyoda 更新日:2014年12月21日 564 ダウンロード, 1 アプリケーション川崎市宮前区の観光スポットと農産物直売場をぐるっとめぐる鷺沼駅（田園都市線）からのバス＋散歩コースです。全体の所要時間は2~3時間です。途中で農産物直売場で買い物をして、最後に駅近くのホッピーの飲める店で一杯やって帰るガイドです。このページをシェアして宮前区とホッピーを応援してください！

miyamae_guide1

データ作品を追加する

Link http://app.linkdata.org/run/app1s839i?tab=readme