flickr api integrated + map select behaviour

This commit is contained in:
sanj 2010-06-03 03:55:53 +05:30
parent 3ef607e983
commit f8589720d5
4 changed files with 225 additions and 38 deletions

View File

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

View File

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

View File

@ -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);
});

View File

@ -8,9 +8,9 @@ body {
height: 100%; height: 100%;
background: #999; background: #999;
background: -moz-radial-gradient(45px 45px 45deg, circle cover, 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, background: -webkit-gradient(radial, 45px 45px 45deg, circle cover,
#FF9100 0%, #F4F15C 100%, #fff 95%); #ABAE71 0%, #CDD53F 100%, #E6F215 95%);
} }
#wrapper { #wrapper {
@ -18,6 +18,10 @@ body {
height: 100%; height: 100%;
} }
a img {
border: 0px;
}
#categories { #categories {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -43,10 +47,25 @@ body {
cursor: pointer; cursor: pointer;
} }
.selected {
background: #000 !important;
color: #fff !important;
}
.imageCategory { .imageCategory {
background: #ffd055; background: #ffd055;
} }
.imageWrapper {
float: left;
width: 140px;
text-align: center;
}
.imagesWrapper {
overflow: auto;
}
.videoCategory { .videoCategory {
background: #ff6066; background: #ff6066;
} }
@ -68,6 +87,7 @@ body {
-moz-box-shadow: 0px 0px 1em; -moz-box-shadow: 0px 0px 1em;
-webkit-box-shadow: 0px 0px 1em; -webkit-box-shadow: 0px 0px 1em;
box-shadow: 0px 0px 1em; box-shadow: 0px 0px 1em;
} }
#media { #media {
@ -87,46 +107,24 @@ body {
<script type="text/javascript" src="/static/js/openlayers/OpenLayers.js"></script> <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 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> </head>
<body> <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="wrapper">
<div id="categories"> <div id="categories">
<table> <table>