OpenLayers with Flickr and Panoraimo APIs

OpenLayers has a cool example of using Flickr API to pull photos for a bounding box. When I saw this example, I right away thought about making it better by adding Panoramio photos as well with their API. This example of using Panoramio API with OpenLayers was helpful and I made a quick demo of Flickr and Panoramio Photos with OpenLayers. I have used Bing tiles and limited the zoom but than I noticed “Uncaught TypeError” errors in the console on page load. In Chrome it was Uncaught TypeError: Object #Object has no method ‘c1′ and FireFox gave me TypeError: OpenLayers.Protocol.Script.registry.c1 is not a function.

Since I did not see these errors with OpenStreetMap tiles, I figured it had something to do with the base layer so I decided to wrap the API calls in a callback function upon loading of the base Bing layer. This worked but when I started dragging the map around to different areas, the errors came back. I went back to the original OpenLayers BBOX Strategy Example and noticed the same errors on map panning so something was clearly broken. I looked at the BBOX strategy and the Script protocol for vector layers and concluded that the errors are most likely connected to firing JSONP Ajax requests without proper callbacks getting setup.

I started looking around for other OpenLayers BBOX implementations with API calls and landed on Jorge Sanz presentation on OpenLayers and Social Networks. I highly recommend checking out these slides and further search landed me on the GitHub code for Social Services Integration for OpenLayers. It looks really neat with popular API integration and even POIProxy but the demo is throwing the same JavaScript errors.

So, lets fix that. I went back to my example and decided to transfer the code from OpenLayers.Format into my own function that will be used for JSON parsing and JSONP responses. I added a callbackTemplate parameter into the OpenLayers.Protocol.Script constructor and this takes care of the errors and gives me more control around JSONP callbacks. But, at this point, I am not using all the OpenLayers functions and have to do more work with manual JavaScript. Still, it fixes all the JavaScript errors. Check out the final demo and compare the source to the previous examples above.

By the way, POIProxy is amazing, just checkout this demo done with Leaflet which integrates a ton of APIs.

Related:

OpenLayers Vector Mayhem
Common OpenLayers Pitfalls
OpenLayers Workshop Examples and Links
Panoraimo photos in OpenLayers
OpenLayers Controls
OpenLayers Panoraimo without BBOX and using OpenLayers.loadURL