スタンプラリー＠裾野市観光マップ

fullscreen

Tetsuro_Toyoda

観光マップの各地点から半径200m以内に近づいてこのアプリを開くとスタンプが押されます。スマホで現在地情報をオンにして使ってください。

Rating

useful

Application

Play
JavaScript
CSS
HTML
ReadMe
Snapshots

// 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 false;
  });
  $(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;
  }
}

Fork this app as your new one download

Web Search

Contributor Send Message	Tetsuro_Toyoda
Run count	315
Website
License
Fork count	0
Created date	Dec 26, 2014
Last update date	Jan 26, 2015

Input Data
Related Ideas

LinkData work list used as input data in this application.
You can change input data and execute application if you change the checkbox.

裾野市　観光マップ Contributor: 裾野市 Update: Dec 4, 2013
1810 Downloads
,

3 Applications

Susono_Kankou_Map
Add New Data

News Feed

linkdata.org に関するツイート

Publish your application as JavaScript

that mashes up the Linked Open Data

Application Information

スタンプラリー＠裾野市観光マップ

Application

News Feed