Widget Examples‎ > ‎

Foursquare Widget


In this part, we will complete an sample of displaying the FourSquare venus in Google Maps by using GPS coordinate.

Foursquare API

This time, we will use both Foursquare API and Google Maps to develop an application。
The detail of Foursquare API is shown in the following URL.


http://api.foursquare.com/v1/venues.json?geolat=latitude&geolong=longitude

Create a new project

Choose File >>New>>Project under eclipse menu.
Then from the New Project Dialog, Select Droidget Wizard>>Project
Fill necessary fields including project name..etc..

In order to have the GPS functionalities in widget application, in the Feature section , Click on Add and select geolocation feature.
Also it is required to set the access permission for following URLs to access google maps from widget. 
For this, Click on Add in the Access section in project creation wizard and add the URLs.
http://foursquare.com
http://maps.gstatic.com
http://google.com/

and Click Finish
Project with the given name will appear in the Eclipse project explorer.


















config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget id="FoursquareMap_1279460600275" version="1.0" width="300" height="300">
    <content src="index.html" type="text/html"/>
    <name>FoursquareMap</name>
    <description>The sample of Google Map</description>
    <author url="http://www.gclue.jp">GClue</author>
    <icon src="icon.png"/>
    <license></license>
    <feature name="http://bondi.omtp.org/api/geolocation" />
    <access uri="http://google.com/" subdomains="true"/>
    <access uri="http://maps.gstatic.com"/>
    <access uri="http://foursquare.com" subdomains="true"/>
</widget>

Create a JavaScript File

create a new folder called js and under that folder create a new file and name it as "script.js".
Then add the following functions.

src/js/script.js
var map null;

function onLoad(){
  bondi.geolocation.getCurrentPosition(onPositionSuccessonPositionError{timeout:40000});
}

// this function will handle each position updates
function onPositionSuccess(position{
  lat position.coords.latitude;
  lon position.coords.longitude;

  map new GMap2(document.getElementById("map_canvas"));
  map.setCenter(new GLatLng(latlon)15);
  map.setUIToDefault();
  
  var url "http://api.foursquare.com/v1/venues.json?geolat=" lat "&geolong=" lon;
  json(resultJsonurl);
  
}

// this function will handle each error in position updates
function onPositionError(error{
  
}

 
// callback of JSON
function resultJson(json){
  
  for(var 0json.groups[0].venues.lengthi++){
    
    var icon new GIcon();
    icon.image json.groups[0].venues[i].primarycategory.iconurl;
    icon.iconSize new GSize(3535);
    icon.shadow "";
    icon.shadowSize new GSize(00);
    icon.iconAnchor new GPoint(00);
    icon.infoWindowAnchor new GPoint(00);
    
    var lat json.groups[0].venues[i].geolat;
    var lon json.groups[0].venues[i].geolong;
    var marker new GMarker(new GLatLng(lat,lon),icon);

        map.addOverlay(marker);
  }

}

// JSON
function json(callbackurl){
     
  var http_connect new XMLHttpRequest();
  http_connect.open("GET"urltrue);

  http_connect.onreadystatechange function({
    
    if (http_connect.readyState == 4{
      if(http_connect.status == 200){    
        callback(eval("("+http_connect.responseText+")"));
      }else{
        alert("Can't connect");
      }
    }
  }
  http_connect.send();
}

Edit index.html


index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title>Google Map Sample</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=取得したKeytype="text/javascript"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body onload="onLoad()">
    <img src="img/poweredby-foursquare.png">
    <div id="map_canvas" style="width: 250px; height: 250px"></div>
</body>
</html>


Deploy the Widget

Now save and deploy the project
  • From the eclipse menu select Droidget --> packaging
  • Then Droidget-->install packaging
Or 
  • upload the Widget to web server and update the download.html file as follows. Then access the download.html from the smart phone and install the widget from URI.
Download.html
<html>
<head>
    <title>Download</title>
</head>
<body>
    <a href="droidget://www.example.com/FoursquareSample.wgt">FoursquareSample</a><br>
</body>
</html>

Preview


Comments