Log in


by mika 20. September 2011 11:26

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.addControl(new OpenLayers.Control.LayerSwitcher());
    var panoramio = new OpenLayers.Layer.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/'

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)



Comments (6) -

9/21/2011 10:29:16 AM #


Great Job !!!

Florent France |

6/25/2012 8:52:29 AM #


Bardzo fajne rozszerzenie dla OpenLayersow. Ale dziala tylko z openlayersami w wersji 2.11. Jest szansa aby dzialalo ze starszymi wersjami??

Sir Poland |

6/26/2012 7:51:12 AM #


Just add a reference to this file from 2.11: 2.11/lib/OpenLayers/Protocol/Script.js
And you should be good to go.

mika Poland |

6/26/2012 11:52:29 AM #


Thx for reply! I'm using OpenLayers 2.8 and additionaly I had to add:
OpenLayers.Util.urlAppend function to Util.js
removeAllFeatures method to OpenLayers.Layer.Vector Class in Vector.js
now it works great!

Sir Poland |

1/20/2013 1:19:27 PM #


Very cool!
Somehow I'm missing the close icon in the top right corner of the popup window.
Any idea?

Marcus Germany |

1/20/2013 1:39:50 PM #


Make sure you have all the ol css and images loaded

mika United States |

footer cartoninjas.net cartomatic.net blogengine.net pgdstudio.pl