Skip to content

Commit

Permalink
Add main functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@babbitt
babbitt committed May 28, 2017
1 parent 3ca625b commit d823a65
Show file tree
Hide file tree
Showing 3 changed files with 186 additions and 26 deletions.
35 changes: 33 additions & 2 deletions assets/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,47 @@ body {
background-color: #59ABE3;

border-style: solid;
border-width: 15px;
border-color: rgba(228, 241, 254, 0.15);
}
border-width: 15px;
border-color: rgba(228, 241, 254, .75);
opacity: .65;
}

#returnhome {
position: absolute;
top: 25px;
right: 25px;
margin: 0px auto;
width: 60px;
height: 60px;
padding: 10px;
border-radius: 3px;
border-style: none;
font-size: 30px;
text-align: center;
color: #89C4F4;
background: #fefefe;
}

.stop {
width: 20px;
height: 20px;
border-radius: 50px;
color: white;
font-size: 1.2em;
text-align: center;
}

.radius {
opacity: .1;
border-radius: 50%;
width: 500px;
height: 500px;
margin-left: -240px;
margin-top: -240px;
-webkit-transition: width .5s, height .5s margin-left .5s margin-top .5s;
transition: width .5s, height .5s margin-left .5s margin-top .5s;
}
.one {
background-color: #EE352E;
}
Expand Down
141 changes: 130 additions & 11 deletions assets/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,12 @@ $.getJSON("http://freegeoip.net/json/", function(data) {

map = new mapboxgl.Map({
container: 'map',
minZoom: '10',
minZoom: '15',
<<<<<<< HEAD
maxZoom:'15',
=======
minZoom: '15',
>>>>>>> origin/master
zoom: 15,
center: new mapboxgl.LngLat(longitude, latitude),
style: 'mapbox://styles/jrebab/cj37feg0500002rqm7nf0oa0d'
Expand All @@ -23,15 +28,15 @@ $.getJSON("http://freegeoip.net/json/", function(data) {
.setLngLat([longitude, latitude])
.addTo(map);

//Change size on scroll
map.on('zoomend', function() {
var zoompx = String(map.getZoom() * (2/3));

$('.mapboxgl-marker').css("height", zoompx + 'px');
$('.mapboxgl-marker').css("width", zoompx + 'px');
$('.mapboxgl-marker').css("border-width", zoompx + 'px');
})
<<<<<<< HEAD
=======
document.getElementById('returnhome').addEventListener('click', function() {
map.flyTo({
center: [longitude, latitude]
});
});

>>>>>>> origin/master
//Load stops to map
for (stop of stops.data) {
if (stop[4] && stop[5] && (stop[0].slice([stop[0].length - 1], [stop[0].length]) != "N" && stop[0].slice([stop[0].length - 1], [stop[0].length]) != "S")) {
Expand Down Expand Up @@ -108,6 +113,8 @@ $.getJSON("http://freegeoip.net/json/", function(data) {
break;
}
el.setAttribute('id', stop[0]);
el.setAttribute('lat', stop[4]);
el.setAttribute('long',stop[5])
var marker = new mapboxgl.Marker(el)
.setLngLat([stop[5], stop[4]])
.addTo(map);
Expand All @@ -117,6 +124,118 @@ $.getJSON("http://freegeoip.net/json/", function(data) {
});

$(document).ready(function() {
$('#map').css("height", $(document).height())

$('#map').css("height", $(document).height());
$.get("http://cors-anywhere.herokuapp.com/http://587d347c.ngrok.io",function(data,err){
console.log(err);
if(data){
data = JSON.parse(data)
console.log(data);
for(stationloaded in data){
$("#"+stationloaded.substring(0,stationloaded.length-1)).show();
$("#"+stationloaded.substring(0,stationloaded.length-1)).html(stationloaded.substring(0,1));
var lat = $("#"+stationloaded.substring(0,stationloaded.length-1)).attr('lat');
var long = $("#"+stationloaded.substring(0,stationloaded.length-1)).attr('long');
for(stopoccurance in stationloaded){
var el = document.createElement('div');
switch (String(stationloaded).substring(0, 1)) {
case "1":
el.className = "radius one";
break;
case "2":
el.className = "radius two";
break;
case "3":
el.className = "radius three";
break;
case "4":
el.className = "radius four";
break;
case "5":
el.className = "radius five";
break;
case "6":
el.className = "radius six";
break;
case "N":
el.className = "radius N";
break;
case "Q":
el.className = "radius Q";
break;
case "R":
el.className = "radius R";
break;
case "A":
el.className = "radius A";
break;
case "C":
el.className = "radius C";
break;
case "E":
el.className = "radius E";
break;
case "B":
el.className = "radius B";
// break;
case "D":
el.className = "radius D";
break;
case "F":
el.className = "radius F";
break;
case "M":
el.className = "radius M";
break;
case "G":
el.className = "radius G";
break;
case "J":
el.className = "radius J";
break;
case "Z":
el.className = "radius Z";
break;
case "L":
el.className = "radius L";
break;
case "S":
el.className = "radius S";
break;
case "7":
el.className = "radius seven";
break;
case "H":
el.className = "radius H";
break;
}
el.setAttribute('id', data[stationloaded][stopoccurance]);
// console.log(lat);
var marker = new mapboxgl.Marker(el)
.setLngLat([long,lat])
.addTo(map);
}
}
}
});
setInterval(function(){
$(".radius").each(function(index,data){
dte = new Date();
var timeleft = parseInt(($(this).attr('id'))*1000)-dte.getTime()
if(timeleft > 0){
// console.log(timeleft*1000)-dte.getTime());
var radleft = timeleft.map(0, 3000000, 0, 500);
$(this).css('height',radleft);
$(this).css('width',radleft);
$(this).css('margin-left',-(radleft-20)/2);
$(this).css('margin-top',-(radleft-20)/2)
}
else{
$(this).hide()
}
})
},1000)
});

Number.prototype.map = function (in_min, in_max, out_min, out_max) {
return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
36 changes: 23 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Walk To</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
<script src='assets/js/jquery.js'></script>
<script src='assets/js/stops.js'></script>
<script src='assets/js/index.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
<link href='assets/css/index.css' rel='stylesheet' />
</head>
<body>
<div id='map' width="100%"></div>
</body>

<head>
<meta charset="UTF-8">
<title>Walk To</title>

<script src='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
<script src='assets/js/jquery.js'></script>
<script src='assets/js/stops.js'></script>
<script src='assets/js/index.js'></script>

<link href='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='assets/css/index.css' rel='stylesheet' />
</head>

<body>
<div id='map' width="100%"></div>

<button id = "returnhome">
<i class="fa fa-location-arrow"></i>
</button>

</body>

</html>

0 comments on commit d823a65

Please sign in to comment.