Skip to content

Instantly share code, notes, and snippets.

@brianherbert
Created January 27, 2012 11:05
Show Gist options
  • Save brianherbert/1688313 to your computer and use it in GitHub Desktop.
Save brianherbert/1688313 to your computer and use it in GitHub Desktop.
testing adsense plugin
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Local Ushahidi Deployment</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ushahidi.osx/media/css/jquery-ui-themeroller.css" />
<link rel="stylesheet" type="text/css" href="http://ushahidi.osx/themes/default/css/style.css" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="http://ushahidi.osx/media/css/iehacks.css" />
<![endif]--><!--[if IE 7]><link rel="stylesheet" type="text/css" href="http://ushahidi.osx/media/css/ie7hacks.css" />
<![endif]--><!--[if IE 6]><link rel="stylesheet" type="text/css" href="http://ushahidi.osx/media/css/ie6hacks.css" />
<![endif]--><link rel="stylesheet" type="text/css" href="http://ushahidi.osx/media/css/openlayers.css" />
<link rel="alternate" type="application/rss+xml" href="http://ushahidi.osx/feed/" title="RSS2" /><script type="text/javascript" src="http://ushahidi.osx/media/js/OpenLayers.js"></script>
<script type="text/javascript">OpenLayers.ImgPath = 'http://ushahidi.osx/media/img/openlayers/';</script><script type="text/javascript" src="http://ushahidi.osx/media/js/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ushahidi.osx/media/js/jquery.pngFix.pack.js"></script>
<script type="text/javascript" src="http://ushahidi.osx/media/js/jquery.timeago.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3.2&amp;sensor=false"></script><script type="text/javascript" src="http://ushahidi.osx/media/js/selectToUISlider.jQuery.js"></script>
<script type="text/javascript" src="http://ushahidi.osx/media/js/jquery.flot.js"></script>
<script type="text/javascript" src="http://ushahidi.osx/media/js/timeline.js"></script>
<!--[if IE]><script type="text/javascript" src="http://ushahidi.osx/media/js/excanvas.min.js"></script>
<![endif]--><script type="text/javascript">
<!--//
function runScheduler(img){img.onload = null;img.src = 'http://ushahidi.osx/scheduler';}
$(document).ready(function(){$(document).pngFix();}); // Map JS
// Map Object
var map;
// Selected Category
var currentCat;
// Selected Layer
var thisLayer;
// WGS84 Datum
var proj_4326 = new OpenLayers.Projection('EPSG:4326');
// Spherical Mercator
var proj_900913 = new OpenLayers.Projection('EPSG:900913');
// Change to 1 after map loads
var mapLoad = 0;
// /json or /json/cluster depending on if clustering is on
var default_json_url = "json";
// Current json_url, if map is switched dynamically between json and json_cluster
var json_url = default_json_url;
/*
- Part of #2168 fix
- Added by E.Kala <emmanuel(at)ushahidi.com>
*/
// Global list for current KML overlays in display
var kmlOverlays = [];
var baseUrl = "http://ushahidi.osx/";
var longitude = 25.219888682471;
var latitude = 1.5249115531142;
var defaultZoom = 4;
var markerRadius = 4;
var markerOpacity = "0.8";
var selectedFeature;
var allGraphData = "";
var dailyGraphData = "";
var gMediaType = 0
var timeout = 1500;
var activeZoom = null;
var gMarkerOptions = {
baseUrl: baseUrl, longitude: longitude,
latitude: latitude, defaultZoom: defaultZoom,
markerRadius: markerRadius,
markerOpacity: markerOpacity,
protocolFormat: OpenLayers.Format.GeoJSON
};
/*
Create the Markers Layer
*/
function addMarkers(catID,startDate,endDate, currZoom, currCenter,
mediaType, thisLayerID, thisLayerType, thisLayerUrl, thisLayerColor)
{
activeZoom = currZoom;
if(activeZoom == ''){
return $.timeline({categoryId: catID,
startTime: new Date(startDate * 1000),
endTime: new Date(endDate * 1000),
mediaType: mediaType
}).addMarkers(
startDate, endDate, gMap.getZoom(),
gMap.getCenter(), thisLayerID, thisLayerType,
thisLayerUrl, thisLayerColor, json_url);
}
setTimeout(function(){
if(currZoom == activeZoom){
return $.timeline({categoryId: catID,
startTime: new Date(startDate * 1000),
endTime: new Date(endDate * 1000),
mediaType: mediaType
}).addMarkers(
startDate, endDate, gMap.getZoom(),
gMap.getCenter(), thisLayerID, thisLayerType,
thisLayerUrl, thisLayerColor, json_url);
}else{
return true;
}
}, timeout);
}
/**
* Display loader as Map Loads
*/
function onMapStartLoad(event)
{
if ($("#loader"))
{
$("#loader").show();
}
if ($("#OpenLayers\\.Control\\.LoadingPanel_4"))
{
$("#OpenLayers\\.Control\\.LoadingPanel_4").show();
}
}
/**
* Hide Loader
*/
function onMapEndLoad(event)
{
if ($("#loader"))
{
$("#loader").hide();
}
if ($("#OpenLayers\\.Control\\.LoadingPanel_4"))
{
$("#OpenLayers\\.Control\\.LoadingPanel_4").hide();
}
}
/**
* Close Popup
*/
function onPopupClose(event)
{
selectControl.unselect(selectedFeature);
selectedFeature = null;
}
/**
* Display popup when feature selected
*/
function onFeatureSelect(event)
{
selectedFeature = event.feature;
zoom_point = event.feature.geometry.getBounds().getCenterLonLat();
lon = zoom_point.lon;
lat = zoom_point.lat;
var thumb = "";
if ( typeof(event.feature.attributes.thumb) != 'undefined' &&
event.feature.attributes.thumb != '')
{
thumb = "<div class=\"infowindow_image\"><a href='"+event.feature.attributes.link+"'>";
thumb += "<img src=\""+event.feature.attributes.thumb+"\" height=\"59\" width=\"89\" /></a></div>";
}
var content = "<div class=\"infowindow\">" + thumb;
content += "<div class=\"infowindow_content\"><div class=\"infowindow_list\">"+event.feature.attributes.name+"</div>";
content += "\n<div class=\"infowindow_meta\">";
if ( typeof(event.feature.attributes.link) != 'undefined' &&
event.feature.attributes.link != '')
{
content += "<a href='"+event.feature.attributes.link+"'>More Information</a><br/>";
}
content += "<a href='javascript:zoomToSelectedFeature("+ lon + ","+ lat +",1)'>";
content += "Zoom In</a>";
content += "&nbsp;&nbsp;|&nbsp;&nbsp;";
content += "<a href='javascript:zoomToSelectedFeature("+ lon + ","+ lat +",-1)'>";
content += "Zoom Out</a></div>";
content += "</div><div style=\"clear:both;\"></div></div>";
if (content.search("<script") != -1)
{
content = "Content contained Javascript! Escaped content below.<br />" + content.replace(/</g, "&lt;");
}
// Destroy existing popups before opening a new one
if (event.feature.popup != null)
{
map.removePopup(event.feature.popup);
}
popup = new OpenLayers.Popup.FramedCloud("chicken",
event.feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,100),
content,
null, true, onPopupClose);
event.feature.popup = popup;
map.addPopup(popup);
}
/**
* Destroy Popup Layer
*/
function onFeatureUnselect(event)
{
// Safety check
if (event.feature.popup != null)
{
map.removePopup(event.feature.popup);
event.feature.popup.destroy();
event.feature.popup = null;
}
}
// Refactor Clusters On Zoom
// *** Causes the map to load json twice on the first go
// *** Need to fix this!
function mapZoom(event)
{
// Prevent this event from running on the first load
if (mapLoad > 0)
{
// Get Current Category
currCat = $("#currentCat").val();
// Get Current Start Date
currStartDate = $("#startDate").val();
// Get Current End Date
currEndDate = $("#endDate").val();
// Get Current Zoom
currZoom = map.getZoom();
// Get Current Center
currCenter = map.getCenter();
// Refresh Map
addMarkers(currCat, currStartDate, currEndDate, currZoom, currCenter);
}
}
function mapMove(event)
{
// Prevent this event from running on the first load
if (mapLoad > 0)
{
// Get Current Category
currCat = $("#currentCat").val();
// Get Current Start Date
currStartDate = $("#startDate").val();
// Get Current End Date
currEndDate = $("#endDate").val();
// Get Current Zoom
currZoom = map.getZoom();
// Get Current Center
currCenter = map.getCenter();
// Part of #2168 fix
// Remove the KML overlays
if (kmlOverlays.length > 0)
{
for (var i = 0; i < kmlOverlays.length; i++)
{
map.removeLayer(kmlOverlays[i]);
}
}
// Refresh Map
addMarkers(currCat, currStartDate, currEndDate, currZoom, currCenter, gMediaType);
// Part of #2168 fix
// E.Kala <emmanuel(at)ushahidi.com>
// Add back the KML overlays
/*
- The timout is so that the cluster markers are given time to load before
- the overlays can be rendered
*/
setTimeout(
function()
{
if (kmlOverlays.length > 0)
{
for (var i = 0; i < kmlOverlays.length; i++)
{
kmlItem = kmlOverlays[i];
map.addLayer(kmlItem);
// Add feature selection events to the last item
if (i == kmlOverlays.length -1)
{
selectControl = new OpenLayers.Control.SelectFeature(kmlItem);
map.addControl(selectControl);
selectControl.activate();
kmlItem.events.on({
"featureselected": onFeatureSelect,
"featureunselected": onFeatureUnselect
});
}
}
}
},
timeout
);
}
}
/**
* Display info window for checkin data
*/
function showCheckinData(event)
{
selectedFeature = event.feature;
zoom_point = event.feature.geometry.getBounds().getCenterLonLat();
lon = zoom_point.lon;
lat = zoom_point.lat;
var content = "<div class=\"infowindow\" style=\"color:#000000\"><div class=\"infowindow_list\">";
if(event.feature.attributes.ci_media_medium !== "")
{
content += "<a href=\""+event.feature.attributes.ci_media_link+"\" rel=\"lightbox-group1\" title=\""+event.feature.attributes.ci_msg+"\">";
content += "<img src=\""+event.feature.attributes.ci_media_medium+"\" /><br/>";
}
content += event.feature.attributes.ci_msg+"</div><div style=\"clear:both;\"></div>";
content += "\n<div class=\"infowindow_meta\">";
content += "<a href='javascript:zoomToSelectedFeature("+ lon + ","+ lat +",1)'>Zoom In</a>";
content += "&nbsp;&nbsp;|&nbsp;&nbsp;";
content += "<a href='javascript:zoomToSelectedFeature("+ lon + ","+ lat +",-1)'>Zoom Out</a></div>";
content += "</div>";
if (content.search("<script") != -1)
{
content = "Content contained Javascript! Escaped content below.<br />" + content.replace(/</g, "&lt;");
}
popup = new OpenLayers.Popup.FramedCloud("chicken",
event.feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,100),
content,
null, true, onPopupClose);
event.feature.popup = popup;
map.addPopup(popup);
}
/**
* Display Checkin Points
* Note: This function totally ignores the timeline
*/
function showCheckins()
{
$(document).ready(function(){
var ci_styles = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
pointRadius: "5", // sized according to type attribute
fillColor: "${fillcolor}",
strokeColor: "${strokecolor}",
fillOpacity: "${fillopacity}",
strokeOpacity: 0.75,
strokeWidth: 1.5
})
});
var checkinLayer = new OpenLayers.Layer.Vector('Checkins', {styleMap: ci_styles});
map.addLayers([checkinLayer]);
highlightCtrl = new OpenLayers.Control.SelectFeature(checkinLayer, {
hover: true,
highlightOnly: true,
renderIntent: "temporary"
});
map.addControl(highlightCtrl);
highlightCtrl.activate();
selectControl = new OpenLayers.Control.SelectFeature([checkinLayer,markers]);
map.addControl(selectControl);
selectControl.activate();
checkinLayer.events.on({
"featureselected": showCheckinData,
"featureunselected": onFeatureUnselect
});
$.getJSON("http://ushahidi.osx/api/?task=checkin&action=get_ci&mapdata=1&sqllimit=1000&orderby=checkin.checkin_date&sort=ASC", function(data) {
var user_colors = new Array();
// Get colors
$.each(data["payload"]["users"], function(i, payl) {
user_colors[payl.id] = payl.color;
});
// Get checkins
$.each(data["payload"]["checkins"], function(key, ci) {
var cipoint = new OpenLayers.Geometry.Point(parseFloat(ci.lon), parseFloat(ci.lat));
cipoint.transform(proj_4326, proj_900913);
var media_link = '';
var media_medium = '';
var media_thumb = '';
if(ci.media === undefined)
{
// No image
}
else
{
// Image!
media_link = ci.media[0].link;
media_medium = ci.media[0].medium;
media_thumb = ci.media[0].thumb;
}
var checkinPoint = new OpenLayers.Feature.Vector(cipoint, {
fillcolor: "#"+user_colors[ci.user],
strokecolor: "#FFFFFF",
fillopacity: ci.opacity,
ci_id: ci.id,
ci_msg: ci.msg,
ci_media_link: media_link,
ci_media_medium: media_medium,
ci_media_thumb: media_thumb
});
checkinLayer.addFeatures([checkinPoint]);
});
});
});
}
/**
* Refresh Graph on Slider Change
*/
function refreshGraph(startDate, endDate)
{
var currentCat = gCategoryId;
// refresh graph
if (!currentCat || currentCat == '0')
{
currentCat = '0';
}
var startTime = new Date(startDate * 1000);
var endTime = new Date(endDate * 1000);
// daily
var graphData = "";
// plot hourly incidents when period is within 2 days
if ((endTime - startTime) / (1000 * 60 * 60 * 24) <= 3)
{
$.getJSON("http://ushahidi.osx/json/timeline/"+currentCat+"?i=hour", function(data) {
graphData = data[0];
gTimeline = $.timeline({categoryId: currentCat,
startTime: new Date(startDate * 1000),
endTime: new Date(endDate * 1000), mediaType: gMediaType,
markerOptions: gMarkerOptions,
graphData: graphData
});
gTimeline.plot();
});
}
else if ((endTime - startTime) / (1000 * 60 * 60 * 24) <= 124)
{
// weekly if period > 2 months
$.getJSON("http://ushahidi.osx/json/timeline/"+currentCat+"?i=day", function(data) {
graphData = data[0];
gTimeline = $.timeline({categoryId: currentCat,
startTime: new Date(startDate * 1000),
endTime: new Date(endDate * 1000), mediaType: gMediaType,
markerOptions: gMarkerOptions,
graphData: graphData
});
gTimeline.plot();
});
}
else if ((endTime - startTime) / (1000 * 60 * 60 * 24) > 124)
{
// monthly if period > 4 months
$.getJSON("http://ushahidi.osx/json/timeline/"+currentCat, function(data) {
graphData = data[0];
gTimeline = $.timeline({categoryId: currentCat,
startTime: new Date(startDate * 1000),
endTime: new Date(endDate * 1000), mediaType: gMediaType,
markerOptions: gMarkerOptions,
graphData: graphData
});
gTimeline.plot();
});
}
// Get dailyGraphData for All Categories
$.getJSON("http://ushahidi.osx/json/timeline/"+currentCat+"?i=day", function(data) {
dailyGraphData = data[0];
});
// Get allGraphData for All Categories
$.getJSON("http://ushahidi.osx/json/timeline/"+currentCat, function(data) {
allGraphData = data[0];
});
}
/**
* Zoom to Selected Feature from within Popup
*/
function zoomToSelectedFeature(lon, lat, zoomfactor)
{
var lonlat = new OpenLayers.LonLat(lon,lat);
// Get Current Zoom
currZoom = map.getZoom();
// New Zoom
newZoom = currZoom + zoomfactor;
// Center and Zoom
map.setCenter(lonlat, newZoom);
// Remove Popups
for (var i=0; i<map.popups.length; ++i)
{
map.removePopup(map.popups[i]);
}
}
/*
Zoom to Selected Feature from outside Popup
*/
function externalZeroIn(lon, lat, newZoom, cipopup)
{
var point = new OpenLayers.LonLat(lon,lat);
point.transform(proj_4326, map.getProjectionObject());
// Center and Zoom
map.setCenter(point, newZoom);
if (cipopup === undefined)
{
// A checkin id was not passed so we won't bother showing the info window
}
else
{
// An id was passed, so lets show an info window
// TODO: Do this.
}
}
/*
Add KML/KMZ Layers
*/
function switchLayer(layerID, layerURL, layerColor)
{
if ( $("#layer_" + layerID).hasClass("active") )
{
new_layer = map.getLayersByName("Layer_"+layerID);
if (new_layer)
{
for (var i = 0; i < new_layer.length; i++)
{
map.removeLayer(new_layer[i]);
}
// Part of #2168 fix
// Added by E.Kala <emmanuel(at)ushahidi.com>
// Remove the layer from the list of KML overlays - kmlOverlays
if (kmlOverlays.length == 1)
{
kmlOverlays.pop();
}
else if (kmlOverlays.length > 1)
{
// Temporarily store the current list of overlays
tempKmlOverlays = kmlOverlays;
// Re-initialize the list of overlays
kmlOverlays = [];
// Search for the overlay that has just been removed from display
for (var i = 0; i < tempKmlOverlays.length; i ++)
{
if (tempKmlOverlays[i].name != "Layer_"+layerID)
{
kmlOverlays.push(tempKmlOverlays[i]);
}
}
// Unset the working list
tempKmlOverlays = null;
}
}
$("#layer_" + layerID).removeClass("active");
}
else
{
$("#layer_" + layerID).addClass("active");
// Get Current Zoom
currZoom = map.getZoom();
// Get Current Center
currCenter = map.getCenter();
// Add New Layer
addMarkers('', '', '', currZoom, currCenter, '', layerID, 'layers', layerURL, layerColor);
}
}
/**
* Toggle Layer Switchers
*/
function toggleLayer(link, layer)
{
if ($("#"+link).text() == "Show")
{
$("#"+link).text("Hide");
}
else
{
$("#"+link).text("Show");
}
$('#'+layer).toggle(500);
}
/**
* Create a function that calculates the smart columns
*/
function smartColumns()
{
//Reset column size to a 100% once view port has been adjusted
$("ul.content-column").css({ 'width' : "100%"});
var colWrap = $("ul.content-column").width(); //Get the width of row
//var colNum = Math.floor(colWrap / 460); //Find how many columns of 200px can fit per row / then round it down to a whole number
var colNum = 2;
var colFixed = Math.floor(colWrap / colNum); //Get the width of the row and divide it by the number of columns it can fit / then round it down to a whole number. This value will be the exact width of the re-adjusted column
$("ul.content-column").css({ 'width' : colWrap}); //Set exact width of row in pixels instead of using % - Prevents cross-browser bugs that appear in certain view port resolutions.
$("ul.content-column li").css({ 'width' : colFixed}); //Set exact width of the re-adjusted column
}
jQuery(function() {
var map_layer;
markers = null;
var catID = '';
OpenLayers.Strategy.Fixed.prototype.preload=true;
/*
- Initialize Map
- Uses Spherical Mercator Projection
- Units in Metres instead of Degrees
*/
var options = {
units: "mi",
numZoomLevels: 18,
controls:[],
projection: proj_900913,
'displayProjection': proj_4326,
eventListeners: {
"zoomend": mapMove
},
'theme': null
};
map = new OpenLayers.Map('map', options);
map.addControl( new OpenLayers.Control.LoadingPanel({minSize: new OpenLayers.Size(573, 366)}) );
var google_satellite = new OpenLayers.Layer.Google("Google Maps Satellite", {
type: google.maps.MapTypeId.SATELLITE,
sphericalMercator: true,
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)});
var google_hybrid = new OpenLayers.Layer.Google("Google Maps Hybrid", {
type: google.maps.MapTypeId.HYBRID,
sphericalMercator: true,
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)});
var google_normal = new OpenLayers.Layer.Google("Google Maps Normal", {
sphericalMercator: true,
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)});
var google_physical = new OpenLayers.Layer.Google("Google Maps Physical", {
type: google.maps.MapTypeId.TERRAIN,
sphericalMercator: true,
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)});
map.addLayers([google_satellite,google_hybrid,google_normal,google_physical]);
// Add Controls
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.Attribution());
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.MousePosition(
{
div: document.getElementById('mapMousePosition'),
numdigits: 5
}));
map.addControl(new OpenLayers.Control.Scale('mapScale'));
map.addControl(new OpenLayers.Control.ScaleLine());
map.addControl(new OpenLayers.Control.LayerSwitcher());
// display the map projection
document.getElementById('mapProjection').innerHTML = map.projection;
gMap = map;
// Category Switch Action
$("a[id^='cat_']").click(function()
{
var catID = this.id.substring(4);
var catSet = 'cat_' + this.id.substring(4);
$("a[id^='cat_']").removeClass("active"); // Remove All active
$("[id^='child_']").hide(); // Hide All Children DIV
$("#cat_" + catID).addClass("active"); // Add Highlight
$("#child_" + catID).show(); // Show children DIV
$(this).parents("div").show();
currentCat = catID;
$("#currentCat").val(catID);
// setUrl not supported with Cluster Strategy
//markers.setUrl("http://ushahidi.osx/" json_url + '/?c=' + catID);
// Destroy any open popups
if (selectedFeature) {
onPopupClose();
};
// Get Current Zoom
currZoom = map.getZoom();
// Get Current Center
currCenter = map.getCenter();
gCategoryId = catID;
var startTime = new Date($("#startDate").val() * 1000);
var endTime = new Date($("#endDate").val() * 1000);
addMarkers(catID, $("#startDate").val(), $("#endDate").val(), currZoom, currCenter, gMediaType);
graphData = "";
$.getJSON("http://ushahidi.osx/json/timeline/"+catID, function(data) {
graphData = data[0];
gTimeline = $.timeline({categoryId: catID, startTime: startTime, endTime: endTime,
graphData: graphData,
mediaType: gMediaType
});
gTimeline.plot();
});
dailyGraphData = "";
$.getJSON("http://ushahidi.osx/json/timeline/"+catID+"?i=day", function(data) {
dailyGraphData = data[0];
});
allGraphData = "";
$.getJSON("http://ushahidi.osx/json/timeline/"+currentCat, function(data) {
allGraphData = data[0];
});
return false;
});
// Sharing Layer[s] Switch Action
$("a[id^='share_']").click(function()
{
var shareID = this.id.substring(6);
if ( $("#share_" + shareID).hasClass("active") )
{
share_layer = map.getLayersByName("Share_"+shareID);
if (share_layer)
{
for (var i = 0; i < share_layer.length; i++)
{
map.removeLayer(share_layer[i]);
}
}
$("#share_" + shareID).removeClass("active");
}
else
{
$("#share_" + shareID).addClass("active");
// Get Current Zoom
currZoom = map.getZoom();
// Get Current Center
currCenter = map.getCenter();
// Add New Layer
addMarkers('', '', '', currZoom, currCenter, '', shareID, 'shares');
}
});
// Exit if we don't have any incidents
if (!$("#startDate").val())
{
map.setCenter(new OpenLayers.LonLat(25.219888682471, 1.5249115531142), 5);
return;
}
//Accessible Slider/Select Switch
$("select#startDate, select#endDate").selectToUISlider({
labels: 4,
labelSrc: 'text',
sliderOptions: {
change: function(e, ui)
{
var startDate = $("#startDate").val();
var endDate = $("#endDate").val();
var currentCat = gCategoryId;
// Get Current Category
currCat = currentCat;
// Get Current Zoom
currZoom = map.getZoom();
// Get Current Center
currCenter = map.getCenter();
// If we're in a month date range, switch to
// non-clustered mode. Default interval is monthly
var startTime = new Date(startDate * 1000);
var endTime = new Date(endDate * 1000);
if ((endTime - startTime) / (1000 * 60 * 60 * 24) <= 32)
{
json_url = "json";
}
else
{
json_url = default_json_url;
}
// Refresh Map
addMarkers(currCat, startDate, endDate, '', '', gMediaType);
refreshGraph(startDate, endDate);
}
}
});
var startTime = 1317394800; // Default to most active month
var endTime = 1320073199; // Default to most active month
// get the closest existing dates in the selection options
options = $('#startDate > optgroup > option').map(function()
{
return $(this).val();
});
//figure out what time is the greatest time, that is less than the startTime
var foundStartTime = false;
for(i = 1; i < options.length; i++)
{
var time = parseInt(options[i]);
if(time == startTime)
{
foundStartTime = true;
break;
}
else if(time > startTime)
{
startTime = options[i-1];
foundStartTime = true;
break;
}
}
//if the original start time is after the last option date
if(!foundStartTime)
{
startTime = options[options.length-1];
}
options = $('#endDate > optgroup > option').map(function()
{
return $(this).val();
});
endTime = $.grep(options, function(n,i)
{
return parseInt(n) >= endTime ;
})[0];
gCategoryId = '0';
gMediaType = 0;
//$("#startDate").val(startTime);
//$("#endDate").val(endTime);
// Initialize Map
addMarkers(gCategoryId, startTime, endTime, '', '', gMediaType);
refreshGraph(startTime, endTime);
// Media Filter Action
$('.filters li a').click(function()
{
// Destroy any open popups
if (selectedFeature) {
onPopupClose();
};
var startTimestamp = $("#startDate").val();
var endTimestamp = $("#endDate").val();
var startTime = new Date(startTimestamp * 1000);
var endTime = new Date(endTimestamp * 1000);
gMediaType = parseFloat(this.id.replace('media_', '')) || 0;
currentCat = $("#currentCat").val();
// Get Current Zoom
currZoom = map.getZoom();
// Get Current Center
currCenter = map.getCenter();
// Refresh Map
addMarkers(currentCat, startTimestamp, endTimestamp,
currZoom, currCenter, gMediaType);
$('.filters li a').attr('class', '');
$(this).addClass('active');
graphData = "";
$.getJSON("http://ushahidi.osx/json/timeline/"+currentCat, function(data) {
graphData = data[0];
gTimeline = $.timeline({categoryId: currentCat, startTime: startTime, endTime: endTime,
graphData: graphData,
mediaType: gMediaType
});
gTimeline.plot();
});
dailyGraphData = "";
$.getJSON("http://ushahidi.osx/json/timeline/"+currentCat+"?i=day", function(data) {
dailyGraphData = data[0];
});
allGraphData = "";
$.getJSON("http://ushahidi.osx/json/timeline/"+currentCat, function(data) {
allGraphData = data[0];
});
return false;
});
$('#playTimeline').click(function()
{
gTimelineMarkers = gTimeline.addMarkers(gStartTime.getTime()/1000,
$.dayEndDateTime(gEndTime.getTime()/1000), gMap.getZoom(),
gMap.getCenter(),null,null,null,null,"json");
gTimeline.playOrPause('raindrops');
});
smartColumns();//Execute the function when page loads
});
$(window).resize(function ()
{ //Each time the viewport is adjusted/resized, execute the function
smartColumns();
});
function cilisting(sqllimit,sqloffset) {
jsonurl = "http://ushahidi.osx/api/?task=checkin&action=get_ci&sqllimit="+sqllimit+"&sqloffset="+sqloffset+"&orderby=checkin.checkin_date&sort=DESC";
var showncount = 0;
$.getJSON(jsonurl, function(data) {
if(data.payload.checkins == undefined)
{
if(sqloffset != 0)
{
var newoffset = sqloffset - sqllimit;
$('div#cilist').html("<div style=\"text-align:center;\">No checkins to display.<br/><br/><a href=\"javascript:cilisting("+sqllimit+","+newoffset+");\">&lt;&lt; Previous</a></div>");
}else{
$('div#cilist').html("<div style=\"text-align:center;\">No checkins to display.</div>");
}
return;
}
$('div#cilist').html("");
var user_colors = new Array();
// Get colors
$.each(data.payload.users, function(i, payl) {
user_colors[payl.id] = payl.color;
});
$.each(data.payload.checkins, function(i,item){
if(i == 0)
{
$('div#cilist').append("<div class=\"ci_checkin\" class=\"ci_id_"+item.id+"\"style=\"border:none\"><a name=\"ci_id_"+item.id+"\" />");
}else{
$('div#cilist').append("<div class=\"ci_checkin\" class=\"ci_id_"+item.id+"\" style=\"padding-bottom:5px;margin-bottom:5px;\"><a name=\"ci_id_"+item.id+"\" />");
}
if(item.media === undefined)
{
// Tint the color a bit
$('div#cilist').append("<div class=\"ci_colorblock ci_shorterblock\" style=\"background-color:#"+user_colors[item.user]+";\"><div class=\"ci_colorfade\"></div></div>");
}else{
// Show image
$('div#cilist').append("<div class=\"ci_colorblock ci_tallerblock\" style=\"background-color:#"+user_colors[item.user]+";\"><div class=\"ci_imgblock\"><a href=\""+item.media[0].link+"\" rel=\"lightbox-group1\" title=\""+item.msg+"\"><img src=\""+item.media[0].thumb+"\" height=\"59\" /></a></div></div>");
}
$('div#cilist').append("<div style=\"float:right;width:24px;height:24px;margin-right:10px;\"><a class=\"ci_moredetails\" reportid=\""+item.id+"\" href=\"javascript:externalZeroIn("+item.lon+","+item.lat+",16,"+item.id+");\"><img src=\"http://ushahidi.osx/media/img/pin_trans.png\" width=\"24\" height=\"24\" /></a></div>");
$.each(data.payload.users, function(j,useritem){
if(useritem.id == item.user){
$('div#cilist').append("<div style=\"font-size:14px;width:215px;padding-top:0px;\"><a href=\"http://ushahidi.osx/profile/user/"+useritem.username+"\">"+useritem.name+"</a></div>");
}
});
var utcDate = item.date.replace(" ","T")+"Z";
if(item.msg == "")
{
$('div#cilist').append("<div class=\"ci_cimsg\"><small><em>"+$.timeago(utcDate)+"</em></small></div>");
}else{
$('div#cilist').append("<div class=\"ci_cimsg\">"+item.msg+"<br/><small><em>"+$.timeago(utcDate)+"</em></small></div>");
}
if(item.comments !== undefined)
{
var user_link = '';
var comment_utcDate = '';
$.each(item.comments, function(j,comment){
comment_utcDate = comment.date.replace(" ","T")+"Z";
if(item.user_id != 0){
user_link = '<a href=\"http://ushahidi.osx/profile/user/'+comment.username+'\">'+comment.author+'</a>';
}else{
user_link = ''+comment.author+'';
}
$('div#cilist').append("<div style=\"clear:both\"></div>"+user_link+": "+comment.description+" <small>(<em>"+$.timeago(comment_utcDate)+"</em>)</small></div>");
});
}
$('div#cilist').append("<div style=\"clear:both\"></div></div>");
showncount = showncount + 1;
});
// Show previous link
if(sqloffset == 0)
{
$('div#cilist').append("<div style=\"float:left;\">&lt;&lt; Previous</div>");
}else{
var newoffset = sqllimit - sqloffset;
$('div#cilist').append("<div style=\"float:left;\"><a href=\"javascript:cilisting("+sqllimit+","+newoffset+");\">&lt;&lt; Previous</a></div>");
}
// Show next link
if(showncount != sqllimit)
{
$('div#cilist').append("<div style=\"float:right;\">Next &gt;&gt;</div>");
}else{
var newoffset = sqloffset + sqllimit;
$('div#cilist').append("<div style=\"float:right;\"><a href=\"javascript:cilisting("+sqllimit+","+newoffset+");\">Next &gt;&gt;</a></div>");
}
$('div#cilist').append("<div style=\"clear:both\"></div>");
});
}
cilisting(3,0);
showCheckins();
//-->
</script> </head>
<body id="page" class="page-main" /> <!-- wrapper -->
<div class="rapidxwpr floatholder">
<!-- header -->
<div id="header">
<!-- searchbox -->
<div id="searchbox">
<!-- user actions -->
<div id="loggedin_user_action" class="clearingfix">
<a href="http://ushahidi.osx/admin">admin</a> [<a href="http://ushahidi.osx/logout/front">Logout</a>]
</div><br/>
<!-- / user actions -->
<!-- languages -->
<div class="language-box"><form action=""><select id="l" name="l" onchange="this.form.submit()" >
<option value="en_US" selected="selected">English (US)</option>
<option value="fr_FR">Français (FR)</option>
</select></form></div> <!-- / languages -->
<!-- searchform -->
<div class="search-form"><form method="get" id="search" action="http://ushahidi.osx/search/"><ul><li><input type="text" name="k" value="" class="text" /></li><li><input type="submit" name="b" class="searchbtn" value="SEARCH" /></li></ul></form></div> <!-- / searchform -->
</div>
<!-- / searchbox -->
<!-- logo -->
<div id="logo">
<h1><a href="http://ushahidi.osx/">Local Ushahidi Deployment</a></h1>
<span>blah blah blah</span>
</div>
<!-- / logo -->
<!-- submit incident -->
<div class="submit-incident clearingfix"><a href="http://ushahidi.osx/reports/submit">Submit a Report</a></div> <!-- / submit incident -->
</div>
<!-- / header -->
<!-- main body -->
<div id="middle">
<div class="background layoutleft">
<!-- mainmenu -->
<div id="mainmenu" class="clearingfix">
<ul>
<li><a href="http://ushahidi.osx/main" class="active">Home</a></li><li><a href="http://ushahidi.osx/reports" >Reports</a></li><li><a href="http://ushahidi.osx/reports/submit" >Submit a Report</a></li><li><a href="http://ushahidi.osx/contact" >Contact Us</a></li> </ul>
<div style="float:right;"><a href="http://ushahidi.osx/feed/"><img src="http://ushahidi.osx/media/img/icon-feed.png" style="vertical-align: middle;" border="0"></a></div>
</div>
<!-- / mainmenu -->
<!-- main body -->
<div id="main" class="clearingfix">
<div id="mainmiddle" class="floatbox withright">
<!-- right column -->
<div id="right" class="clearingfix">
<!-- category filters -->
<div class="cat-filters clearingfix">
<strong>Category Filter <span>[<a href="javascript:toggleLayer('category_switch_link', 'category_switch')" id="category_switch_link">Hide</a>]</span></strong>
</div>
<ul id="category_switch" class="category-filters">
<li><a class="active" id="cat_0" href="#"><span class="swatch" style="background-color:#CC0000"></span><span class="category-title">All Categories</span></a></li>
<li><a href="#" id="cat_1"><span ><img src="http://ushahidi.osx/media/uploads/category_1_1314242777.png" style="float:left;padding-right:5px;" /></span><span class="category-title">Category 1</span></a><div class="hide" id="child_1"></div></li><li><a href="#" id="cat_2"><span class="swatch" style="background-color:#3300FF"></span><span class="category-title">Category 2</span></a><div class="hide" id="child_2"></div></li><li><a href="#" id="cat_3"><span class="swatch" style="background-color:#663300"></span><span class="category-title">Category 3</span></a><div class="hide" id="child_3"></div></li> </ul>
<!-- / category filters -->
<!-- Layers (KML/KMZ) -->
<div class="cat-filters clearingfix" style="margin-top:20px;">
<strong>Other Layers <span>[<a href="javascript:toggleLayer('kml_switch_link', 'kml_switch')" id="kml_switch_link">Hide</a>]</span></strong>
</div>
<ul id="kml_switch" class="category-filters">
<li><a href="#" id="layer_1"
onclick="switchLayer('1','http://ushahidi.osx/media/uploads/1323915647test.kml','c946c9'); return false;"><div class="swatch" style="background-color:#c946c9"></div>
<div>Test</div></a></li><li><a href="#" id="layer_2"
onclick="switchLayer('2','https://c767056.ssl.cf2.rackcdn.com/cordonindustrialrosario/1318962648Transito_sustancias_peligrosas.kml','2abd2a'); return false;"><div class="swatch" style="background-color:#2abd2a"></div>
<div>From URL</div></a></li> </ul>
<!-- /Layers -->
<br />
<!-- additional content -->
<div class="additional-content">
<h5>How to Report</h5>
<div>
<!-- Phone -->
<!-- External Apps -->
<div style="margin-bottom:10px;">
<strong>By using an app:</strong><br/>
<a href="http://download.ushahidi.com/track_download.php?download=ios">iPhone</a><br/>
<a href="http://download.ushahidi.com/track_download.php?download=android">Android</a><br/>
</div>
<!-- Email -->
<!-- Twitter -->
<div style="margin-bottom:10px;">
<strong>By sending a tweet with the hashtag/s:</strong><br/>
<span>#ushahidi</span>
</div>
<!-- Web Form -->
<div style="margin-bottom:10px;">
<a href="http://ushahidi.osx/reports/submit/">By filling this form on our website.</a>
</div>
</div>
</div>
<!-- / additional content -->
<!-- Checkins -->
<br/>
<div class="additional-content">
<h5>Checkins</h5>
<div id="cilist"></div>
</div>
<!-- /Checkins -->
</div>
<!-- / right column -->
<!-- content column -->
<div id="content" class="clearingfix">
<div class="floatbox">
<!-- filters -->
<div class="filters clearingfix">
<div style="float:left; width: 100%">
<strong>Filters</strong>
<ul>
<li><a id="media_0" class="active" href="#"><span>Reports</span></a></li>
<li><a id="media_4" href="#"><span>News</span></a></li>
<li><a id="media_1" href="#"><span>Pictures</span></a></li>
<li><a id="media_2" href="#"><span>Video</span></a></li>
<li><a id="media_0" href="#"><span>All</span></a></li>
</ul>
</div>
</div>
<!-- / filters -->
<!-- map -->
<div class="map" id="map"></div>
<div style="clear:both;"></div>
<div id="mapStatus">
<div id="mapScale" style="border-right: solid 1px #999"></div>
<div id="mapMousePosition" style="min-width: 135px;border-right: solid 1px #999;text-align: center"></div>
<div id="mapProjection" style="border-right: solid 1px #999"></div>
<div id="mapOutput"></div>
</div>
<div style="clear:both;"></div>
<!-- / map --><div class="slider-holder">
<form action="">
<input type="hidden" value="0" name="currentCat" id="currentCat"/>
<fieldset>
<div class="play"><a href="#" id="playTimeline">Play</a></div>
<label for="startDate">From:</label>
<select name="startDate" id="startDate"><optgroup label="2011"><option value="1317394800" selected="selected" >Oct 2011</option></optgroup></select>
<label for="endDate">to:</label>
<select name="endDate" id="endDate"><optgroup label="2011"><option value="1320073199" selected="selected" >Oct 2011</option></optgroup></select>
</fieldset>
</form>
</div>
<div id="graph" class="graph-holder"></div> </div>
</div>
<!-- / content column -->
</div>
</div>
<!-- / main body -->
<!-- content -->
<div class="content-container">
<!-- content blocks -->
<div class="content-blocks clearingfix">
<ul class="content-column">
</ul>
</div>
<!-- /content blocks -->
</div>
<!-- content -->
</div>
</div>
<!-- / main body -->
</div>
<!-- / wrapper -->
<!-- footer -->
<div id="footer" class="clearingfix">
<div id="underfooter"></div>
<!-- footer content -->
<div class="rapidxwpr floatholder">
<!-- footer credits -->
<div class="footer-credits">
Powered by the &nbsp;<a href="http://www.ushahidi.com/"><img src="http://ushahidi.osx/media/img/footer-logo.png" alt="Ushahidi" style="vertical-align:middle" /></a>&nbsp; Platform
</div>
<!-- / footer credits -->
<!-- footer menu -->
<div class="footermenu">
<ul class="clearingfix">
<li><a class="item1" href="http://ushahidi.osx/">Home</a></li>
<li><a href="http://ushahidi.osx/reports/submit">Submit a Report</a></li>
<li><a href="http://ushahidi.osx/contact">Contact Us</a></li>
</ul>
</div>
<!-- / footer menu -->
<h2 class="feedback_title" style="clear:both">
<a href="http://feedback.ushahidi.com/fillsurvey.php?sid=2">Provide Feedback</a>
</h2>
</div>
<!-- / footer content -->
</div>
<!-- / footer -->
<!-- Task Scheduler --><script type="text/javascript">$(document).ready(function(){$('#schedulerholder').html('<img src="http://ushahidi.osx/scheduler" />');});</script><div id="schedulerholder"></div><!-- End Task Scheduler -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment