Adds map object and geoposition marker; starts infowindow

app/geolocation/geolocation.js

@@ -0,0 +1,17 @@
+var geocoder = require('geocoder')
+
+module.exports.getLoc = function getLoc (req, res) {
+  res.render('geolocation/index')
+}
+
+module.exports.submitLoc = function submitLoc (req, res) {
+  var lat = req.body.lat;
+  var long = req.body.long;
+  var newlat = parseFloat(lat);
+  var newlong = parseFloat(long);
+
+  geocoder.reverseGeocode(newlat, newlong, function(err, data) {
+    var address = data.results[0].formatted_address;
+  });
+  res.redirect('/');
+}

app/geolocation/geolocation.test.js

@@ -0,0 +1,26 @@
+var expect = require('chai').expect;
+var request = require('supertest');
+var geo = require('./geolocation.js');
+//var map = require('./map.js')
+
+describe('geolocation', function () {
+  describe.only('IP Address', function () {
+    it('should identify my IP address', function () {
+      var actual = require('./geolocation.js').getIP();
+      request
+        .post('/')
+        .end(function (err, res) {
+          console.log('res');
+        })
+    });
+  });
+});
+describe('Map', function () {
+  describe('constructor', function () {
+    it('should return an animal object', function () {
+      var animal = new Animal();
+      animal.should.be.an('object');
+      animal.should.be.an.instanceOf(Animal);
+    });
+  });
+});

app/geolocation/index.jade

@@ -0,0 +1,13 @@
+extends ../templates/layout
+
+// form will become part of the tweet message form
+
+block content
+  form(action='/geolocation/submit', method="POST")
+    input(name="lat" id="lat")
+    input(name="long" id="lng")
+    input(type="submit" value="submit")
+  div#map-canvas
+  script(src="//code.jquery.com/jquery-1.11.0.min.js")
+  script(src='https://maps.googleapis.com/maps/api/js?v=3.exp')
+  script(src="clientgeo.js")

app/geolocation/routes.js

@@ -0,0 +1,9 @@
+var express = require('express');
+var router = express.Router();
+
+var geo = require('./geolocation');
+
+router.get('/', geo.getLoc);
+router.post('/submit', geo.submitLoc)
+
+module.exports = router;

app/index.js

@@ -6,6 +6,7 @@ var morgan = require('morgan');
 
 var routes = require('./routes');
 var database = require('../lib/mongo/');
+var bodyParser = require('body-parser');
 
 var app = module.exports = express();
 
@@ -14,10 +15,11 @@ app.set('views', __dirname);
 app.set('view engine', 'jade');
 
 app.locals.title = 'MiniTwit';
-
+app.use(bodyParser.urlencoded({extended: true}));
 app.use(morgan('dev'));
 
 app.use('/', routes);
+app.use(express.static('www'))
 
 require('../lib/errorHandler/');
 

app/routes.js

@@ -4,7 +4,8 @@ var express = require('express');
 var router = express.Router();
 
 var home = require('./home/routes');
+var geo = require('./geolocation/routes')
 
 router.use('/', home);
-
+router.use('/geolocation', geo)
 module.exports = router;

app/templates/layout.jade

@@ -8,6 +8,7 @@ html
       title #{title} | #{page}
     else
       title #{title}
+    link(rel="stylesheet", href="/styles/main.css")
   body
     include partials/header
 

package.json

@@ -5,8 +5,8 @@
   "main": "index.js",
   "scripts": {
     "lint": "eslint .",
-    "start": "node index.js",
-    "test": "mocha app --recursive"
+    "start": "node index.js --compilers js:babel/register",
+    "test": "NODE_ENV=test mocha app --recursive --compilers js:babel/register"
   },
   "repository": {
     "type": "git",
@@ -20,13 +20,20 @@
   "homepage": "https://github.com/NSS-Cohort-9/minitwit#readme",
   "dependencies": {
     "babel": "^5.8.21",
+    "body-parser": "^1.13.3",
     "errorhandler": "^1.4.2",
     "express": "^4.13.3",
+    "geocoder": "^0.2.2",
     "jade": "^1.11.0",
+
+    "lodash": "^3.10.1",
+    "md5": "^2.0.0",
     "mongodb": "^2.0.41",
-    "morgan": "^1.6.1"
+    "morgan": "^1.6.1",
+    "node-sass-middleware": "^0.9.0"
   },
   "devDependencies": {
+    "bower": "^1.4.1",
     "chai": "^3.2.0",
     "eslint": "^1.1.0",
     "mocha": "^2.2.5",

www/clientgeo.js

@@ -0,0 +1,103 @@
+$(document).ready(function () {
+  navigator.geolocation.getCurrentPosition(showPosition);
+
+});
+
+function showPosition(position) {
+  document.getElementById("lat").value = position.coords.latitude;
+  document.getElementById("lng").value = position.coords.longitude;
+
+  var pos = {
+    lat: position.coords.latitude,
+    lng: position.coords.longitude
+  };
+  console.log(pos);
+  userMap(pos);
+
+}
+
+function userMap(pos) {
+  var mapCanvas = document.getElementById('map-canvas'); //div in the html
+  var mapOptions = {
+    center: {
+      lat: pos.lat,
+      lng: pos.lng
+    },
+    zoom: 15,
+    mapTypeId: google.maps.MapTypeId.ROADMAP,
+    scrollwheel: false,
+  };
+  var map = new google.maps.Map(mapCanvas, mapOptions);
+  console.log('map>>>>>>>>>>', map);
+
+
+  ///////////////
+  //info window//
+  ///////////////
+var contentString = '<div id="content">'+
+      '<div id="siteNotice">'+
+      '</div>'+
+      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
+      '<div id="bodyContent">'+
+      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
+      'sandstone rock formation in the southern part of the '+
+      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
+      'south west of the nearest large town, Alice Springs; 450&#160;km '+
+      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
+      'features of the Uluru - Kata Tjuta National Park. '+
+      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
+      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
+      '(last visited June 22, 2009).</p>'+
+      '</div>'+
+      '</div>';
+
+
+  var infowindow = new google.maps.InfoWindow({
+    //word from the post
+    //and the photo from imagur
+    //and the geolocation
+    content: contentString
+
+  });    console.log('infowindow>>>>>', infowindow);
+
+  var marker = new google.maps.Marker({
+    position: pos,
+    map: map,
+    title: 'This is a test'
+  });
+  console.log('marker>>>>>>>', marker)
+
+  marker.addListener('click', function () {
+    infowindow.open(map, marker);
+  });
+  //wait for the creation of the infowindow html structure
+  google.maps.event.addListener(infowindow, 'domready', function () {
+    //div that takes content for infowindow
+    var iwOuter = $('.gm-style-iw');
+    //just above that is the div we want to change
+    var iwBackground = iwOuter.prev();
+    //remove the background shadow div
+    iwBackground.children(':nth-child(2)').css({
+      'display': 'none'
+    });
+    //remove the white background div
+    iwBackground.children('nth-child(4)').css({
+      'display': 'none'
+    });
+    iwOuter.parent().parent().css({
+      left: '115px'
+    });
+    //moves shadow of arrow to the left
+    iwBackground.children(':nth-child(1)').attr('style', function (i, s) {
+      return s + 'left: 76px !important;'
+    });
+    //moves arrow to left
+    iwBackground.children(':nth-child(3)').attr('style', function (i, s) {
+      return s + 'left: 76px !important;'
+    });
+    iwBackground.children(':nth-child(3)').find('div').children().css({
+      'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px',
+      'z-index': '1'
+    });
+  });
+};

www/styles/main.css

@@ -0,0 +1,40 @@
+body {
+  background-color: rgb(74, 155, 230);
+}
+
+h1 {
+  color: orange;
+}
+
+
+/*---------------------|
+|    start             |
+|    MAP AND INFOBOX   |
+----------------------*/
+
+#map-canvas {
+  height: 450px;
+  width: 450px;
+   }
+#iw-container .iw-title {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 22px;
+  padding:10px;
+  color:#48b5e9;
+  margin:1px;
+  border-radius: 2px 2px 0 0;
+}
+.gm-style-iw {
+  width:350px !important;
+  top: 0 !important;
+  left: 0 !important;
+  background-color: #ffffff;
+  box-shadow: 0 1px 6px rbga(178, 178, 178, 0.6);
+  border: 1px solid rgba(72, 178, 178, 0.6);
+  border-radius: 2px 2px 0 0;
+}
+
+/*---------------------|
+|    end               |
+|    MAP AND INFOBOX   |
+----------------------*/