added cluster rush andLearn To Fly 3 to game and added the lik to the stiyulshet for my gaming vides
This commit is contained in:
mileswa1q22
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
@@ -1,61 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>Cluster Rush - Games | 𝙉𝙖𝙩𝙞𝙫𝙚</title>
|
||||
<script async src="https://arc.io/widget.min.js#5XPTU21J"><script data-goatcounter="https://parcoil.goatcounter.com/count"
|
||||
async src="//gc.zgo.at/count.js"></script></script><script src="maintenance.js/"></script><script>
|
||||
if (typeof navigator.serviceWorker !== 'undefined') {
|
||||
navigator.serviceWorker.register('sw.js')
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-W8NZMM8WN9"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-W8NZMM8WN9');
|
||||
</script><link rel="manifest" href="manifest.json">
|
||||
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="application-name" content="Native">
|
||||
<meta name="apple-mobile-web-app-title" content="Native">
|
||||
<meta name="theme-color" content="#0275d8">
|
||||
<meta name="msapplication-navbutton-color" content="#0275d8">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="msapplication-starturl" content="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<link rel="icon" type="image/png" sizes="195x253" href="images/native.png">
|
||||
<link rel="apple-touch-icon" type="image/png" sizes="195x253" href="images/native.png">
|
||||
|
||||
<link rel="icon" href="./icon.jpg">
|
||||
<style>
|
||||
/* a style sheet needs to be present for cursor hiding and custom cursors to work. */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="480px" width="640px"></canvas>
|
||||
<script type="text/javascript">
|
||||
var Module = {
|
||||
TOTAL_MEMORY: 268435456,
|
||||
errorhandler: null, // arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'
|
||||
compatibilitycheck: null,
|
||||
backgroundColor: "#222C36",
|
||||
splashStyle: "Dark",
|
||||
dataUrl: "Release/NG.data",
|
||||
codeUrl: "Release/NG.js",
|
||||
asmUrl: "Release/NG.asm.js",
|
||||
memUrl: "Release/NG.mem",
|
||||
};
|
||||
console.log("If the file NG.mem returns a 404 error, that is ok!")
|
||||
</script>
|
||||
<script src="Release/UnityLoader.js"></script>
|
||||
<script src="/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 227 KiB |
@@ -0,0 +1,2 @@
|
||||
# nacho-cs.gituhb.io
|
||||
cluster rush, an unblocked game for students in school :)
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -0,0 +1,186 @@
|
||||
function UnityProgress (dom) {
|
||||
var root_path = './TemplateData';
|
||||
this.progress = 0.0;
|
||||
this.message = "";
|
||||
this.dom = dom;
|
||||
|
||||
var parent = dom.parentNode;
|
||||
|
||||
var background = document.createElement("div");
|
||||
background.setAttribute('id', 'background');
|
||||
parent.appendChild(background);
|
||||
this.background = background;
|
||||
|
||||
var screen = document.createElement("div");
|
||||
screen.setAttribute('id', 'screen');
|
||||
background.appendChild(screen);
|
||||
|
||||
var logoImage = document.createElement("div");
|
||||
logoImage.setAttribute('id', 'y8-logo');
|
||||
screen.appendChild(logoImage);
|
||||
this.logoImage = logoImage;
|
||||
|
||||
var progressFrameLoader = document.createElement("div");
|
||||
progressFrameLoader.setAttribute('id', 'progress-frame-loader');
|
||||
screen.appendChild(progressFrameLoader);
|
||||
|
||||
var progressFrame = document.createElement("img");
|
||||
progressFrame.setAttribute('id', 'progress-frame');
|
||||
progressFrame.src = root_path + "/loadingbar.png";
|
||||
progressFrameLoader.appendChild(progressFrame);
|
||||
this.progressFrame = progressFrame;
|
||||
|
||||
var progressBarLoader = document.createElement("div");
|
||||
progressBarLoader.setAttribute('id', 'progress-bar-loader');
|
||||
screen.appendChild(progressBarLoader);
|
||||
|
||||
var progressBar = document.createElement("img");
|
||||
progressBar.setAttribute('id', 'progress-bar');
|
||||
progressBar.src = root_path + "/fullbar.png";
|
||||
progressBarLoader.appendChild(progressBar);
|
||||
this.progressBar = progressBar;
|
||||
|
||||
var messageArea = document.createElement("p");
|
||||
messageArea.setAttribute('id', 'message-area');
|
||||
screen.appendChild(messageArea);
|
||||
this.messageArea = messageArea;
|
||||
|
||||
|
||||
this.SetProgress = function (progress) {
|
||||
if (this.progress < progress) {
|
||||
this.progress = progress;
|
||||
}
|
||||
if (progress == 1) {
|
||||
this.SetMessage('Preparing...');
|
||||
}
|
||||
this.progressFrame.style.visibility = "visible";
|
||||
this.progressBar.style.display = "inline";
|
||||
this.Update();
|
||||
}
|
||||
|
||||
this.SetMessage = function (message) {
|
||||
if (message == "Loading WebGL Player, Please wait...") {
|
||||
message += '<img src="' + root_path + '/gears.gif" />'
|
||||
} else if ((m = message.match(/^Downloading data... \(([0-9]+)\/([0-9]+)\)/)) !== null) {
|
||||
message = this.RewriteMessage(m);
|
||||
}
|
||||
|
||||
this.message = message;
|
||||
this.background.style.display = "inline";
|
||||
this.progressFrame.style.visibility = "hidden";
|
||||
this.progressBar.style.display = "none";
|
||||
this.Update();
|
||||
}
|
||||
|
||||
this.RewriteMessage = function (m) {
|
||||
var downloaded = this.FormatBytes(parseInt(m[1]), 2);
|
||||
var total = this.FormatBytes(parseInt(m[2]), 2);
|
||||
var message = m[0].replace(m[1], downloaded);
|
||||
return message.replace(m[2], total);
|
||||
}
|
||||
|
||||
this.FormatBytes = function(bytes,decimals) {
|
||||
if(bytes == 0) { return '0 Byte'; }
|
||||
var k = 1000;
|
||||
var dm = decimals + 1 || 3;
|
||||
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
var i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return (bytes / Math.pow(k, i)).toPrecision(dm) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
this.Clear = function() {
|
||||
this.background.style.display = "none";
|
||||
this.logoImage.style.display = "none";
|
||||
this.progressFrame.style.display = "none";
|
||||
this.progressBar.style.display = "none";
|
||||
}
|
||||
|
||||
this.Update = function() {
|
||||
this.background.style.top = this.dom.offsetTop + 'px';
|
||||
this.background.style.left = this.dom.offsetLeft + 'px';
|
||||
this.background.style.width = this.dom.offsetWidth + 'px';
|
||||
this.background.style.height = this.dom.offsetHeight + 'px';
|
||||
|
||||
var progressFrameImg = new Image();
|
||||
progressFrameImg.src = this.progressFrame.src;
|
||||
|
||||
this.progressBar.style.top = this.progressFrame.style.top;
|
||||
this.progressBar.style.left = this.progressFrame.style.left;
|
||||
this.progressBar.width = progressFrameImg.width * Math.min(this.progress, 1);
|
||||
|
||||
this.messageArea.innerHTML = this.message;
|
||||
}
|
||||
this.Update ();
|
||||
}
|
||||
|
||||
window.addEventListener("keydown", function(e) {
|
||||
// space and arrow keys
|
||||
if([8, 32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}, false);
|
||||
|
||||
document.onmousedown = function() {window.focus();};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
updateCanvasDim();
|
||||
}, false);
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
updateCanvasDim();
|
||||
}, false);
|
||||
|
||||
function updateCanvasDim() {
|
||||
Game.resize(getQueryVariable('ratio_tolerant'));
|
||||
}
|
||||
|
||||
function getQueryVariable(variable) {
|
||||
var query = window.location.search.substring(1);
|
||||
var vars = query.split("&");
|
||||
for (var i=0;i<vars.length;i++) {
|
||||
var pair = vars[i].split("=");
|
||||
if(pair[0] == variable){return pair[1];}
|
||||
}
|
||||
return(false);
|
||||
}
|
||||
|
||||
var Game = new function() {
|
||||
var self = {
|
||||
|
||||
resize: function(ratio_tolerant) {
|
||||
var template = document.querySelector('.template-wrap');
|
||||
var canvas = document.getElementById('canvas');
|
||||
var bg = document.getElementById('background');
|
||||
var item_size_ratio = canvas.getAttribute('width') / canvas.getAttribute('height');
|
||||
|
||||
var max_height = window.innerHeight;
|
||||
var max_width = window.innerWidth;
|
||||
var window_size_ratio = max_width / max_height;
|
||||
|
||||
if (ratio_tolerant == 'true') {
|
||||
new_style = { width: max_width, height: max_height };
|
||||
self.update_style(canvas, new_style.width, new_style.height);
|
||||
self.update_style(bg, new_style.width, new_style.height);
|
||||
} else if (ratio_tolerant == 'false') {
|
||||
if (item_size_ratio > window_size_ratio) {
|
||||
new_style = { width: max_width, height: max_width / item_size_ratio };
|
||||
} else {
|
||||
new_style = { width: max_height * item_size_ratio, height: max_height };
|
||||
}
|
||||
self.update_style(canvas, new_style.width, new_style.height);
|
||||
self.update_style(bg, new_style.width, new_style.height);
|
||||
}
|
||||
template.setAttribute('width', canvas.getAttribute('width'));
|
||||
template.style.width = canvas.getAttribute('width') + 'px';
|
||||
},
|
||||
|
||||
update_style: function(element, width, height) {
|
||||
element.setAttribute('width', width);
|
||||
element.setAttribute('height', height);
|
||||
element.style.width = width + 'px';
|
||||
element.style.height = height + 'px';
|
||||
},
|
||||
}
|
||||
|
||||
return self;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 150 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
@@ -0,0 +1,31 @@
|
||||
|
||||
/****************************************
|
||||
==== RESETS
|
||||
****************************************/
|
||||
|
||||
html,body,div,canvas { margin: 0; padding: 0; }
|
||||
::-moz-selection { color: #333; text-shadow: none; }
|
||||
::selection { color: #333; text-shadow: none; }
|
||||
.clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
|
||||
.clear { display: inline-table; clear: both; }
|
||||
/* Hides from IE-mac \*/ * html .clear { height: 1%; } .clear { display: block; } /* End hide from IE-mac */
|
||||
|
||||
/****************************************
|
||||
==== LAYOUT
|
||||
****************************************/
|
||||
|
||||
html, body { width: 100%; height: 100%; font-family: Helvetica, Verdana, Arial, sans-serif; }
|
||||
div.logo { width: 380px; height: 49px; float: left; background: url(logo.png) 0 0 no-repeat; position: relative; z-index: 10; }
|
||||
div.title { height: 38px; line-height: 38px; padding: 0 10px; margin: 0; float: right; color: #333; text-align: right; font-size: 18px; position: relative; z-index: 10; }
|
||||
.template-wrap { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
|
||||
.template-wrap canvas { margin: 0; position: relative; z-index: 9; }
|
||||
.fullscreen { float: right; position: relative; z-index: 10; }
|
||||
|
||||
#background { background: #f0f0f0; position: absolute; }
|
||||
#screen { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; width: 100%; }
|
||||
#y8-logo { background-image: url('logo.png'); width: 380px; height: 49px; margin: 0 auto; }
|
||||
#progress-frame-loader { margin: 0 auto; margin-top: 10px; height: 10px; width: 380px; visibility: hidden; }
|
||||
#progress-bar-loader { height: 10px; width: 380px; margin: 0 auto; text-align: left; margin-top: -18px; }
|
||||
#progress-bar { height: 10px; }
|
||||
#message-area { color: #969696; width: 100%; }
|
||||
#message-area img { vertical-align: middle; }
|
||||
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Unity WebGL Player | Cluster Rush</title>
|
||||
<link href="TemplateData/style.css" rel="stylesheet">
|
||||
<script src="TemplateData/UnityProgress.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="template">
|
||||
<div class="template-wrap clear">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" style="width: 100vw; height: 100.1vh" ></canvas>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var Module = {
|
||||
TOTAL_MEMORY: 268435456,
|
||||
errorhandler: null, // arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'
|
||||
compatibilitycheck: null,
|
||||
backgroundColor: "#222C36",
|
||||
splashStyle: "Dark",
|
||||
dataUrl: "Release/NG.data",
|
||||
codeUrl: "Release/NG.js",
|
||||
asmUrl: "Release/NG.asm.js",
|
||||
memUrl: "Release/NG.mem",
|
||||
};
|
||||
</script>
|
||||
<script src="Release/UnityLoader.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Google</title>
|
||||
</head>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<iframe src="game.html" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
@@ -93,7 +93,9 @@
|
||||
<a href="games/plantsvszom.html">Plants vs. Zombies</a>
|
||||
<a href="/games/code castle 0.7.html">code castle 0.7</a>
|
||||
<a href="/games/random tycoon thing.html">random tycoon thing</a>
|
||||
<a href="/roberts games/Learn-To-Fly-3-main/Learn-To-Fly-3-main/index.html">Learn To Fly 3 idk if it works</a>
|
||||
<a href="/games/Basketball-Legends-2020-gh-pages/Basketball-Legends-2020-gh-pages/index.html">Basketball Legends 2020</a>
|
||||
<a href="/games/nacho-cs.github.io-main/nacho-cs.github.io-main/index.html">cluster rush</a>
|
||||
</head>
|
||||
</form>
|
||||
<div id="disqus_thread"></div>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" type="x-icon" href="/game online.png">
|
||||
<link rel="stylesheet" href="/ecstra/ecsta.css">
|
||||
<title>home but no</title>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/uDYv0yGoOFQ?si=5-8wZBbnj10McgdB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/HSIKjFyLG6s?si=HTpzjB-FcIao434F" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"projects": {
|
||||
"default": "nyevents-77bd9"
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"hosting": {
|
||||
"public": "public",
|
||||
"ignore": [
|
||||
"firebase.json",
|
||||
"**/.*",
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Page Not Found</title>
|
||||
|
||||
<style media="screen">
|
||||
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
|
||||
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
|
||||
#message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
|
||||
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
|
||||
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
|
||||
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
|
||||
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
|
||||
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
|
||||
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
|
||||
@media (max-width: 600px) {
|
||||
body, #message { margin-top: 0; background: white; box-shadow: none; }
|
||||
body { border-top: 16px solid #ffa100; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="message">
|
||||
<h2>404</h2>
|
||||
<h1>Page Not Found</h1>
|
||||
<p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
|
||||
<h3>Why am I seeing this?</h3>
|
||||
<p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,2 +0,0 @@
|
||||
# ClusterTruckProject
|
||||
Single page web app created as part of the ClusterTruck interview process
|
||||
@@ -1,46 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
|
||||
<script>
|
||||
// Initialize Firebase
|
||||
var config = {
|
||||
apiKey: "AIzaSyCooDk0ln_ccwCuCUX9LtHC019vdYCSxWc",
|
||||
authDomain: "nyevents-77bd9.firebaseapp.com",
|
||||
databaseURL: "https://nyevents-77bd9.firebaseio.com",
|
||||
projectId: "nyevents-77bd9",
|
||||
storageBucket: "",
|
||||
messagingSenderId: "73094720751"
|
||||
};
|
||||
firebase.initializeApp(config);
|
||||
</script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAfDnbONaf2dEAsFIR4JEb2WolXTqsdgc&callback=initMap"
|
||||
async defer>
|
||||
</script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script src="markers.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="styles.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="title">
|
||||
<div id="titleWords">
|
||||
<h1>ClusterTruck Take Home Problem</h1>
|
||||
<h2>Created by: Logan Schiessle</h2>
|
||||
</div>
|
||||
<div class="facetDrop">
|
||||
<button class="facetButton">Facet Category Options</button>
|
||||
<div class="facetDrop-content">
|
||||
<input type="radio" name="facet" value="none" onchange="changeFacet(-1)" checked> None <br>
|
||||
<input type="radio" name="facet" value="0" onchange="changeFacet(0)"> 0 <br>
|
||||
<input type="radio" name="facet" value="1" onchange="changeFacet(1)"> 1 <br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,91 +0,0 @@
|
||||
var map;
|
||||
var facetChoice;
|
||||
var facetChosen = 0;
|
||||
var sw;
|
||||
var ne;
|
||||
|
||||
|
||||
//Runs when the page is loaded, in order to create a google map with the center in New York City.
|
||||
function initMap() {
|
||||
var newYorkCityLatLong = new google.maps.LatLng(40.7128, -74.0059);
|
||||
map = new google.maps.Map(document.getElementById('map'), {
|
||||
center: newYorkCityLatLong,
|
||||
zoom: 9,
|
||||
});
|
||||
|
||||
//this listener works, but I am having a very hard time getting the NY Times api to work the way it is supposed to when using the sw,
|
||||
//and ne parameters. When those are supplied it is supposed to keep the results to those within the box created by those two points,
|
||||
//but it doesn't work, not here or in their console. A different way to do this would be to manually check if every point is within the
|
||||
//parameters.
|
||||
google.maps.event.addListener(map, 'bounds_changed', function() {
|
||||
var bounds = map.getBounds();
|
||||
sw = bounds.getSouthWest();
|
||||
ne = bounds.getNorthEast();
|
||||
swLat = sw.lat().toFixed(5);
|
||||
swLng = sw.lng().toFixed(5);
|
||||
neLat = ne.lat().toFixed(5);
|
||||
neLng = ne.lng().toFixed(5);
|
||||
loadMarkers();
|
||||
});
|
||||
}
|
||||
|
||||
//Queries the NY Times Geographic API and takes the results and creates markers out of them.
|
||||
function loadMarkers() {
|
||||
var url = "https://api.nytimes.com/svc/semantic/v2/geocodes/query.json";
|
||||
if(facetChosen) {
|
||||
url += '?' + $.param({
|
||||
'sw': swLat + ',' + swLng,
|
||||
'ne': neLat + ',' + neLng,
|
||||
'facet': facetChoice,
|
||||
'country_code': "US",
|
||||
'api-key': "af9bf1c31430421ab0ab8f940e8b987f"
|
||||
});
|
||||
facetChosen = 0;
|
||||
} else {
|
||||
url += '?' + $.param({
|
||||
'sw': swLat + ',' + swLng,
|
||||
'ne': neLat + ',' + neLng,
|
||||
'country_code': "US",
|
||||
'api-key': "af9bf1c31430421ab0ab8f940e8b987f"
|
||||
});
|
||||
}
|
||||
var things;
|
||||
//This proxyurl was used to overcome a Access-Control-Allow-Origin error with CORS.
|
||||
const proxyurl = "https://cors-anywhere.herokuapp.com/";
|
||||
//could use this fetch method, or a GET ajax call.
|
||||
fetch(proxyurl + url)
|
||||
.then(response => response.text())
|
||||
.then(contents => JSON.parse(contents))
|
||||
.then(function(data){
|
||||
console.log(url);
|
||||
for (var i = 0; i < data.results.length; i++) {
|
||||
var latLon = new google.maps.LatLng(data.results[i].latitude,data.results[i].longitude);
|
||||
var marker = new google.maps.Marker({
|
||||
position: latLon,
|
||||
});
|
||||
marker.addListener('click', addInfoWindow(data, marker, i));
|
||||
marker.setMap(map);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//Creates an info window to be opened when a marker is clicked.
|
||||
function addInfoWindow(data, marker, index) {
|
||||
return function() {
|
||||
var infowindow = new google.maps.InfoWindow({
|
||||
content: '<h1>' + data.results[index].name + '</h1>' +
|
||||
'<p>' + data.results[index].name + ' has a lat/lng of (' + data.results[index].latitude + ', ' + data.results[index].longitude + '). ' +
|
||||
'It also has an elevation of ' + data.results[index].elevation + ' feet.</p>'
|
||||
});
|
||||
infowindow.open(map, marker);
|
||||
}
|
||||
}
|
||||
|
||||
//Takes radio button input and reloads markers based on the change in facets.
|
||||
function changeFacet(val) {
|
||||
if (val > 0) {
|
||||
facetChoice = val;
|
||||
facetChosen = 1;
|
||||
}
|
||||
loadMarkers();
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
#title {
|
||||
background-color: orange;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#titleWords {
|
||||
float: left;
|
||||
width: 90%;
|
||||
height: 100px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.facetButton {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.facetDrop {
|
||||
float: right;
|
||||
width: 10%;
|
||||
height: 50px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.facetDrop-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.facetDrop-content a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.facetDrop-content a:hover {
|
||||
background-color: #f1f1f1
|
||||
}
|
||||
|
||||
.facetDrop:hover .facetDrop-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.facetDrop:hover .facetButton {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
Reference in New Issue
Block a user