Force.com FourSquare Visualforce Page

<apex:page showHeader="false" showChat="false" sidebar="false">
<html>
<head>
  <title>foursquare :: Explore Sample</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" id="jquery"></script>
  <link href="{!URLFOR($Resource.ForceSquare, 'ForceSquare/leaflet.css')}" type="text/css" rel="stylesheet" />
  <script src="{!URLFOR($Resource.ForceSquare, 'ForceSquare/apisamples.js')}" type="text/javascript"></script>
  <script type="text/javascript" src="https://ss0.4sqi.net/scripts/third_party/jquery.ba-bbq-eddd4adf74d0c1310a401475178c57df.js"></script>
  <script src="{!URLFOR($Resource.ForceSquare, 'ForceSquare/leaflet.js')}" type="text/javascript"></script>
  <script src="{!URLFOR($Resource.ForceSquare, 'ForceSquare/wax.leaf.min.js')}" type="text/javascript"></script>
 
  <style type="text/css">
    html { height: 100%; }
    body { height: 100%; margin: 0; padding: 0; }
    /* Give our markers a background image */
    .leaflet-marker-icon {
      background: url(https://foursquare.com/img/pin-blue-transparent.png);
      padding: 6px;
      padding-bottom: 17px;
      top: -6px;
      left: -6px;
      }
  </style>
 
  <script type="text/javascript">
  
  //<![CDATA[
  var client_id = '<YOURCLIENTID>';
  var callback_url = 'https://cs17.salesforce.com/apex/FourSquarePage';

  /* Attempt to retrieve access token from URL. */
  if ($.bbq.getState('access_token')) {
    var token = $.bbq.getState('access_token');
    $.bbq.pushState({}, 2)
  } else if ($.bbq.getState('error')) {
  } else {
    /* Redirect for foursquare authentication. */
    window.location.href = 'https://foursquare.com/oauth2/authenticate?client_id=' + client_id
    + '&response_type=token&redirect_uri=' + callback_url;
  }  

  /* HTML 5 geolocation. */
  navigator.geolocation.getCurrentPosition(function(data) {
    var lat = data['coords']['latitude'];
    var lng = data['coords']['longitude'];
    /* Create map. */
    var map = new L.Map('map_canvas')
      .setView(new L.LatLng(lat, lng), 15);
    /**
     * This is a sample map url that you need to change.
     * Sign up at http://mapbox.com/foursquare for a custom map url.
     */
    var mapboxUrl = 'http://a.tiles.mapbox.com/v3/foursquare.map-b7qq4a62.jsonp';
    wax.tilejson(mapboxUrl, function(tilejson) {
      map.addLayer(new wax.leaf.connector(tilejson));
    });

    /* Query foursquare API for venue recommendations near the current location. */
    $.getJSON('https://api.foursquare.com/v2/venues/explore?ll=' + lat + ',' + lng + '&oauth_token=' + token, {}, function(data) {
      venues = data['response']['groups'][0]['items'];
      /* Place marker for each venue. */
      for (var i = 0; i < venues.length; i++) {
        /* Get marker's location */
        var latLng = new L.LatLng(
          venues[i]['venue']['location']['lat'], 
          venues[i]['venue']['location']['lng']
        );
        /* Build icon for each icon */
        var leafletIcon = L.Icon.extend({
          iconUrl: venues[i]['venue']['categories'][0]['icon'],
          shadowUrl: null,
          iconSize: new L.Point(32,32),
          iconAnchor: new L.Point(16, 41),
          popupAnchor: new L.Point(0, -51)
        });
        var icon = new leafletIcon();
        var marker = new L.Marker(latLng, {icon: icon})
          .bindPopup(venues[i]['venue']['name'], { closeButton: false })
          .on('mouseover', function(e) { this.openPopup(); })
          .on('mouseout', function(e) { this.closePopup(); });
        map.addLayer(marker);
      }       
    })
  })
  //]]>
  </script>
 
  
</head>
<body>
  <div style="width: 100%; height: 100%;" id="map_canvas"></div>
</body>
</html>
</apex:page>

Set in visualforce page:

var client_id = ‘YOURCLIENTAPPID’;
var callback_url = https://.salesforce.com/apex/FourSquarePage

Set in FourSquare App Setup Page:

Redirect URL https://.salesforce.com/apex/FourSquarePage

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: