Permalink
Browse files

adding a panoramio example

  • Loading branch information...
1 parent 17d02c0 commit 43c78b9d2e860c9a0a957da00d6aa4013276fce6 @procrastinatio committed May 5, 2012
Showing with 120 additions and 0 deletions.
  1. +33 −0 examples/lib/OpenLayers.Format.Panoramio.js
  2. +34 −0 examples/panoramio.html
  3. +53 −0 examples/panoramio.js
@@ -0,0 +1,33 @@
+OpenLayers.Format.Panoramio = OpenLayers.Class(OpenLayers.Format.JSON, {
+ read: function(json) {
+ var obj = null;
+ if (typeof json == "string") {
+ obj = OpenLayers.Format.JSON.prototype.read.apply(this, [json]);
+ } else {
+ obj = json;
+ }
+ if(!obj.count) {
+ throw new Error('Panoramio failure response');
+ }
+ if(!obj || !obj.photos ||
+ !OpenLayers.Util.isArray(obj.photos)) {
+ throw new Error(
+ 'Unexpected Panoramio response');
+ }
+ var photos = obj.photos, photo,
+ x, y, point,
+ feature, features = [];
+ for(var i=0,l=photos.length; i<l; i++) {
+ photo = photos[i];
+ x = photo.longitude;
+ y = photo.latitude;
+ point = new OpenLayers.Geometry.Point(x, y);
+ feature = new OpenLayers.Feature.Vector(point, {
+ title: photo.photo_title,
+ img_url: photo.photo_file_url
+ });
+ features.push(feature);
+ }
+ return features;
+ }
+ });
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <title>GeoAdmin Panorami Example</title>
+ <link rel="stylesheet" href="style.css" type="text/css">
+ <link href='http://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'>
+ <script src="Jugl.js"></script>
+ <script src="animator.js"></script>
+
+ <body class="examples" onload="init()">
+ <h1 id="title">GeoAdmin and Panoramio Example</h1>
+ <div id="tags">
+ vector, panoramio, photos, strategy, geoadmin, script, jsonp
+ </div>
+ <div class="content">
+ <p id="shortdesc">
+ Uses GeoAdmin to display photos from Panoramio.
+ </p>
+ <div id="map" style="width: 600px; height:400px"></div>
+ <div id="docs">
+ <p>Displaying geo tagged photos from <a href="http://www.panoramio.com/api/data/api.html">Panoramio</a> on GeoAdmin
+ API. Using an <em>OpenLayers.Strategy.BBOX</em>, we get the 20 most popular photos fitting the map area each time the map is zoomed or paned.</p>
+ <p></p>
+ <p>View the <a href="panoramio.js" target="_blank">panoramio.js</a> source to see how this is done.</p>
+ </div>
+ <script src="http://api.geo.admin.ch/loader.js?mode=full"></script>
+ <script src="lib/OpenLayers.Format.Panoramio.js"></script>
+ <script type="text/javascript" src="panoramio.js"></script>
+ </body>
+</html>
+
View
@@ -0,0 +1,53 @@
+var map, photos;
+
+function init() {
+
+ map = new GeoAdmin.Map("map", {
+ doZoomToMaxExtent: true
+ });
+ map.switchComplementaryLayer('ch.swisstopo.pixelkarte-farbe', {
+ opacity: 100
+ });
+
+ var style = new OpenLayers.Style({
+ externalGraphic: "${img_url}",
+ pointRadius: 30
+ });
+
+ photos = new OpenLayers.Layer.Vector("Photos", {
+ projection: "EPSG:4326",
+ strategies: [new OpenLayers.Strategy.BBOX({
+ resFactor: 1
+ })],
+ format: new OpenLayers.Format.Panoramio(),
+ protocol: new OpenLayers.Protocol.Script({
+ url: "http://www.panoramio.com/map/get_panoramas",
+ params: {
+ order: 'popularity',
+ set: 'full',
+ from: 0,
+ to: 50,
+ size: 'thumbnail'
+
+ },
+ filterToParams: function(filter, params) {
+ // example to demonstrate BBOX serialization
+ if (filter.type === OpenLayers.Filter.Spatial.BBOX) {
+ var bounds = filter.value;
+ params.minx = bounds.left;
+ params.miny = bounds.bottom;
+ params.maxx = bounds.right;
+ params.maxy = bounds.top;
+ params.bbox = filter.value.toArray();
+ }
+ return params;
+ },
+ callbackKey: 'callback',
+ format: new OpenLayers.Format.Panoramio()
+ }),
+ styleMap: new OpenLayers.StyleMap(style)
+ });
+
+ map.addLayer(photos);
+
+}

0 comments on commit 43c78b9

Please sign in to comment.