Skip to content

Commit

Permalink
testing with current location
Browse files Browse the repository at this point in the history
  • Loading branch information
@jsn13002
jsn13002 committed Apr 23, 2017
1 parent 9e1b663 commit 4f8fb56
Showing 1 changed file with 180 additions and 0 deletions.
180 changes: 180 additions & 0 deletions test.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
<!DOCTYPE html>
<html class="no-js" lang="">

<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>WRA | Map</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/well-card.css">
<link rel="stylesheet" href="css/map-desktop.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>






<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->






<nav class="top-nav">
<div class="main-bttns">
<button onclick="document.getElementById('menu').classList.toggle('closed'); document.getElementById('close-menu').classList.toggle('closed')"><img src="img/menu.svg" alt="menu" /></button> <h1>Well Report App</h1>
<a href="search.php"><button><img src="img/search.svg" alt="menu" /></button></a>
</div>

<div class="close-menu closed" id="close-menu" onclick="document.getElementById('menu').classList.toggle('closed'); document.getElementById('close-menu').classList.toggle('closed')"></div>
<div class="slide-menu closed" id="menu">

<p>Currntly signed in as: <br>

</p>
<h3>my.name@ct.gov</h3>
<a href="#">Logout</a>

<button>Terrain</button>
<button>Satilite</button>

<a class="settings" href="#">Settings</a>

</div>
</nav>

<main class="map">

<div id="map" class="google-maps">
</div>

<div class="well-preview well-card clearfix">
<div class="well-img"></div>
<div>
<h2>Well Name</h2>
<p>short well description</p>
<a href="details.php">DETAILS</a>
</div>
</div>

<div class="desk-details">
<a href="details.php" class="go-to" > go to > </a>
<?php
include 'details-content.php';
?>
</div>

</main>

<nav class="bottom-nav">
<button><a href="map.php"><img src="img/map.svg" alt="menu" /></a></button>
<button><a href="wells-list.php"><img src="img/well.png" alt="menu" /></a></button>
</nav>

<nav class="fabs">
<button class="gps"><img src="img/gps.svg" alt="get location" /></button>
<button class="add-well"><a href="form.php"> <img src="img/add.svg" alt="add well" /></a></button>
</nav>

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')
</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<script>

function initMap() {
var myLatLng = {position.coords.latitude, position.coords.longitude};
var map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 15
});
var infoWindow = new google.maps.InfoWindow;

// Change this depending on the name of your PHP or XML file
downloadUrl('http://wellreportapp.uconn.edu/xmlGenerate.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('id');
var address = markerElem.getAttribute('address');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));

var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = address
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));


var text = document.createElement('text');
text.textContent = name
infowincontent.appendChild(text);
infowincontent.appendChild(document.createElement('br'));

var clicker = document.createElement('a');
var clickerText = document.createTextNode("go to details...");
clicker.setAttribute('href',"http://wellreportapp.uconn.edu/details.php?Well_ID="+id);
clicker.appendChild(clickerText);
infowincontent.appendChild(clicker);
var marker = new google.maps.Marker({
map: map,
position: point
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}


function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};

request.open('GET', url, true);
request.send(null);
}

function doNothing() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCNSoPsxLd0LbvQaH9R6npO7jj-jKAXyQ4&callback=initMap">
</script>
</body>


</html>
<!--
notes :
we will need a file where we import the well name, address, longiture and latitude within the range we chose
we need a food loop for it
-->

0 comments on commit 4f8fb56

Please sign in to comment.