flickr api integrated + map select behaviour

vurbanism/flyovers/models.py

@@ -1,5 +1,10 @@
 from django.contrib.gis.db import models
+import oxlib
+import flickr
+import settings
 
+flickr.API_KEY = settings.FLICKR_API_KEY
+flickr.SECRET = settings.FLICKR_SECRET
 
 class Flyover(models.Model):
   point = models.PointField()
@@ -32,12 +37,19 @@ class Image(models.Model):
   category = models.ForeignKey("ImageCategory")
   flyover = models.ForeignKey(Flyover)
 
+  def get_flickr_id(self):
+    regex = r'http\:\/\/.*?\/\d{4}/(.*?)_.*'
+    return oxlib.findRe(self.url, regex)
+
   def __unicode__(self):
     return self.url + " - " + self.caption + " - " + self.category.name
 
   def get_dict(self):
+    flickrPhoto = flickr.Photo(id=self.get_flickr_id())
+    sizes = flickrPhoto.getSizes()
     return {
       'url': self.url,
+      'sizes': sizes,
       'caption': self.caption,
       'flyover': {
         'id': self.flyover.id,

vurbanism/settings.py

@@ -8,6 +8,8 @@ TEMPLATE_DEBUG = DEBUG
 LOCAL_DEVELOPMENT = True
 JSON_DEBUG = DEBUG
 
+FLICKR_API_KEY = '692e00c5ed52e626c0960cfe9de5aa81'
+FLICKR_SECRET = '1872f2708dc4e9a4'
 ADMINS = (
     # ('Your Name', 'your_email@domain.com'),
 )

vurbanism/static/js/vurbanism.js

@@ -0,0 +1,175 @@
+var currentlySelectedFeature, jsonLayer, mapControl;
+
+
+// Simple JavaScript Templating
+// John Resig - http://ejohn.org/ - MIT Licensed
+(function(){
+  var cache = {};
+ 
+  this.tmpl = function tmpl(str, data){
+    // Figure out if we're getting a template, or if we need to
+    // load the template - and be sure to cache the result.
+    var fn = !/\W/.test(str) ?
+      cache[str] = cache[str] ||
+        tmpl(document.getElementById(str).innerHTML) :
+     
+      // Generate a reusable function that will serve as a template
+      // generator (and which will be cached).
+      new Function("obj",
+        "var p=[],print=function(){p.push.apply(p,arguments);};" +
+       
+        // Introduce the data as local variables using with(){}
+        "with(obj){p.push('" +
+       
+        // Convert the template into pure JavaScript
+        str
+          .replace(/[\r\t\n]/g, " ")
+          .split("<%").join("\t")
+          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
+          .replace(/\t=(.*?)%>/g, "',$1,'")
+          .split("\t").join("');")
+          .split("%>").join("p.push('")
+          .split("\r").join("\\'")
+      + "');}return p.join('');");
+   
+    // Provide some basic currying to the user
+    return data ? fn( data ) : fn;
+  };
+})();
+
+
+$(function() {
+  var center = new OpenLayers.LonLat(72.855211097628413, 19.010775291486027);
+  map = new OpenLayers.Map('map');
+  var layers = [];
+  layers[0] = new OpenLayers.Layer.Google(
+                "Google Streets", // the default
+                {numZoomLevels: 20, isBaseLayer: true}
+            );
+  geojson_format = new OpenLayers.Format.GeoJSON();
+  //yes, jsonLayer is global. Yes, I know it's wrong.
+/*
+  var symbolizer = OpenLayers.Util.applyDefaults(
+        {fillColor: 'green', opacity: 0.5, strokeColor: '#000', cursor: 'pointer'},
+        OpenLayers.Feature.Vector.style["default"]);
+  defaultStyles = new OpenLayers.StyleMap({"default": symbolizer, "selected": symbolizer});
+*/
+  jsonLayer = layers[1] = new OpenLayers.Layer.Vector({'geometryType': 'Point'});
+//  map.addLayer(vector_layer);
+  map.addLayers(layers);
+  map.setCenter(center, 12);
+
+  mapControl = new OpenLayers.Control.SelectFeature(layers[1], {hover: false}); 
+  map.addControl(mapControl);
+  mapControl.activate();
+  layers[1].events.on({
+    'featureselected': onFeatureSelect
+  });  
+});
+
+
+function onFeatureSelect(f) {
+  $.noop();
+/*
+  var id = f.feature.attributes.id;
+  $.getJSON("flyover", {'id': id}, function(json) {
+    $('#media').html(json.name + "<br /><br />");
+    $.each(json.media.images, function(i, v) {
+      var img = $('<img />').attr("src", v.url).css({'width': '100px', 'height': '100px'});
+      $('#media').append(img);
+    });
+  });
+*/
+}
+
+
+//will highlight the feature id's passed in arr
+function highlightFeatures(arr) {
+  var features = jsonLayer.features;
+  for (var f in features) {
+    if (features.hasOwnProperty(f)) {
+      if ($.inArray(features[f].attributes.id, arr) != -1) {
+        features[f].attributes.highlighted = 1;        
+        } else {
+        features[f].attributes.highlighted = 0;
+        }
+      }
+    }
+  highlightSelected();
+  }
+
+//Function to actually highlight features marked with highlighted = 1
+function highlightSelected() {
+//  alert("foo");
+  var lookup = {
+    0: {opacity: 0.3, strokeWidth: 0.4},
+    1: {opacity: 1, strokeWidth: 3, strokeOpacity: 0.6, strokeColor: '#5B00FF'}
+    }
+//  console.log(defaultStyles);
+  defaultStyles.addUniqueValueRules("default", "highlighted", lookup);
+  jsonLayer.redraw();
+//  console.log(jsonLayer);
+  return true;
+  }
+
+//When user mouses over an image, highlight that point on the map.
+function mouseOverImage(id) {
+  var features = jsonLayer.features;
+  for (var f in features) {
+    if (features.hasOwnProperty(f)) {
+      if (features[f].attributes.id == id) {
+        features[f].attributes.mousedover = 1;
+        } else {
+        features[f].attributes.mousedover = 0;
+        }
+      }
+    }
+  var lookup = {
+    0: {opacity: 0.3},
+    1: {strokeWidth: 6, strokeColor: '#1E90FF', strokeOpacity: 0.9}
+    }
+  defaultStyles.addUniqueValueRules("default", "mousedover", lookup);
+  jsonLayer.redraw();  
+  }
+
+$(function() {
+  $('td').click(function() {
+    $('td').removeClass('selected');
+    var catName = $(this).text();
+    var type = $(this).attr("class").replace("Category", "");
+    $(this).addClass('selected');
+    var id = $(this).attr("data-id");
+    $('#media').html("Loading images for " + catName + " .. please wait..");
+    $.getJSON("category", {'id': id, 'type': type}, function(json) {
+      var arr = [];
+      var features = json.flyovers;
+      var currFeatures = jsonLayer.features;
+      jsonLayer.removeFeatures(currFeatures);
+      jsonLayer.addFeatures(geojson_format.read(features));
+      var html = tmpl("tmpl_images", {'images': json.images});      
+      $('#media').html(html);
+    });
+  });
+});
+
+function getFlyoverById(id) {
+  var features = jsonLayer.features;
+  for (var i=0; i < features.length; i++) {
+    if (features[i].attributes.id == id) {
+      return features[i];
+    }
+  }  
+  return false;
+}
+
+$('.flyoverImage').live("mouseover", function() {
+  var id = $(this).attr("data-id");
+  console.log(id);
+  var flyover = getFlyoverById(id);
+  mapControl.select(flyover);
+  currentlySelectedFeature = flyover;
+});
+
+$('.flyoverImage').live("mouseout", function() {
+  mapControl.unselect(currentlySelectedFeature);  
+});

vurbanism/templates/flyovers.html

@@ -8,9 +8,9 @@ body {
   height: 100%;
   background: #999;
   background: -moz-radial-gradient(45px 45px 45deg, circle cover,
-				 #FF9100 0%, #F4F15C 100%, #fff 95%);
+				 #ABAE71 0%, #CDD53F 100%, #E6F215 95%);
   background: -webkit-gradient(radial, 45px 45px 45deg, circle cover,
-				 #FF9100 0%, #F4F15C 100%, #fff 95%);
+				 #ABAE71 0%, #CDD53F 100%, #E6F215 95%);
 }
 
 #wrapper {
@@ -18,6 +18,10 @@ body {
   height: 100%;
 }
 
+a img {
+  border: 0px;
+}
+
 #categories {
   position: absolute;
   top: 10px;
@@ -43,10 +47,25 @@ body {
   cursor: pointer;
 }
 
+.selected {
+  background: #000 !important;
+  color: #fff !important;
+}
+
 .imageCategory {
   background: #ffd055;
 }
 
+.imageWrapper {
+  float: left;
+  width: 140px;
+  text-align: center;
+}
+
+.imagesWrapper {
+  overflow: auto;
+}
+
 .videoCategory {
   background: #ff6066;
 }
@@ -68,6 +87,7 @@ body {
   -moz-box-shadow: 0px 0px 1em;
   -webkit-box-shadow: 0px 0px 1em;
   box-shadow: 0px 0px 1em;
+
 }
 
 #media {
@@ -87,46 +107,24 @@ body {
   <script type="text/javascript" src="/static/js/openlayers/OpenLayers.js"></script>
   <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAsn1j-ZGGtRgZ9aMJPCZbRxTEwe8r4EmncxniwLCEI2F-aeUoNRTBAUi3uvVAsZpLkcO78Ryd18Hfaw'></script>
 
-  <script type="text/javascript">
+  <script type="text/javascript" src="/static/js/vurbanism.js"></script>
-$(function() {
-  var center = new OpenLayers.LonLat(72.855211097628413, 19.010775291486027);
-  map = new OpenLayers.Map('map');
-  var layers = [];
-  layers[0] = new OpenLayers.Layer.Google(
-                "Google Streets", // the default
-                {numZoomLevels: 20, isBaseLayer: true}
-            );
-  var geojson_format = new OpenLayers.Format.GeoJSON();
-  layers[1] = new OpenLayers.Layer.Vector({'geometryType': 'Point'});
-//  map.addLayer(vector_layer);
-  map.addLayers(layers);
-  map.setCenter(center, 12);
-  var control = new OpenLayers.Control.SelectFeature(layers[1], {hover: false}); 
-  map.addControl(control);
-  control.activate();
-  $.getJSON("geojson", {}, function(json) {
-    layers[1].addFeatures(geojson_format.read(json));
-    layers[1].events.on({
-      'featureselected': onFeatureSelect
-    });
-  });
-});
-
-function onFeatureSelect(f) {
-  var id = f.feature.attributes.id;
-  $.getJSON("flyover", {'id': id}, function(json) {
-    $('#media').html(json.name + "<br /><br />");
-    $.each(json.media.images, function(i, v) {
-      var img = $('<img />').attr("src", v.url).css({'width': '100px', 'height': '100px'});
-      $('#media').append(img);
-    });
-  });
-}
 
 
-  </script>
 </head>
 <body>
+  <script type="text/html" id="tmpl_images">
+<div class="imagesWrapper">
+  <% for (var i=0; i<images.length;i++) { var img = images[i]; %>
+    <div class="imageWrapper">
+      <a href="<%= img.sizes[3].source %>" class="flyoverImage" title="<%= img.caption %>" data-id="<%= img.flyover.id %>" rel="group_<%= img.id %>">
+        <img src="<%= img.sizes[0].source %>" alt="<%= img.caption %>" />
+      </a> 
+    </div>
+  <% } %>
+
+</div>
+  </script>
+
   <div id="wrapper">
     <div id="categories">
       <table>