290 lines
8.9 KiB
JavaScript
290 lines
8.9 KiB
JavaScript
var map, currentlySelectedFeature, jsonLayer, mapControl, zoomControl;
|
|
|
|
// 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(31.171903605890201, 30.9636998440801);
|
|
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: true});
|
|
mapControl = new OpenLayers.Control.SelectFeature(layers[1]);
|
|
zoomControl = new OpenLayers.Control.ZoomToMaxExtent();
|
|
map.addControl(mapControl);
|
|
// map.addControl(zoomControl);
|
|
mapControl.activate();
|
|
// zoomControl.activate();
|
|
layers[1].events.on({
|
|
'featureselected': onFeatureSelect,
|
|
'featureunselected': onFeatureUnselect
|
|
});
|
|
$.getJSON("geojson", {}, function(geojson) {
|
|
var currFeatures = jsonLayer.features;
|
|
jsonLayer.removeFeatures(currFeatures);
|
|
jsonLayer.addFeatures(geojson_format.read(geojson));
|
|
var maxExtent = jsonLayer.getDataExtent();
|
|
map.zoomToExtent(maxExtent);
|
|
});
|
|
});
|
|
|
|
$(function() {
|
|
|
|
if (typeof(console) == 'undefined') {
|
|
console = {
|
|
'log': function() {
|
|
$.noop();
|
|
}
|
|
};
|
|
}
|
|
|
|
$('.event').click(function(e) {
|
|
// e.stopPropagation();
|
|
var eventId = $(this).data('id');
|
|
$.getJSON("eventMedia", {'id': eventId}, function(data) {
|
|
// console.log(data);
|
|
displayMedia(data);
|
|
});
|
|
});
|
|
});
|
|
|
|
function displayMedia(data) {
|
|
// console.log("data", data['images']);
|
|
var imagesHtml = tmpl("tmpl_images", {'images': data.images });
|
|
var youtubeHtml = tmpl("tmpl_youtubes", {'videos': data.yvideos });
|
|
var padmaHtml = tmpl("tmpl_padmas", {'videos': data.pvideos });
|
|
var html = imagesHtml + youtubeHtml + padmaHtml;
|
|
$('#media').html(html);
|
|
$('.imagesWrapper a').colorbox();
|
|
}
|
|
|
|
function onFeatureSelect(f) {
|
|
var id = f.feature.attributes.id;
|
|
$.getJSON("locationMedia", {'id': f.feature.attributes.id }, function(data) {
|
|
displayMedia(data);
|
|
});
|
|
// $('img').removeClass('mapSelect');
|
|
// $('[data-id=' + id + ']').addClass("mapSelect");
|
|
/*
|
|
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);
|
|
});
|
|
});
|
|
*/
|
|
}
|
|
|
|
function onFeatureUnselect(f) {
|
|
var id = f.feature.attributes.id;
|
|
// $('[data-id=' + id + ']').removeClass("mapSelect");
|
|
}
|
|
|
|
//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');
|
|
$('.navButton').removeClass('navSelected');
|
|
var catName = $(this).text();
|
|
var type = $(this).attr("class").replace("Category", "");
|
|
$(this).addClass('selected');
|
|
var id = $(this).attr("data-id");
|
|
$('#media').html("Loading " + type + "s for " + catName + " .. please wait..");
|
|
$.getJSON("category", {'id': id, 'type': type}, function(json) {
|
|
// alert(type);
|
|
var arr = [];
|
|
var features = json.flyovers;
|
|
var currFeatures = jsonLayer.features;
|
|
jsonLayer.removeFeatures(currFeatures);
|
|
jsonLayer.addFeatures(geojson_format.read(features));
|
|
var maxExtent = jsonLayer.getDataExtent();
|
|
map.zoomToExtent(maxExtent);
|
|
// console.log(maxExtent);
|
|
switch(type.toLowerCase()) {
|
|
|
|
case "image":
|
|
var html = tmpl("tmpl_images", {'images': json.images});
|
|
$('#media').html(html);
|
|
$('.imageWrapper a').colorbox();
|
|
break;
|
|
|
|
case "video":
|
|
var html = tmpl("tmpl_videos", {'videos': json.videos});
|
|
$('#media').html(html);
|
|
var i = 0;
|
|
$('.videoWrapper').each(function() {
|
|
var videoData = json.videos[i];
|
|
$(this).data("videoData", videoData);
|
|
i++;
|
|
});
|
|
$('.videoWrapper > a').click(function(e) {
|
|
e.preventDefault();
|
|
var data = $(this).closest(".videoWrapper").data("videoData");
|
|
var embedCode = data.info.embed;
|
|
$.colorbox({html: embedCode});
|
|
});
|
|
|
|
case "text":
|
|
var html = tmpl("tmpl_texts", {'texts': json.texts});
|
|
$('#media').html(html);
|
|
|
|
default:
|
|
$.noop();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
$(function() {
|
|
$('.navButton').click(function() {
|
|
$('.selected').removeClass('selected');
|
|
$('.navSelected').removeClass('navSelected');
|
|
$(this).addClass('navSelected');
|
|
// var html = $('#' + $(this).attr("data-target")).html();
|
|
var html = tmpl('tmpl_' + $(this).attr('data-target'), {});
|
|
$('#media').html(html);
|
|
});
|
|
|
|
//trigger click on "About" on page load:
|
|
$('#aboutBtn').click();
|
|
});
|
|
|
|
function getLocationById(id) {
|
|
var features = jsonLayer.features;
|
|
for (var i=0; i < features.length; i++) {
|
|
if (features[i].attributes.id == id) {
|
|
return features[i];
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
$('.mediaThumb').live("mouseover", function() {
|
|
var id = $(this).data("location");
|
|
// console.log(id);
|
|
// var location = getLocationById(id);
|
|
// mapControl.select(flyover);
|
|
highlightFeatures([id]);
|
|
$('#event_' + id).addClass("highlightedEvent");
|
|
// currentlySelectedFeature = flyover;
|
|
});
|
|
|
|
$('.mediaThumb').live("mouseout", function() {
|
|
var id = $(this).data("location");
|
|
highlightFeatures([]);
|
|
$('#event_' + id).removeClass("highlightedEvent");
|
|
});
|
|
|
|
$('#submitQuestions').live("click", function() {
|
|
$(this).attr("disabled", "disabled");
|
|
$(this).text("Thanks!");
|
|
$.post("/email_experiences", {
|
|
'1problems': $('#1problems').val(),
|
|
'2like': $('#2like').val(),
|
|
'3stories': $('#3stories').val(),
|
|
'name': $('#name').val(),
|
|
'email': $('#email').val()
|
|
}, function(response) {
|
|
$('#media').html("Thanks! Your response has been emailed to andrew dot harris at ucl.ac.uk");
|
|
});
|
|
});
|