diff --git a/app/geolocation/geolocation.js b/app/geolocation/geolocation.js new file mode 100644 index 0000000..68c6c02 --- /dev/null +++ b/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('/'); +} diff --git a/app/geolocation/geolocation.test.js b/app/geolocation/geolocation.test.js new file mode 100644 index 0000000..603d522 --- /dev/null +++ b/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); + }); + }); +}); diff --git a/app/geolocation/index.jade b/app/geolocation/index.jade new file mode 100644 index 0000000..34099b7 --- /dev/null +++ b/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") diff --git a/app/geolocation/routes.js b/app/geolocation/routes.js new file mode 100644 index 0000000..4f0b672 --- /dev/null +++ b/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; diff --git a/app/index.js b/app/index.js index 53611ea..601924d 100644 --- a/app/index.js +++ b/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/'); diff --git a/app/routes.js b/app/routes.js index 3ae8289..83ef31f 100644 --- a/app/routes.js +++ b/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; diff --git a/app/templates/layout.jade b/app/templates/layout.jade index 539dbc8..b172f49 100644 --- a/app/templates/layout.jade +++ b/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 diff --git a/atmebro b/atmebro new file mode 160000 index 0000000..dd01493 --- /dev/null +++ b/atmebro @@ -0,0 +1 @@ +Subproject commit dd01493c407f868541e3c5a2170aafc53ef987db diff --git a/package.json b/package.json index 4e1c7ff..3e3422e 100644 --- a/package.json +++ b/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", diff --git a/www/clientgeo.js b/www/clientgeo.js new file mode 100644 index 0000000..06c43ca --- /dev/null +++ b/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 = '
'+ + '
'+ + '
'+ + '

Uluru

'+ + '
'+ + '

Uluru, also referred to as Ayers Rock, is a large ' + + 'sandstone rock formation in the southern part of the '+ + 'Northern Territory, central Australia. It lies 335 km (208 mi) '+ + 'south west of the nearest large town, Alice Springs; 450 km '+ + '(280 mi) by road. Kata Tjuta and Uluru are the two major '+ + 'features of the Uluru - Kata Tjuta National Park. '+ + '

Attribution: Uluru, '+ + 'https://en.wikipedia.org/w/index.php?title=Uluru '+ + '(last visited June 22, 2009).

'+ + '
'+ + '
'; + + + 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' + }); + }); +}; diff --git a/www/styles/main.css b/www/styles/main.css new file mode 100644 index 0000000..cdb5f58 --- /dev/null +++ b/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 | +----------------------*/