From f8589720d536338f58c1093eaf72270649b8dbbc Mon Sep 17 00:00:00 2001 From: sanj Date: Thu, 3 Jun 2010 03:55:53 +0530 Subject: [PATCH] flickr api integrated + map select behaviour --- vurbanism/flyovers/models.py | 12 ++ vurbanism/settings.py | 2 + vurbanism/static/js/vurbanism.js | 175 ++++++++++++++++++++++++++++++ vurbanism/templates/flyovers.html | 74 ++++++------- 4 files changed, 225 insertions(+), 38 deletions(-) create mode 100644 vurbanism/static/js/vurbanism.js diff --git a/vurbanism/flyovers/models.py b/vurbanism/flyovers/models.py index 2e9c296..8ba60ea 100644 --- a/vurbanism/flyovers/models.py +++ b/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, diff --git a/vurbanism/settings.py b/vurbanism/settings.py index c034f7c..69c8714 100644 --- a/vurbanism/settings.py +++ b/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'), ) diff --git a/vurbanism/static/js/vurbanism.js b/vurbanism/static/js/vurbanism.js new file mode 100644 index 0000000..637eb5c --- /dev/null +++ b/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 + "

"); + $.each(json.media.images, function(i, v) { + var 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); +}); diff --git a/vurbanism/templates/flyovers.html b/vurbanism/templates/flyovers.html index a917289..d5a597a 100644 --- a/vurbanism/templates/flyovers.html +++ b/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 { - - + +