In my last blog post, I presented a new plugin, Leaflet.Photo, that allows you to display geotagged photos from any source. Among them was Google+ Photos and Picasa Web Albums API. My plan is to use this API for my travel map, and this is why.
Does Picasa Web Albums still exist?
It's a bit messy these days. Google is trying to transition from Picasa Web Albums to Google+ Photos, as photos are the number one things that people want to share on social networks. When you use Picasa to share your albums (Sync to Web), the album URL is now on your Google+ profile, and not on Picasa Web Albums (which is just redirecting me to Google+). This is the URL to the public album from my trip to the Trollfjord:
https://plus.google.com/photos/+BjørnSandvik/albums/6052628080819524545
It also works with your Google+ user id:
https://plus.google.com/photos/118196887774002693676/albums/6052628080819524545
The thing is, there is no Google+ API for photos and videos yet (apparently they were working on it back in 2011). But the Google Web Albums API still works on your Google+ albums.
Google Web Albums API is not the easiest API I've worked with, but it's flexible and quite fast. This is an XML feed of my public album from Trollfjord:
https://picasaweb.google.com/data/feed/api/user/118196887774002693676/albumid/6052628080819524545
The user number and album id is the same as above. Or better for your JavaScript apps, a JSON feed:
https://picasaweb.google.com/data/feed/api/user/118196887774002693676/albumid/6052628080819524545?alt=json
And if you're still using JSONP:
https://picasaweb.google.com/data/feed/api/user/118196887774002693676/albumid/6052628080819524545?alt=json-in-script
If you click on any of these links, you'll see that it's not a very compact format. There is a lot of data that you don't need. Although complicated, you can select the fields you want to include in the feed. This is how I selected the following elements:
This is the new URL:
https://picasaweb.google.com/data/feed/api/user/118196887774002693676/albumid/6052628080819524545?alt=json&fields=entry/media:group/media:content,entry/media:group/media:description,entry/media:group/media:thumbnail,entry/gphoto:timestamp,entry/georss:where
While researching, I also learnt that I could use the imgmax attribute to specify the size of the photos referenced in the photo URL. Neat!
So why should I use this (relatively) old API?
Compared to other popular social media sites, Google don't strip off the meta information of your photos. Instead it uses the build in support for image metadata extensively. Hopefully Google will continue to do this, although social media sites have reasons not doing so.
This means that Google don't lock you in. I can change the location of my photos using my GPS tracks, and it's reflected where I embed my photos. I can edit the image captions in Picasa and it's stored within the image file, allowing me to write the caption once and use it everywhere.
So what is my album workflow for my travel map. Before starting my journey, I'm creating a new Google+ album. The feed from this album is attached to my map, by simply passing on the album id. While on journey, I use the Google Photos app to add photos to the album, that will automagically show up on the map as well. Back from trip, I can add and edit photos from my digital camera in Picasa and sync them to the web album.
Update 12 September 2015: I'm having trouble uploading images with the Google photos app. The images are geotagged and the location data shows in the Google+ album, but unfortunately the location data is not included in the API feed. Please notify me if you're able to get this to work.
PS! This blog post is not sponsored by Google :-)
Does Picasa Web Albums still exist?
It's a bit messy these days. Google is trying to transition from Picasa Web Albums to Google+ Photos, as photos are the number one things that people want to share on social networks. When you use Picasa to share your albums (Sync to Web), the album URL is now on your Google+ profile, and not on Picasa Web Albums (which is just redirecting me to Google+). This is the URL to the public album from my trip to the Trollfjord:
https://plus.google.com/photos/+BjørnSandvik/albums/6052628080819524545
It also works with your Google+ user id:
https://plus.google.com/photos/118196887774002693676/albums/6052628080819524545
 |
| My public Google+ web album. The album contains both photos and videos. |
The thing is, there is no Google+ API for photos and videos yet (apparently they were working on it back in 2011). But the Google Web Albums API still works on your Google+ albums.
Google Web Albums API is not the easiest API I've worked with, but it's flexible and quite fast. This is an XML feed of my public album from Trollfjord:
https://picasaweb.google.com/data/feed/api/user/118196887774002693676/albumid/6052628080819524545
The user number and album id is the same as above. Or better for your JavaScript apps, a JSON feed:
https://picasaweb.google.com/data/feed/api/user/118196887774002693676/albumid/6052628080819524545?alt=json
And if you're still using JSONP:
https://picasaweb.google.com/data/feed/api/user/118196887774002693676/albumid/6052628080819524545?alt=json-in-script
If you click on any of these links, you'll see that it's not a very compact format. There is a lot of data that you don't need. Although complicated, you can select the fields you want to include in the feed. This is how I selected the following elements:
- Photo URL: entry/media:group/media:content
- Photo caption: entry/media:group/media:description
- Photo thumbnail URL: entry/media:group/media:thumbnail
- Photo timestamp: entry/gphoto:timestamp
- Photo location: entry/georss:where
This is the new URL:
https://picasaweb.google.com/data/feed/api/user/118196887774002693676/albumid/6052628080819524545?alt=json&fields=entry/media:group/media:content,entry/media:group/media:description,entry/media:group/media:thumbnail,entry/gphoto:timestamp,entry/georss:where
While researching, I also learnt that I could use the imgmax attribute to specify the size of the photos referenced in the photo URL. Neat!
So why should I use this (relatively) old API?
Compared to other popular social media sites, Google don't strip off the meta information of your photos. Instead it uses the build in support for image metadata extensively. Hopefully Google will continue to do this, although social media sites have reasons not doing so.
This means that Google don't lock you in. I can change the location of my photos using my GPS tracks, and it's reflected where I embed my photos. I can edit the image captions in Picasa and it's stored within the image file, allowing me to write the caption once and use it everywhere.
So what is my album workflow for my travel map. Before starting my journey, I'm creating a new Google+ album. The feed from this album is attached to my map, by simply passing on the album id. While on journey, I use the Google Photos app to add photos to the album, that will automagically show up on the map as well. Back from trip, I can add and edit photos from my digital camera in Picasa and sync them to the web album.
Update 12 September 2015: I'm having trouble uploading images with the Google photos app. The images are geotagged and the location data shows in the Google+ album, but unfortunately the location data is not included in the API feed. Please notify me if you're able to get this to work.
 |
| Photos from Google+ shown on my travel map. |
PS! This blog post is not sponsored by Google :-)
Comments
Code: https://github.com/minusinf/flickrmap (I haven't updated it in a while)
http://tagger.edina.ac.uk/
After having struggled with OpenLayers for a while (and with programming skills limited to HTML 1.0 and advanced BASIC programming in the DOS age), I just discovered how easy it is to create web maps with all kinds of base layers with Leaflet and it's plugins. And when I also discovered your Leaflet.Photo plugin, my search for a decent way to present photos on a map seems to be over! :-) Thanks for sharing!
I managed to figure out how to modify the link to a Picasa album which is limited to "people with the link" (had to add &authkey=xxxxx after ?alt=json-in-script at the end of the link).
I intended to display the photos in 640 px width. Beeing a photo nerd, I quickly noticed however that the quality of the photos on popup was rather poor, and looked like they had been upscaled. And after having taken a closer look at the RSS stream from the Picasa album, I saw that the photos were indeed upscaled, since the RSS stream specifies a width of 512 pixels! (The originals in the album were 1280 pixels.)
I can live with 512 px photos on a map, but if there is a way to pull out a slightly higher resolution, it would be perfect though. Do You know of any way to specify this in the Picasa link used in the code?
You can view your photos in all their glory by using the imgmax parameter:
https://picasaweb.google.com/data/feed/api/user/118196887774002693676/albumid/6052628080819524545?alt=json&imgmax=1600
Valid imgmax values: 94, 110, 128, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600
https://developers.google.com/picasa-web/docs/2.0/reference
You can view a demo in https://josemamira.github.io/saxweb/src/plugin/photo/index.html
Code in https://github.com/josemamira/saxweb/tree/gh-pages/src/plugin/photo