OpenLayers.Layer.Panoramio

While working on one of our recent projects we came with an idea (or I should rather say - we eventually managed to spare some time on something not strictly project related ;) that giving some more context to a map should improve the perception of the map data itself:

Looks like the idea is not only ours (surprise, surprise... ;-) - here is one of the fresh posts to the OpenLayers dev forum and a live example of 'Social' OpenLayers layers here.

So to add to the layer 'stack' presented by Javi we would like to share some of our work - a Panoramio layer. We wanted it to be as easy to set up as possible and actually it could not be easier:

var panoramio = new OpenLayers.Layer.Panoramio('Panoramio');

There is a little thing though... Currently the layer class expects the panoramio layer images to be located at: 'customLayers/panoramio-marker.png'. Fortunately it is possible to overwrite it with params passed to the constructor. Below are the most handy ones:

var panoramio = new OpenLayers.Layer.Panoramio(	'Panoramio',
	{
		p_jsonp: true,
		p_proxyHost: 'xDomainProxy.ashx?url=',
    	p_numOfPicsPulled: 100,
    	p_set : 'public',
    	p_size: 'small',
    	p_usePanoramioMarker: true,
    	p_panoramioImageFolderRelativePath: 'jsLibs/OpenLayers/customClasses/panoramio/',
    	p_selectCallback: function(evt){console.log(evt);}
    });
  • p_jsonp: tells the layer whether to use OpenLayers.Protocol.Script over OpenLayers.​loadURL. The latter requires a proxy to be set. By default this param is set to true
  • p_proxyHost: defines a proxy host for the layer. If OpenLayers.ProxyHost is already defined, the layer will use it otherwise it will set the OpenLayers.ProxyHost with the value provided
  • p_numOfPicsPulled: specifies the number of photos pulled at a time - default is 50, max allowed by the Panoramio service is 100
  • p_set: defines the subset of pics that are pulled from the Panoramio web service; Possible values are: public, full, user ID number; If not set defaults to 'public'
  • p_size: defines the size of pictures pulled from panoramio; possible values are: mini_square || square || thumbnail || small || medium (panoramio web service default value) || original; If not set defaults to 'small'
  • p_usePanoramioMarker: defines whether or not use panoramio marker icon for features; if set to false image thumbnails (mini_square) will appear on the layer instead of the markers; If not set defaults to true
  • p_panoramioImageFolderRelativePath: defines the source of the panoramio marker icon and panoramio logo; If not set defaults to an empty string
  • p_selectCallback: Used to overwrite the default behavior of displaying the picture popup on the map; The passed function will receive an evt object passed from the layer's select control; example of use: p_panoramioMiniSquare: function(evt){console.log(evt);}

There is a few more params that can be set, for example: p_panoramioMarker defining a filename of the marker or p_panoramioLogo defining the logo file. For some more info on the allowed params, please consult the code of the class.

A full example could then be:

function launchMap(){
		
	map = new OpenLayers.Map({
		div: 'map'
	});

	var gsat = new OpenLayers.Layer.Google(
	    "Google Satellite",
	    {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
	    // used to be {type: G_SATELLITE_MAP, numZoomLevels: 22}
	);
    
    map.addLayer(gsat);
    
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    
    var panoramio = new OpenLayers.Layer.Panoramio(
	'Panoramio',
	{
		p_jsonp: true,
		p_proxyHost: 'xDomainProxy.ashx?url=',
    	p_numOfPicsPulled: 100, 
    	p_set : 'public',
    	p_size: 'small',
    	p_usePanoramioMarker: true,
    	p_panoramioImageFolderRelativePath: 'jsLibs/OpenLayers/customClasses/panoramio/'
    });      
    
    map.addLayer(panoramio);
 
    map.zoomToMaxExtent();
}

Ok, since we went through the code it is time to demonstrate a little example.

EDIT: looks like popups get messed by our blog engine...; they should look normally in a standard implementation though

Bugs, features? Please let us know!

Our OpenLayer.Layer.Panoramio layer code may be downloaded here: panoramio.zip (12.73 kb)

blog comments powered by Disqus