Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

adding a panoramio example

  • Loading branch information...
commit 43c78b9d2e860c9a0a957da00d6aa4013276fce6 1 parent 17d02c0
procrastinatio authored
33 examples/lib/OpenLayers.Format.Panoramio.js
... ... @@ -0,0 +1,33 @@
  1 +OpenLayers.Format.Panoramio = OpenLayers.Class(OpenLayers.Format.JSON, {
  2 + read: function(json) {
  3 + var obj = null;
  4 + if (typeof json == "string") {
  5 + obj = OpenLayers.Format.JSON.prototype.read.apply(this, [json]);
  6 + } else {
  7 + obj = json;
  8 + }
  9 + if(!obj.count) {
  10 + throw new Error('Panoramio failure response');
  11 + }
  12 + if(!obj || !obj.photos ||
  13 + !OpenLayers.Util.isArray(obj.photos)) {
  14 + throw new Error(
  15 + 'Unexpected Panoramio response');
  16 + }
  17 + var photos = obj.photos, photo,
  18 + x, y, point,
  19 + feature, features = [];
  20 + for(var i=0,l=photos.length; i<l; i++) {
  21 + photo = photos[i];
  22 + x = photo.longitude;
  23 + y = photo.latitude;
  24 + point = new OpenLayers.Geometry.Point(x, y);
  25 + feature = new OpenLayers.Feature.Vector(point, {
  26 + title: photo.photo_title,
  27 + img_url: photo.photo_file_url
  28 + });
  29 + features.push(feature);
  30 + }
  31 + return features;
  32 + }
  33 + });
34 examples/panoramio.html
... ... @@ -0,0 +1,34 @@
  1 +<!DOCTYPE html>
  2 +<html>
  3 + <head>
  4 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6 + <meta name="apple-mobile-web-app-capable" content="yes">
  7 + <title>GeoAdmin Panorami Example</title>
  8 + <link rel="stylesheet" href="style.css" type="text/css">
  9 + <link href='http://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'>
  10 + <script src="Jugl.js"></script>
  11 + <script src="animator.js"></script>
  12 +
  13 + <body class="examples" onload="init()">
  14 + <h1 id="title">GeoAdmin and Panoramio Example</h1>
  15 + <div id="tags">
  16 + vector, panoramio, photos, strategy, geoadmin, script, jsonp
  17 + </div>
  18 + <div class="content">
  19 + <p id="shortdesc">
  20 + Uses GeoAdmin to display photos from Panoramio.
  21 + </p>
  22 + <div id="map" style="width: 600px; height:400px"></div>
  23 + <div id="docs">
  24 + <p>Displaying geo tagged photos from <a href="http://www.panoramio.com/api/data/api.html">Panoramio</a> on GeoAdmin
  25 + 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>
  26 + <p></p>
  27 + <p>View the <a href="panoramio.js" target="_blank">panoramio.js</a> source to see how this is done.</p>
  28 + </div>
  29 + <script src="http://api.geo.admin.ch/loader.js?mode=full"></script>
  30 + <script src="lib/OpenLayers.Format.Panoramio.js"></script>
  31 + <script type="text/javascript" src="panoramio.js"></script>
  32 + </body>
  33 +</html>
  34 +
53 examples/panoramio.js
... ... @@ -0,0 +1,53 @@
  1 +var map, photos;
  2 +
  3 +function init() {
  4 +
  5 + map = new GeoAdmin.Map("map", {
  6 + doZoomToMaxExtent: true
  7 + });
  8 + map.switchComplementaryLayer('ch.swisstopo.pixelkarte-farbe', {
  9 + opacity: 100
  10 + });
  11 +
  12 + var style = new OpenLayers.Style({
  13 + externalGraphic: "${img_url}",
  14 + pointRadius: 30
  15 + });
  16 +
  17 + photos = new OpenLayers.Layer.Vector("Photos", {
  18 + projection: "EPSG:4326",
  19 + strategies: [new OpenLayers.Strategy.BBOX({
  20 + resFactor: 1
  21 + })],
  22 + format: new OpenLayers.Format.Panoramio(),
  23 + protocol: new OpenLayers.Protocol.Script({
  24 + url: "http://www.panoramio.com/map/get_panoramas",
  25 + params: {
  26 + order: 'popularity',
  27 + set: 'full',
  28 + from: 0,
  29 + to: 50,
  30 + size: 'thumbnail'
  31 +
  32 + },
  33 + filterToParams: function(filter, params) {
  34 + // example to demonstrate BBOX serialization
  35 + if (filter.type === OpenLayers.Filter.Spatial.BBOX) {
  36 + var bounds = filter.value;
  37 + params.minx = bounds.left;
  38 + params.miny = bounds.bottom;
  39 + params.maxx = bounds.right;
  40 + params.maxy = bounds.top;
  41 + params.bbox = filter.value.toArray();
  42 + }
  43 + return params;
  44 + },
  45 + callbackKey: 'callback',
  46 + format: new OpenLayers.Format.Panoramio()
  47 + }),
  48 + styleMap: new OpenLayers.StyleMap(style)
  49 + });
  50 +
  51 + map.addLayer(photos);
  52 +
  53 +}

0 comments on commit 43c78b9

Please sign in to comment.
Something went wrong with that request. Please try again.