Getting location data from an image (Instagram/JS)

StackOverflow https://stackoverflow.com/questions/16512971

Question

I've been working on a side project and have hit a roadblock. I can search through tags and display their picture results just fine, but I'd also like to put the details below each picture, specifically the location information. I'm doing this in Javascript, and commented out the lines I believe need to be adjusted, but with the comment marks removed not even the pictures show up. Any tips? A JSON object printed by a call to Instagram returns this data:

Object
  - data: Array[20]
    - 0: Object
      + caption: Object
      + comments: Object
        created_time: "1334402906"
        filter: "Nashville"
        id: "169306311223447303_5913362"
      - images: Object
        + low_resolution: Object
        - standard_resolution: Object
          height: 612
          url: "http://distilleryimage7.instagram.com/f3f8d7b2862411e19dc71231380fe523_7.jpg"
          width: 612
        + thumbnail: Object
        + likes: Object
          link: "http://instagr.am/p/JZfzFqtI8H/"
          location: Object
          tags: Array[1]
          type: "image"
          user: Object

And my code looks like this:

// Instantiate an empty object.
var Instagram = {};

// Small object for holding important configuration data.
Instagram.Config = {
  clientID: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  apiHost: 'https://api.instagram.com'
};


// ************************
// ** Main Application Code
// ************************
(function(){
  var photoTemplate, resource;

  function init(){
    bindEventHandlers();
    photoTemplate = _.template($('#photo-template').html());
  }

  function toTemplate(photo){
    photo = {
      count: photo.likes.count,
      avatar: photo.user.profile_picture,
      photo: photo.images.low_resolution.url,
      url: photo.link
      //location: photo.location  <--------------------------This line.
    };

    return photoTemplate(photo);
  }

  function toScreen(photos){
    var photos_html = '';
    //var photos_location = ''; <------------------------This line.

    $('.paginate a').attr('data-max-tag-id', photos.pagination.next_max_id)
                    .fadeIn();

    $.each(photos.data, function(index, photo){
      photos_html += toTemplate(photo);
      //photos_location += toTemplate(photo); <-----------------This line.
    });

    $('div#photos-wrap').append(photos_html);
    //$('div#photos-wrap').append(photos_location) <------------------This line. 
  }


  function generateResource(tag){
    var config = Instagram.Config, url;

    if(typeof tag === 'undefined'){
      throw new Error("Resource requires a tag. Try searching for cherry blossoms.");
    } else {
      // Make sure tag is a string, trim any trailing/leading whitespace and take only the first
      // word, if there are multiple.
      tag = String(tag).trim().split(" ")[0];
    }

    // Configures the URL to search for pictures that fit the tag description.
    url = config.apiHost + "/v1/tags/" + tag + "/media/recent?callback=?&client_id=" + config.clientID;

    return function(max_id){
      var next_page;
      if(typeof max_id === 'string' && max_id.trim() !== '') {
        next_page = url + "&max_id=" + max_id;
      }
      return next_page || url;
    };
  }

  function paginate(max_id){
    $.getJSON(generateUrl(tag), toScreen);
  }

  function search(tag){
    resource = generateResource(tag);
    $('.paginate a').hide();
    $('#photos-wrap *').remove();
    fetchPhotos();
  }

  function fetchPhotos(max_id){
    $.getJSON(resource(max_id), toScreen);
  }

  function bindEventHandlers(){
    $('body').on('click', '.paginate a.btn', function(){
      var tagID = $(this).attr('data-max-tag-id');
      fetchPhotos(tagID);
      return false;
    });

    // Bind an event handler to the `submit` event on the form
    $('form').on('submit', function(e){

      // Stop the form from fulfilling its destinty.
      e.preventDefault();

      // Extract the value of the search input text field.
      var tag = $('input.search-tag').val().trim();

      // Invoke `search`, passing `tag` (unless tag is an empty string).
      if(tag) {
        search(tag);
      };

    });

  }

  function showPhoto(p){
    $(p).fadeIn();
  }

  // Public API
  Instagram.App = {
    search: search,
    showPhoto: showPhoto,
    init: init
  };
}());


$(function(){
  Instagram.App.init();

  Instagram.App.search('takoyaki');
});
Was it helpful?

Solution

This works, as long as the photo has location data, not all of them do

CSS

body {
  background: #e3e8ec url(http://grammy.eduvoyage.com/images/tile.png) repeat 50% 0;
}
#search {
  height: 40px;
  padding: 10px;
  text-align: center;
  position: fixed;
  width: 240px;
  margin: 0 auto;
  z-index: 100;
  left: 50%;
  top: 0;
  margin-left: -130px;
  border-radius:0 0 5px 5px;
}

.search-wrap {
  background: white;
  line-height: 30px;
  height: 30px;
  text-align: left;
  border-radius: 3px;
  width: 230px;
  margin: 0;
  border: 1px solid #ddd;
}

#photos-wrap {
  width: 810px;
  margin: 70px auto 40px auto;
  position: relative;
  z-index: 1;
}

.photo .avatar {
  width: 40px;
  height: 40px;
  padding: 2px;
  position: absolute;
  bottom: 11px;
  right: 8px;
  background: white;
}

.photo  {
  margin-bottom: 20px;
  float: left;
  position: relative;
  width: 250px;
  height: 250px;
  border-radius: 5px;
  background: white;
  padding: 5px;
  margin: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.photo .heart {
  height: 16px;
  position: absolute;
  left: 13px;
  bottom: 16px;
  padding: 0 5px 0 22px;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  border-radius: 2px;
  border: 1px solid #ddd;
  background: white url('http://grammy.eduvoyage.com/images/fav.png') no-repeat 2px 0;
}

.paginate {
  display: block;
  clear: both;
  margin: 10px;
  text-align: center;
  margin: 0 auto;
  padding: 20px 0;
  height: 100px;
}

.location {
    position: relative;
    top: -48px;
    left: 7px;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    background-color: white;
}

HTML 

      <div id='photos-wrap'>
      </div>

      <div class='paginate'>
        <a class='btn'  style='display:none;' data-max-tag-id='' href='#'>View More...</a>
      </div>
    </div>
  </div>
</div>

<script type="text/template" id="photo-template">
  <div class='photo'>
    <a href='<%= url %>' target='_blank'>
      <img class='main' src='<%= photo %>' width='250' height='250' style='display:none;' onload='Instagram.App.showPhoto(this);'/>
    </a>
    <img class='avatar' width='40' height='40' src='<%= avatar %>' />
    <span class='heart'><strong><%= count %></strong></span>
    <span class='location'><%= longitude %> <%= latitude %></span>
  </div>
</script>

Javascript

// Instantiate an empty object.
var Instagram = {};

// Small object for holding important configuration data.
Instagram.Config = {
  clientID: '4895197dfce340cb9004101ce6ae9215',
  apiHost: 'https://api.instagram.com'
};


// ************************
// ** Main Application Code
// ************************
(function(){
  var photoTemplate, resource;

  function init(){
    bindEventHandlers();
    photoTemplate = _.template($('#photo-template').html());
  }

  function toTemplate(photo){
    photo = {
      count: photo.likes.count,
      avatar: photo.user.profile_picture,
      photo: photo.images.low_resolution.url,
      url: photo.link,
      longitude: photo.location && photo.location.longitude,
      latitude: photo.location && photo.location.latitude
    };

    return photoTemplate(photo);
  }

  function toScreen(photos){
    var photos_html = '';

    $('.paginate a').attr('data-max-tag-id', photos.pagination.next_max_id)
                    .fadeIn();

    $.each(photos.data, function(index, photo){
      photos_html += toTemplate(photo);
    });

    $('div#photos-wrap').append(photos_html);
  }

  function generateResource(tag){
    var config = Instagram.Config, url;

    if(typeof tag === 'undefined'){
      throw new Error("Resource requires a tag. Try searching for cats.");
    } else {
      // Make sure tag is a string, trim any trailing/leading whitespace and take only the first 
      // word, if there are multiple.
      tag = String(tag).trim().split(" ")[0];
    }

    url = config.apiHost + "/v1/tags/" + tag + "/media/recent?callback=?&client_id=" + config.clientID;

    return function(max_id){
      var next_page;
      if(typeof max_id === 'string' && max_id.trim() !== '') {
        next_page = url + "&max_id=" + max_id;
      }
      return next_page || url;
    };
  }

  function paginate(max_id){    
    $.getJSON(generateUrl(tag), toScreen);
  }

  function search(tag){
    resource = generateResource(tag);
    $('.paginate a').hide();
    $('#photos-wrap *').remove();
    fetchPhotos();
  }

  function fetchPhotos(max_id){
    $.getJSON(resource(max_id), toScreen);
  }

  function bindEventHandlers(){
    $('body').on('click', '.paginate a.btn', function(){
      var tagID = $(this).attr('data-max-tag-id');
      fetchPhotos(tagID);
      return false;
    });

    // Bind an event handler to the `submit` event on the form
    $('form').on('submit', function(e){

      // Stop the form from fulfilling its destinty.
      e.preventDefault();

      // Extract the value of the search input text field.
      var tag = $('input.search-tag').val().trim();

      // Invoke `search`, passing `tag` (unless tag is an empty string).
      if(tag) {
        search(tag);
      };

    });

  }

  function showPhoto(p){
    $(p).fadeIn();
  }

  // Public API
  Instagram.App = {
    search: search,
    showPhoto: showPhoto,
    init: init
  };
}());

$(function(){
  Instagram.App.init();

  // Start with a search on cats; we all love cats.
  Instagram.App.search('cats');  
});

On jsfiddle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top