Distances

From OpenSocial Directory

Thumbnail

Application Details Description Allows to point your location on map and displays distances to your friends Publisher Sergi Adamchuk Author Sergi Adamchuk Code http://hosting.gmodules.com/ig/gadgets/file/107340724079084587093/distances.xml Genre Travel Supports OpenSocial Screenshot

Image:Example.jpg==Reviews== Add a Review
Template:Distances Reviews

[edit] Comments

Leave a comment
Your Name: Heading: Comment:

[edit] Code

View Code

  <?xml version="1.0" encoding="UTF-8" ?> 
  <Module>
  <ModulePrefs title="Distances (Beta)" directory_title="Distances (Beta)" author="Sergi Adamchuk" author_email="sergi79 at ukr dot net" author_affiliation="Independant" author_location="Kyiv, Ukraine" author_link="http://sergi.volyn.net" author_photo="http://adamchuk.googlepages.com/DSCN8465.JPG" title_url="http://sergi.volyn.net" thumbnail="http://adamchuk.googlepages.com/distances.png" screenshot="http://adamchuk.googlepages.com/dist_screen.png" description="Allows to point your location on map and displays distances to your friends." height="300">
  <Require feature="opensocial-0.5" /> 
  <Require feature="tabs" /> 
  </ModulePrefs>
  <Content type="html">
  <![CDATA[ 
		<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAwfrO1p6v8eS-FdnoaB4OMBQrdQ4UluQef3Y-LDcBf0ZqUjaEjBSPSFttakXl6mHxi5mUvco6ZsmhZg"></script>
		<script type="text/javascript">
			if (!console){
				var console = {log : function(){}};
			}
			
			google.load("maps", "2");
			var dist = {};
			var gadget = {};
			
			function initGadget() {
				var tabs = new _IG_Tabs(__MODULE_ID__, "Map");
				tabs.addTab("Map", "tabMap");
				tabs.addTab("Distances", "tabDistances");
				gadget.map = new google.maps.Map2(document.getElementById("mapCanvas"));
				gadget.map.setCenter(new google.maps.LatLng(34,0), 2);
				gadget.map.addControl(new google.maps.MapTypeControl());
				gadget.map.addControl(new google.maps.SmallZoomControl());
				google.maps.Event.addListener(gadget.map, "click", MapClicked);
				
				Load1();
			}
			
			function unloadGadget(){
				gadget.myMarker=null;
				gadget.map = null;
				dist=null;
				gadget=null;
				google.maps.Unload();
			}
			
			function Load1(){
				var req = opensocial.newDataRequest();
				req.add(req.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER, {"profileDetail": 'contact'}), "viewer");
				req.add(req.newFetchPersonRequest(opensocial.DataRequest.PersonId.OWNER, {"profileDetail": 'contact'}), "owner");
				req.add(req.newFetchPersonAppDataRequest(opensocial.DataRequest.PersonId.VIEWER, "location"), "location");
				req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.OWNER_FRIENDS), "friends");
				req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS), "vfriends");
				req.add(req.newFetchPersonAppDataRequest(opensocial.DataRequest.Group.OWNER_FRIENDS, "location"), "flocation");
				req.add(req.newFetchPersonAppDataRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS, "location"), "vlocation");
				req.add(req.newFetchPersonAppDataRequest(opensocial.DataRequest.PersonId.OWNER, "location"), "olocation");
				req.send(DataLoaded);
			}
			
			function DataLoaded(data){
				//console.log("Server response",data);
				var viewer = data.get("viewer");
				if (viewer.hadError()) {
					console.log(viewer.getError());
					return;
				}
				
				dist.viewer = viewer.getData();
				SetLocationForPerson(dist.viewer, data.get("location").getData());
			    if (dist.viewer.location){
			    	gadget.map.setCenter(dist.viewer.location, 1);
			    	ShowOwnerMarker();
			    }
			    
			    dist.owner = data.get("owner").getData();
			    
			    dist.friends = data.get('friends').getData().asArray().
			    	concat(data.get('vfriends').getData().asArray()).
			    	concat([dist.owner]).
			    	filter(function(p){return p&&(p.getId()!=dist.viewer.getId());}).
			    	compact(function(p1,p2){return p1.getId()==p2.getId();});
			    
				AnalyzeUserData(
					data.get("flocation").getData(), 
					data.get("vlocation").getData(), 
					data.get("olocation").getData());
			}
			
			function AnalyzeUserData(d1, d2, d3){
				dist.friends.each2(function(p,idx){
		    		//console.log("Retrieving user's data", p);
		    		SetLocationForPerson(p, d1, d2, d3);
			    	if (p.location){
			    		var marker = CreateMarkerForPerson(p, "http://www.google.com/intl/en_us/mapfiles/ms/micons/"+(p.getId() == dist.owner.getId() ? "green" : "blue")+"-dot.png", false);
			    		gadget.map.addOverlay(marker);
			    	}
	    		});
	    		RecalculateDistances();
			}
			
			function RecalculateDistances(){
				if (dist.viewer.location){
					dist.friends.each2(function(p,idx){
				    	if (p.location){
				    		 p.distance = p.location.distanceFrom(dist.viewer.location);
				    	}
		    		});
		    		DrawDistanceTable();
	    		}
			}
			
			function DrawDistanceTable(){
				var tbl = document.getElementById("tblFriends");
				while(tbl.rows.length>0)tbl.deleteRow(0);
				dist.friends.
					filter(function(p){return p.distance;}).
					sort(function(p1,p2){return p1.distance-p2.distance;}).
					each2(function(p,idx){
						//console.log("Adding to table", p.getDisplayName());
						var row = tbl.insertRow(-1);
						if (idx%2) row.style.backgroundColor = "PaleTurquoise";
						var cell = row.insertCell(-1);
						cell.innerHTML = "<img src='" + getThumbnailUrl(p) + "' alt='"+p.getDisplayName()+"' title='"+p.getDisplayName()+"'/>";
						
						cell = row.insertCell(-1);
						cell.innerHTML = p.getDisplayName();
						
						cell = row.insertCell(-1);
						cell.innerHTML = p.distance.toStringDistance();
					});
			}
			
			function SetLocationForPerson(person){
				var d = null, userId = person.getId();
				//console.log("Calling SetLocationForPerson", person, arguments.length);
				for(var idx = 1;idx<arguments.length;idx++){
					var lst = arguments[idx];
					//console.log(lst);
					if (lst){
						d = lst[userId];
						if (d) break;
					}
					idx++;
				}
				if (d) person.location = d.location.parseGLatLng();
				
				if (!person.location){
					try{
						//console.log("Getting location from keywords.");
						person.location = new google.maps.LatLng(person.obj_.Keywords[1].Value, person.obj_.Keywords[2].Value);
						if ((person.location.lat() == 0)&&(person.location.lng()==0)) person.location=null;
					}
					catch(e){console.log(e);}
				}
			}
			
			function CreateMarkerForPerson(person,imageUrl,draggable){
				var icon = new google.maps.Icon(G_DEFAULT_ICON);
				if (imageUrl) icon.image = imageUrl;
				var markerOptions = {icon:icon, draggable:draggable};
				var marker = new google.maps.Marker(person.location, markerOptions);
				marker.htmlTextForPerson = "<a href='"+getProfileUrl(person)+"' target='_top'><img src='"+getThumbnailUrl(person)+"'/> "+person.getDisplayName()+"</a>";
				return marker;
			}
			
			function MapClicked(marker, point){
				if (marker&&marker.openInfoWindowHtml) marker.openInfoWindowHtml(marker.htmlTextForPerson);
				
				if (!dist.viewer.location){
					dist.viewer.location = point;
					ShowOwnerMarker();
					SaveOwnerLocation();
				}
			}
			
			function ShowOwnerMarker(){
				if (dist.viewer.location){
					if (gadget.myMarker){
						//console.log("Changing marker location ", dist.viewer.location);
						gadget.myMarker.setLatLng(dist.viewer.location);
					}
					else{
						//console.log("Creating marker at ", dist.viewer.location);
						gadget.myMarker = CreateMarkerForPerson(dist.viewer, null, true);
						google.maps.Event.addListener(gadget.myMarker, "dragend", function() {
  							dist.viewer.location = gadget.myMarker.getLatLng();
  							SaveOwnerLocation();
  						});
			    		gadget.map.addOverlay(gadget.myMarker);
					}
					
				}
			}
			
			function SaveOwnerLocation(){
				RecalculateDistances();
				var req = opensocial.newDataRequest();
				//console.log("Storing data ", dist.viewer.location.storeString());
				req.add(req.newUpdatePersonAppDataRequest(opensocial.DataRequest.PersonId.VIEWER, "location", LatLngStore(dist.viewer.location)/*dist.viewer.location*/));
				req.send(function(d){
					//console.log(d.hadError() ? "An error occured while saving viewer's location" : "Location stored successfully");
					});
			}
			
			function LatLngStore(ll){
				return ll.lat().toString()+","+ll.lng().toString();
			}
			
			function getProfileUrl(p){
				return p.getField(opensocial.Person.Field.PROFILE_URL);
			}
			
			function getThumbnailUrl(p){
				return p.getField(opensocial.Person.Field.THUMBNAIL_URL);
			}
			
			function getPropertyValueByIdx(obj,idx){
				var p=0;
				for(var k in obj)
					if (p == idx) return obj[k];
				return null;
			}
			
			String.prototype.parseGLatLng = function(){
				var p = this.split(",");
				return new google.maps.LatLng(parseFloat(p[0]),parseFloat(p[1]));
			}
			
			Array.prototype.compact = function(conflictsWithFn){
				var r = [];
				for(var p=0;p<this.length;p++){
					var conflicts = false;
					for(var t=p+1;t<this.length;t++){
						if (conflictsWithFn(this[p], this[t])){
							conflicts = true;
							break;
						}
					}
					if (!conflicts) r.push(this[p]);
				}
				return r;
			}
			
			Array.prototype.each2 = function(doFn){
				for(var p=0;p<this.length;p++){
					doFn(this[p], p, p == this.length-1);
				}
			}
			
			Array.prototype.filter = function(allowedItemFn){
				var r = [];
				for(var p=0;p<this.length;p++){
					if (allowedItemFn(this[p])) r.push(this[p]);
				}
				return r;
			}
			
			Number.prototype.toStringDistance = function(){
				if (this<5000)
					return this.toFixed()+" meters";
				else
					return (this/1000).toFixed()+" kilometers";
			}
			
			
			_IG_RegisterOnloadHandler(initGadget);
			_IG_AddEventHandler("unload", unloadGadget); 
		</script>
		<div id="tabMap">
			<div id="mapCanvas" style="height:100%;"/>
		</div>
		<div id="tabDistances" style="display:none">
			<p style="text-align:center">
				<table id="tblFriends" cellpadding="5" cellspacing="5"/>
			</p>
		</div>
		

  ]]> 
  </Content>
  </Module>

Page Rating