javascript - Getting location data from an image (Instagram/JS) -
i've been working on side project , have hit roadblock. can search through tags , display picture results fine, i'd put details below each picture, location information. i'm doing in javascript, , commented out lines believe need adjusted, comment marks removed not pictures show up. tips? json object printed call instagram returns 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 code looks this:
// instantiate empty object. var instagram = {}; // small object 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 tag. try searching cherry blossoms."); } else { // make sure tag string, trim trailing/leading whitespace , take first // word, if there multiple. tag = string(tag).trim().split(" ")[0]; } // configures url search pictures fit 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 event handler `submit` event on form $('form').on('submit', function(e){ // stop form fulfilling destinty. e.preventdefault(); // extract value of search input text field. var tag = $('input.search-tag').val().trim(); // invoke `search`, passing `tag` (unless tag 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'); });
this works, long photo has location data, not 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 empty object. var instagram = {}; // small object 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 tag. try searching cats."); } else { // make sure tag string, trim trailing/leading whitespace , take first // word, if there 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 event handler `submit` event on form $('form').on('submit', function(e){ // stop form fulfilling destinty. e.preventdefault(); // extract value of search input text field. var tag = $('input.search-tag').val().trim(); // invoke `search`, passing `tag` (unless tag 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 search on cats; love cats. instagram.app.search('cats'); }); on jsfiddle
Comments
Post a Comment