Design and build a conversationally responsible, counter-consumerist culture mobile application.
This was a group project and our app was called "Drop".
Link to video: https://www.youtube.com/watch?v=dKAMwMD9ux4&feature=youtu.be
Some HTML from the App:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="css/Intro.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/loginpage.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/Facebook.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/Google.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/home.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/guesthome.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/geo.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/mypanel.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/drop.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/dropguest.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/camera.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/upload.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/size.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/hidecameratext.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/Settings.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/hidetext.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/mydropspage.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/explain.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/viewdrop.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/hidetestinmydrops.css" type="text/css" media="screen">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<style>
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:12px;
}
ul.sdt_menu{
margin-top:150px;
}
</style>
<meta charset="utf-8">
</head>
<body>
<div data-role="page" id="loginpage">
<div data-role="main" class="ui-content">
<img id = "droplogogif" src="images/thebluegif.gif" >
<a href = "#guesthome" data-transition="slide"><img id = "guesticon" src="images/circles.png" ></a>
<a href = "#Facebook" data-transition="slide"><img id = "facebookicon" src="images/circles.png" ></a>
<a href = "#explainpage" data-transition="slide"><img id = "explain" src="images/circles.png" ></a>
<div id="loginbarslidetop"></div>
<div id= "logintext"><p> Log In</p></div>
<div id="loginbarwhite"></div>
</div>
</div>
<div data-role="page" id="Facebook">
<div data-role="main" class="ui-content">
<div id= "Loginfacebook"><p>Log In</p></div>
<div id="facebookbarwhite"></div>
<div id="facebookbarslidetop"></div>
<div id="facebookslide"></div>
<br><br><br>
<form action="demo_form.asp" onsubmit="facebooklogin()" id="thebox">
<br><br><br><br>
Username: <input type="text" id="FacebookId" value=""><br>
Password: <input type="text" id="FacebookPassword" value=""><br>
<br>
<input id="sumbitbuttonlogin" type="submit" value="Submit">
</form>
</div>
</div>
<div data-role="page" id="home">
<div data-role="main" class="ui-content">
<div id= "homepage"><p>Home</p></div>
<div id="homebarslidetop"></div>
<div id="homebarwhite"></div>
<a href = "#camera" data-transition="slide"><img id ="Cameracircle" src="images/circles.png">
<a href = "#mydrop" data-transition="slide"><img id ="Mydropcircle" src="images/circles.png">
<a href = "#drop" data-transition="slide"><img id ="Mapcircle" src="images/circles.png">
<a href = "#loginpage" data-transition="slide"><img id ="Logoutcircle" src="images/circles.png">
</div>
</div>
<div data-role="page" id="guesthome">
<div data-role="main" class="ui-content">
<div id= "guestpage"><p>Guest</p></div>
<div id="homebarslide"></div>
<div id ="guestbarwhite"></div>
<div id ="guestbarslidetop"></div>
<div id= "guestcameratext"><p> Camera</p></div>
<a data-transition="slide"><img id="guestarrowcamera" src="images/Arrow.png"/></a>
<div id="guestcamerabar"> </div>
<div id= "guestmydropstext"><p> My Drops</p></div>
<a data-transition="slide"><img id="guestarrowmydrops" src="images/Arrow.png"/></a>
<div id="guestmydropsbar"> </div>
<a href = "#guestdrop" data-transition="slide"><div id= "dropstext"><p>Drops</p></div></a>
<a href = "#guestdrop" data-transition="slide"><img id="arrowdrops" src="images/Arrow.png"/></a>
<a href = "#guestdrop" data-transition="slide"><div id="guestdropsbar"> </div></a>
<a href = "#loginpage" data-transition="slide"><div id= "logouttext"><p>Log Out</p></div></a>
<a href = "#loginpage" data-transition="slide"><img id="arrowlogout" src="images/Arrow.png"/></a>
<a href = "#loginpage" data-transition="slide"><div id="guestlogoutbar"> </div></a>
</div>
</div>
<div data-role="page" id="camera">
<div data-role="main" class="ui-content">
<div><img id="thecamerabackground" src='images/camerabackground.png'></div>
<div id= "Cameratextinmenu"><p>Make A Drop</p></div>
<div id= "camerabarwhite"></div>
<div id= "camerabarslidetop"></div>
<div class="bottomMenu"></div>
<br><br><br><br><br><br>
<form action="demo_form.asp">
<input type="file" id="image-upload" accept="image/*" capture onchange="photochosen(event)">
<br>
<input type="text" id="Title" value="Title.." maxlength="16"><br>
<input type="text" id="Description" value="Description.." rows="4" cols="50" maxlength="25"><br>
<div id="selecttag"><p>Select a tag</p></div>
<select id="Category">
<option value="Nature">Nature</option>
<option value="Wildlife">Wildlife</option>
<option value="People">People</option>
<option value="Treasure">Treasue</option>
<option value="Other">Other</option>
</select>
<br>
</form>
<img src="about:blank" alt="" id="show-picture">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#" data-transition="slide"> <img id="leafbutton" src="images/circles.png" onclick="photoupload()"></a>
<a href="#home" data-transition="slide"> <img id="homebutton" src="images/circles.png"></a>
<br><br><br><br>
</div>
</div>
<div data-role="page" id="mydrop">
<div data-role="main" class="ui-content">
<div id= "Mydroptext"><p>My Drops</p></div>
<div id="mydropsbarinmenu"></div>
<div class="bottomMenu"></div>
<div id = "mydropsbarwhite"></div>
<div id ="mydropsbarslidetop"></div>
<div id="diagonal"></div>
<div id="circle1"></div>
<div class="content">
<ul id="sdt_menu" class="sdt_menu">
</ul>
<a href="#home" data-transition="slide"> <img id="homebutton2" src="images/circles.png"></a>
</div>
<a href="#home" data-transition="slide"><img id="backarrow2" src="images/backarrow2.png"/></a>
</div>
</div>
<div data-role="page" id="drop">
<img id="themapbackground"src="images/mapbackground.png"/>
<div id="map_canvas"></div>
<div id="toprect"></div>
<div id="topof"></div>
<div id= "Maptitle"><p>Drops Map</p></div>
<div id="mapbarslide"></div>
<a href="#mypanel" data-transition="slide"><img id="setbutton" src="images/circles.png"/></a>
<a href="#home" data-transition="slide"><img id ="backarrow2" src="images/circles.png" ></a>
<a href="#camera" data-transition="slide"><img id ="cameralink" src="images/circles.png" ></a>
<img id ="refresh"src="images/refresh.png" onclick="refreshMarkers()">
</div>
<div data-role="page" id="guestdrop">
<div id="map_canvas"></div>
<div id= "Dropsmap"><p>Drops Map</p></div>
<div id="mapbarslide"></div>
<a href="#mypanel" data-transition="slide"><img id="setbutton" src="images/circles.png"/></a>
<a href="#guesthome" data-transition="slide"><img id ="backarrow2" src="images/backarrow2.png" ></a>
</div>
<div data-role="page" id="mypanel">
<img id="settingsbackground"src="images/settingsbackground.png"/>
<div id="settingssbarslidetop"></div>
<div id="settingsettingbarwhite"></div>
<div id= "themapsetting"><p>Map Settings</p></div>
<div id= "Lowestrateddrop"><font size="3"><p>View drops with a rating of :</p></font></div>
<form name = "filter">
<br><br><br><br>
<div id= "naturedrops"><font size="4"><p>Nature Drops</p></font></div>
<div id= "wildlifedrops"><font size="4"><p>Wildlife Drops</p></font></div>
<div id= "peopledrops"><font size="4"><p>People Drops</p></font></div>
<div id= "treasuredrops"><font size="4"><p>Treasure Drops</p></font></div>
<div id= "otherdrops"><font size="4"><p>Other Drops</p></font></div>
<div id= "visdrops"><font size="3"><p>Drops Visible</p></font></div>
<div id="naturecolor"></div>
<div id="wildlifecolor"></div>
<div id="peoplecolor"></div>
<div id="treasurecolor"></div>
<div id="othercolor"></div>
<div id="checkbox1" data-role="fieldcontain">
<input type="checkbox" id="checkbox-based-flipswitch" name="Nature" value="Nature" checked="checked" data-role="flipswitch">
</div>
<br>
<div id="checkbox2" data-role="fieldcontain">
<input type="checkbox" id="checkbox-based-flipswitch2" name="Wildlife" value="Wildlife" checked="checked" data-role="flipswitch">
</div>
<br>
<div id="checkbox3" data-role="fieldcontain">
<input type="checkbox" id="checkbox-based-flipswitch3" name="People" value="People" checked="checked" data-role="flipswitch">
</div>
<br>
<div id="checkbox4" data-role="fieldcontain">
<input type="checkbox" id="checkbox-based-flipswitch4" name="Treasure" value="Treasure" checked="checked" data-role="flipswitch">
</div>
<br>
<div id="checkbox5" data-role="fieldcontain">
<input type="checkbox" id="checkbox-based-flipswitch5" name="Other" value="Other" checked="checked" data-role="flipswitch">
</div>
<div id="try"><input type="range" min="0" max="5" value="0" step="1" onchange="showValue(this.value)" id="thesliderbar"/></div>
</form>
<a href="#drop" data-transition="slide"><img id="backarrow2" src="images/backarrow2.png"/></a>
</div>
<div data-role="page" id="showdrop">
<div id="viewdropsslidetop"></div>
<div id="whitedropbar"></div>
<br><br><br><br>
<h1 id="currenttitle"></h1>
<p id="currentdesc"></p>
<img src="about:blank" alt="" id="drop-picture">
<a href="#drop" data-transition="slide"><img id="back1" src="images/circles.png" onclick="refreshMarkers()"/></a>
<a> <img id="upvote" src="images/circles.png" onclick="upvoteDrop()"/></a>
<a> <img id="downvote" src="images/circles.png" onclick="downvoteDrop()"/></a>
</div>
<div data-role="page" id="explainpage">
<div data-role="main" class="ui-content">
<div id="explainbarbar"></div>
<div id=""></div>
<a href = "#loginpage" data-transition="slide"><img id="backbuttonexplain" src="images/circles.png"></a>
<img id="Theexplainlogonew" src="images/logoalone.png">
<img id="thebluething" src="images/bluebarthing.png">
<img id="thewhitething" src="images/whitebarthing.png">
<div id="Theexplainlogo"><img src="images/logoalone.png">
<div id="bacccccck"><img src="images/textpage.png">
<div id="infront">
<font size="5" ><p style="position: absolute; color:white" id="para1"><br>Welcome to Drop</p></font>
<br>
<p style="position: absolute; color:white" id="firstsen">Ever wanted to leave your presence at your favourite location forever. Such as Abel Tasman Park? For everyone else to see?
Well now you can with our app called Drop.
</p>
<br>
<font size="5"><p style="position: absolute; color:white" id="parahow">How to use Drop</p></font>
<br>
<p style="position: absolute; color:white" id="para2">
If you see something you like while wandering around the park, you can seize the moment by using our app!
</p>
<br>
<p style="position: absolute; color:white" id="para3">
Firstly you choose whether you want to log in via Facebook or guest.
This will re-direct you accordingly. Once logged in the app will direct you to the home screen. This page you will see four buttons which are the camera, drops, map and logout. </p>
<br>
<p style="position: absolute; color:white" id="para4">
If you tap on the camera icon you will be able to capture a photo you want to upload. You can give it a title and description along with selecting a genre, then you can preview your image and then drop your image by clicking the Drop icon which is located below your previewed image. This will now re-direct to the map where you will see your freshly uploaded Drop at your current GPS location. From here you can click on your drop to view the title and description and double click to view the complete package which includes the title, description and image.
</p>
<br>
<p style="position: absolute; color:white" id="para5">
On the map you can view all the drops within a certain radius of your position. The idea of the radius is to create an incentive for the you to keep on walking to find and view more ‘drops’. All other drops are greyed out an un-viewable. There are four buttons at the bottom of the page that re-direct you to certain parts of the app. A settings buttons that has options where you can control what kind of drops you want to view. You can turn off/on the genres of the drops, so for example if you wanted to just see a nature drop, you can toggle it accordingly. The slider is to change the rating of the view you want to see, so for example if you wanted to see the highest rating (5) you would change the slider accordingly. The next button on the map is a refresh button which refreshes the map, so if the drops aren’t showing up for some reason you can refresh the page. Third button is a camera button to re-direct you back to the camera page just in case you want to take more than one photo. Then lastly a home button which re-directs you to the home.
</p>
<br>
<p style="position: absolute; color:white" id="para6">
The drops page is where you can view your drops that you have uploaded to the map. So if you wanted to show you friends this awesome drop and not search through the map to access it, you can go to this page to find and view it.
</p>
</div>
</div>
</div>
</div>
</body>
<script src = "js/photoupload.js"> </script>
<script src = "js/page2.js"> </script>
<script src = "js/geo.js"> </script>
<script src = "js/guestgeo.js"> </script>
<script src = "js/range.js"> </script>
<script src = "js/menu.js"> </script>
<script src = "js/dropdown.js"> </script>
<script src = "js/jquery.easing.1.3.js"> </script>
<script src = "js/hide.js"> </script>
<script src = "js/hidemydropstext.js"> </script>
<script src = "js/dropdowntext.js"> </script>
<script src = "js/hidetextinmydrops.js"> </script>
<script src = "js/hidedroptext.js"> </script>
<script src = "js/hidecameratext.js"> </script>
<script src = "js/loginpage.js"> </script>
<script src = "js/mydrops.js"> </script>
</html>
Some CSS from the App. One section of 24 pages of CSS:
#camera{
width:100%;
height:100%;
background:#000000;
background-size: cover;
color: #ffffff;
}
#selecttag{
position:absolute;
font-weight:lighter;
font-size:150%;
left:20%;
bottom:48%;
z-index:3;
color: #ffffff;
}
#leafbutton{
width: 42%;
height: 23%;
right: 22%;
bottom: -70%;
z-index: 1;
opacity: 0;
}
#homebutton{
width: 23%;
height: 13%;
right: 75%;
bottom: -75%;
z-index: 1;
opacity: 0;
}
#thecamerabackground{
left:0%;
height: 175%;
width:102%;
top:1%;
}
#camerabarslidetop{
width:100%;
height:7%;
left:0%;
top:5%;
opacity: 1;
filter: alpha(opacity=0.05); /* For IE8 and earlier */
background: -webkit-gradient(linear, left top, right top, from(#04798a), to(#a2d7df));
position:fixed;
z-index: 2;
animation: 1.2s ease homebarslidetop;
-webkit-animation: 1.2s ease homebarslidetop;
-moz-animation: 1.2s ease homebarslidetop;
-o-animation: 1.2s ease homebarslidetop;
-ms-animation: 1.2s ease homebarslidetop ;
}
@keyframes homebarslidetop {
from {left:-200%;}
to {left:0%;}
}
@-webkit-keyframes homebarslidetop {
from {left:-200%;}
to {left:0%;}
}
@-moz-keyframes homebarslidetop {
from {left:-200%;}
to {left:0%;}
}
@-o-keyframes homebarslidetop {
from {left:-200%;}
to {left:0%;}
}
@-ms-keyframes homebarslidetop {
from {left:-200%;}
to {left:0%;}
}
#camerabarwhite{
width:100%;
height:5%;
left:0%;
top:0%;
background: #ffffff;
position:fixed;
z-index: 2;
animation: 1.2s ease homebarwhite;
-webkit-animation: 1.2s ease homebarwhite;
-moz-animation: 1.2s ease homebarwhite;
-o-animation: 1.2s ease homebarwhite;
-ms-animation: 1.2s ease homebarwhite ;
}
@keyframes homebarwhite {
from {left:-200%;}
to {left:0%;}
}
@-webkit-keyframes homebarwhite {
from {left:-200%;}
to {left:0%;}
}
@-moz-keyframes homebarwhite {
from {left:-200%;}
to {left:0%;}
}
@-o-keyframes homebarwhite {
from {left:-200%;}
to {left:0%;}
}
@-ms-keyframes homebarwhite {
from {left:-200%;}
to {left:0%;}
}
#Cameratextinmenu{
position:fixed;
font-weight:lighter;
font-size:150%;
left:5%;
bottom:90.5%;
z-index:3;
color: #ffffff;
animation: 1.2s ease Cameratextinmenu;
-webkit-animation: 1.2s ease Cameratextinmenu;
-moz-animation: 1.2s ease Cameratextinmenu;
-o-animation: 1.2s ease Cameratextinmenu;
-ms-animation: 1.2s ease Cameratextinmenu ;
}
@keyframes Cameratextinmenu {
from {left:-50%;}
to {left:5%;}
}
@-webkit-keyframes Cameratextinmenu {
from {left:-50%;}
to {left:5%;}
}
@-moz-keyframes Cameratextinmenu {
from {left:-50%;}
to {left:5%;}
}
@-o-keyframes Cameratextinmenu {
from {left:-50%;}
to {left:5%;}
}
@-ms-keyframes Cameratextinmenu {
from {left:-50%;}
to {left:5%;}
}
#camera img {position:absolute;}
#photodone{
width:50%;
height:10%;
bottom:20%;
left:5%;
z-index: 1;
}
#logoforcamerapage{
width:50%;
height:10%;
left:28%;
position:fixed;
z-index: 1;
}
#Description {
width:75%;
left:18.5%;
top:38%;
padding: 0; /* Overridden by padding: 1px; */
font-family: Helvetica; /* Overridden by font: -webkit-small-control; */
border: 5% transparent white; /* Overridden by border: 2px inset; */
background: white; /* Overridden by background-color: white; */
line-height: 1;
z-index: 1;
position: absolute;
}
#Title{
width:75%;
left:18.5%;
top:28.5%;
padding: 0; /* Overridden by padding: 1px; */
font-family: Helvetica; /* Overridden by font: -webkit-small-control; */
border: 5% transparent white; /* Overridden by border: 2px inset; */
background: white; /* Overridden by background-color: white; */
line-height: 1;
z-index: 1;
position: absolute;
}
input[type=file] {
width:75%;
left:19%;
top:20%;
padding: 0; /* Overridden by padding: 1px; */
font-family: Helvetica; /* Overridden by font: -webkit-small-control; */
border: 5% transparent white; /* Overridden by border: 2px inset; */
background: white; /* Overridden by background-color: white; */
line-height: 1;
z-index: 1;
position: absolute;
}
form {
min-width: 81%;/* set the min width here */
width: 85%;
height:20%;
max-width: 81%;/* set the max width here */
margin: 30% 16%;
}
form textarea,
form input {
width: 100%;
}
#show-picture{
width:74.5%;
height:58%;
left:19%;
top:82%;
}
Some JavaScript from the App:
var url = 'http://desolate-spire-7901.herokuapp.com/locations/';
var watchID;
var geo;
var map;
var mapMaker;
var MAXIMUM_AGE = 200;
var TIMEOUT = 300000;
var HIGHACCURACY = true;
var AbelTasman = new google.maps.LatLng(-40.934774, 172.972194);
var circle;
var bounds;
var drops = [];
var infow = [];
var currentid;
var fakeGPS = false;
function HomeControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to AbelTasman';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Abel Tasman<b>'
controlUI.appendChild(controlText);
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(AbelTasman)
});
}
function getGeoLocation() {
try {
if (!!navigator.geolocation) {
console.log(navigator.geolocation);
return navigator.geolocation;
}
else {
return undefined;
}
}
catch(e) {
return undefined;
}
}
function show_map(position) {
if (fakeGPS) {
var lat = -41.2961783603629;
var lon = 174.775206793936;
} else {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
}
var latlng = new google.maps.LatLng(lat, lon);
if (map) {
//Map already exists, just upade your position and redo the cirlce/drops etc..
map.panTo(latlng);
mapMarker.setPosition(latlng);
bounds = circle.getBounds();
//Re-check all the drops
for (var i = 0; i < drops.length; i++) {
updateMarker(drops[i]);
}
}
else {
//Map doesn't exist yet, create it!
var myStyles = [
{
stylers: [
{ saturation: -20 }
]
}, {
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}, {
featureType: "poi",
elementType: "labels.icon",
stylers: [
{ visibility: "off" }
]
}, {
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var myOptions = {
zoom: 18,
center:latlng,
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles:myStyles
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.setTilt(0);
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
//homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
mapMarker = new google.maps.Marker({
position: latlng,
map:map,
title:"You are here.",
animation:google.maps.Animation.BOUNCE
});
circle = new google.maps.Circle({
map:map,
radius: 50,
strokeColor: '#4ABA8D',
fillColor: '#99FFBB'
});
circle.bindTo('center', mapMarker, 'position');
bounds = circle.getBounds();
mapMarker.setMap(map);
refreshMarkers();
}
}
function createMarkers(data) {
console.log("create");
for (var i = 0; i < data.length; i++) {
var drop = data[i];
var latlng = new google.maps.LatLng(drop.latitude, drop.longitude);
var marker = new google.maps.Marker({
position: latlng,
animation: google.maps.Animation.DROP,
title: drop.title,
description: drop.description,
tag: drop.tag,
uploader: drop.uploadername,
upvotes: drop.upvotes,
downvotes: drop.downvotes,
id: drop.dropid,
map: map
});
updateMarker(marker);
drops.push(marker);
}
google.maps.event.addListener(map, 'click', function() {
for (var i=0; i<infow.length; i++)
infow[i].setMap(null);
});
}
function updateMarker(marker) {
var showNature = document.filter[0].checked;
var showWildlife = document.filter[1].checked;
var showPeople = document.filter[2].checked;
var showTreasure = document.filter[3].checked;
var showOther = document.filter[4].checked;
var filtered = filter.value;
var contentString;
var rating = (((marker.upvotes) / (marker.upvotes + marker.downvotes)) * 5).toFixed(1);
var latlng = marker.getPosition();
if (marker.upvotes == 0)
rating = 0;
else if (marker.downvotes == 0) {
if (marker.upvotes<5)
rating = marker.upvotes;
else
rating = 5;
}
if (rating < filtered)
marker.setMap(null);
else
marker.setMap(map);
if (!marker.getVisible())
marker.setAnimation(google.maps.Animation.DROP);
if (marker.tag == "Nature") {
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
marker.setVisible(showNature);
}
else if (marker.tag == "Wildlife") {
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
marker.setVisible(showWildlife);
}
else if (marker.tag == "People") {
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/orange-dot.png');
marker.setVisible(showPeople);
}
else if (marker.tag == "Treasure") {
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/yellow-dot.png');
marker.setVisible(showTreasure);
}
else {
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/purple-dot.png');
marker.setVisible(showOther);
}
google.maps.event.clearListeners(marker, 'dblclick');
if (bounds.contains(latlng) && ((google.maps.geometry.spherical.computeDistanceBetween(latlng, mapMarker.getPosition())) <= 50) ) {
contentString = '<div>' +
'<h1>' + marker.title +'</h1>' +
'<p>uploaded by ' + marker.uploader + '<p>' +
'<p>' + marker.description + '<p>' +
'<p>Rating: ' + rating +'/5<p>' +
'</div>';
google.maps.event.addListener(marker, 'dblclick', function() {
console.log("doubleclick");
window.location.replace("#showdrop");
$.get(url + marker.id, function(data) {
console.log(data);
var pic = document.querySelector("#drop-picture");
console.log(marker.id);
pic.src = data;
pic.width = 500;
pic.height = 300;
currentid = marker.id;
document.getElementById("currenttitle").innerHTML = marker.title;
document.getElementById("currentdesc").innerHTML = marker.description;
//$("#drop-picture").attr('src', url + marker.id);
//console.log(data);
});
});
//window.open( "http://fathomless-shore-7584.herokuapp.com/locations/" + marker.id )
}
else {
marker.setIcon('http://maps.google.com/mapfiles/marker_grey.png');
contentString = '<div>' +
'<h1>' + marker.title + '</h1>' +
'<p>Rating: ' + rating + '/5<p>' +
'<p>Move closer to view this drop<p>' +
'</div>';
}
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infow.push(infowindow);
google.maps.event.clearListeners(marker, 'click');
google.maps.event.addListener(marker, 'click', function() {
for (var i=0; i<infow.length; i++)
infow[i].setMap(null);
infowindow.open(map, marker);
});
}
function refreshMarkers() {
//Remove all the current markers
for (var i = 0; i < drops.length; i++) {
drops[i].setMap(null);
}
for (i=0; i<infow.length; i++)
infow[i].setMap(null);
infow = [];
drops = [];
setTimeout(function(){
console.log("refresh");
$.getJSON(url, function(data) {
createMarkers(data.drops);
});
}, 250);
}
function upvoteDrop() {
var upvoteid = currentid;
$.get('http://desolate-spire-7901.herokuapp.com/upvote/'+upvoteid);
alert("Upvoting Drop:"+upvoteid+"\nVotes may take a while to update.");
}
function downvoteDrop() {
var downvoteid = currentid;
$.get('http://desolate-spire-7901.herokuapp.com/downvote/'+downvoteid);
alert("Downvoting Drop: "+downvoteid+"\nVotes may take a while to update.");
}
function geo_error(error) {
stopWatching();
switch(error.code) {
case error.TIMEOUT:
alert('Geolocation Timeout');
break;
case error.POSITION_UNAVAILABLE:
alert('Geolocation Postion unavailable');
break;
case error.PERMISSION_DENIED:
alert('Geolocation Permission denied');
break;
default:
alert('Geolocation returned an unknown error code: ' + error.code);
}
}
function stopWatching() {
if (watchID) geo.clearWatch(watchID);
watchID = null;
}
function startWatching() {
watchID = geo.watchPosition(show_map, geo_error, {
enableHighAccuracy: HIGHACCURACY,
maximumAge: MAXIMUM_AGE,
timeout: TIMEOUT
});
console.log(geo);
}
window.onload = function() {
//???
}
$("#drop").on("pageshow",function() {
//google.maps.event.trigger(map, 'resize');
//map.setZoom( map.getZoom() );
if (fakeGPS) show_map(null);
else {
if ((geo = getGeoLocation())) {
startWatching();
}
else {
alert('Geolocation not supported.')
}
}
});
No comments:
Post a Comment