te-geekette · ayoyoness · Apr 15, 2016 · Apr 15, 2016 · Apr 15, 2016 · Apr 15, 2016
diff --git a/README.md b/README.md
@@ -0,0 +1,6 @@
+#Whooot
+This project follows the principles of Under-engineering as an art form!
+
+#start the server
+navigate to your directory 
+`python  -m "SimpleHTTPServer"`
diff --git a/css/compass.css b/css/compass.css
@@ -0,0 +1,16 @@
+.compass-container {
+	height: 275px;
+	width: 300px;
+}
+
+.compass-circle {
+	position: absolute;
+	height: 40%;
+}
+
+.compass-needle {
+	position: relative;
+    left: 65px;
+    height: 200px;
+	top: 35px;    	
+}
diff --git a/images/compass-needle.png b/images/compass-needle.png
diff --git a/images/compass-without-needle.png b/images/compass-without-needle.png
diff --git a/index.html b/index.html
@@ -21,25 +21,139 @@
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/skeleton.css">
+  <link rel="stylesheet" href="css/compass.css">
 
   <!-- Favicon
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <link rel="icon" type="image/png" href="images/favicon.png">
 
+  <!-- js
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <script src="js/compass.js"></script>
+
+  <!-- The Map
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <style type="text/css">
+    html, body { height: 100%; margin: 0; padding: 0; }
+    /*#map { height: 100%; }*/
+    #map {
+      height: 100%;
+      width: 100%;
+      position:absolute;
+      top: 0;
+      left: 0;
+      z-index: 0; /* Set z-index to 0 as it will be on a layer below the contact form */
+    }
+
+    #header-box {
+      padding: 50px;
+      background-color: rgba(255, 255, 255, 0.65);
+      z-index: 200;
+      position: relative;
+    }
+
+    .beforeMap {
+      position: relative;
+      z-index: 100;
+    }
+  </style>
 </head>
-<body>
+<body onload="woIstMartin()">
 
   <!-- Primary Page Layout
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <div class="container">
     <div class="row">
-      <div class="one-half column" style="margin-top: 25%">
-        <h4>Basic Page</h4>
-        <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
+        <div id="header-box">
+          <h1 class="beforeMap">Wo ist Martin?</h1>
+          <input class="u-full-width" placeholder="Tell us where you saw Martin" id="searchTextField" onfocus="geolocate()">
+          <button class="button-primary" onclick="savePosition(markerLat, markerLng)">SAVE</button>
+        </div>
+    </div>
+    <div>
+      <p> Martin is in this direction</p>
+      <div class="compass-container">
+        <img class="compass-circle" src="images/compass-without-needle.png"/>
+        <img class="compass-needle" src="images/compass-needle.png"/>
       </div>
     </div>
   </div>
 
+  <div id="map"></div>
+  <script type="text/javascript">
+
+    var map;
+    var marker;
+    var markerLat;
+    var markerLng;
+    var autocomplete;
+
+    function initMap() {
+      var myLatLng = {lat: 53.5486471, lng: 9.9861163};
+
+      map = new google.maps.Map(document.getElementById('map'), {
+        center: myLatLng,
+        zoom: 15
+      });
+
+      map.addListener('click', function(e){
+        placeMarker(e.latLng, map)
+      });
+
+      initAutocomplete();
+    }
+
+    function placeMarker(latLng, map) {
+        if(marker){
+          marker.setMap(null);
+        }
+        marker = new google.maps.Marker({
+            position: latLng,
+            map: map,
+            draggable: true
+        });
+
+        // Storing the marker position to send to backend
+        markerLat = marker.position.lat();
+        markerLng = marker.position.lng();
+
+        map.panTo(latLng);
+    }
+
+    function savePosition(markerLng, markerLat){
+
+        var xhttp = new XMLHttpRequest();
+        var xhttp2 = new XMLHttpRequest();
+
+        xhttp.open("GET", "http://localhost:8000/latitude/a/" + markerLat, false);
+        xhttp.send();
+
+        xhttp2.open("GET", "http://localhost:8000/longitude/a/" + markerLng, false);
+        xhttp2.send();
+    }
+
+    function initAutocomplete() {
+      autocomplete = new google.maps.places.Autocomplete(
+        (document.getElementById('searchTextField')),
+        {types: ['geocode']}
+      );
+    }
+    //todo: Use selected address to set marker and store coordinates
+
+
+
+
+
+
+
+
+  </script>
+
+  <script async defer
+    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-ptSi5Ryh7O6cIPYj2WtcwWQgakU08hM&signed_in=true&libraries=places&callback=initMap">
+  </script>
+
+
 <!-- End Document
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 </body>

diff --git a/js/compass.js b/js/compass.js
@@ -0,0 +1,41 @@
+function woIstMartin(){
+
+	var officeCoordinates = {
+		lat: 53.548648,
+		lng: 9.9861409
+	};
+
+	var martinCoordinates = {
+		lat: 53.14677033085084,
+		lng: 27.2021484375
+	};
+
+	// using this formula http://www.igismap.com/formula-to-find-bearing-or-heading-angle-between-two-points-latitude-longitude/
+	var locationToDegrees = function(office, martin) {
+		office.lat = office.lat*Math.PI/180;
+		office.lng = office.lng*Math.PI/180;
+		martin.lat = martin.lat*Math.PI/180;
+		martin.lng = martin.lng*Math.PI/180;
+
+		var deltaLng = martin.lng - office.lng;
+		var x = Math.cos(martin.lat) * Math.sin(deltaLng);
+		var y = Math.cos(office.lat) * Math.sin(martin.lat) - Math.sin(office.lat) * Math.cos(martin.lat) * Math.cos(deltaLng);
+		var inRadian = Math.atan2(x, y);
+		return ((inRadian * 180/Math.PI) + 360) % 360
+	};
+
+	var getMartinCoordinates = function() {
+		fetch("martin-url/lat", {method: 'DELETE'})
+		.then(function(lat) {
+			martinCoordinates.lat = lat;
+		}).then(function(){
+			return fetch("martin-url/lng", {method: 'DELETE'})
+		}).then(function(lng) {
+			martinCoordinates.lng = lng;
+		});
+	};
+
+	getMartinCoordinates();
+	var direction = locationToDegrees(officeCoordinates, martinCoordinates);
+	document.getElementsByClassName("compass-needle")[0].style.transform="rotate(" + direction + "deg)";
+};
diff --git a/js/temp/package.json b/js/temp/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "temp",
+  "version": "0.0.0",
+  "description": "",
+  "main": "server.js",
+  "dependencies": {
+    "express": "^4.13.4"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/js/temp/server.js b/js/temp/server.js
@@ -0,0 +1,17 @@
+var express = require('express');
+var app = express();
+
+// respond with "hello world" when a GET request is made to the homepage
+app.delete('/martin-url/lat', function(req, res) {
+  res.send(200, "53.14677033085084");
+});
+
+app.delete('/martin-url/lng', function(req, res) {
+  res.send(200, "27.2021484375");
+});
+
+app.use('/', express.static('../../'));
+
+app.listen(3000, function () {
+  console.log('Example app listening on port 3000!');
+});