fixed userloc zoom issue

Gruntfile.js

@@ -60,10 +60,10 @@ module.exports = function(grunt) {
       },
       client: {
         files: ['client/src/*.js'],
-        tasks: ['concat','uglify'],
+        tasks: ['concat'],
       },      
       frontend: {
-        files: ['client/dist/*.js'],
+        files: ['client/dist/*.js', 'client/index.html', 'client/style.css'],
         options: {
           livereload: true
         }

client/src/App.js

@@ -18,6 +18,10 @@ lm.App.prototype.setupMap = function (argument) {
   setInterval(this.fetchAndRenderVehicles.bind(this), 10000);
 };
 
+lm.App.prototype.set = function(variable, value){
+  this[variable] = value;
+};
+
 lm.App.prototype.fetchAndRenderVehicles = function() {
   var bounds = this.map.getBounds();
   var southWest = bounds.getSouthWest();
@@ -107,7 +111,7 @@ lm.App.prototype.updateOrAddSVG = function(dirObj, selectClassWithDot, clickClas
       svg,
       circ,
       timeleft,
-      // dirObj = this.lastStopObj; TODO: undo
+      // dirObj = this.lastStopObj,
       projection = this.map.projection,
       svgBind = d3.select(selectClassWithDot).selectAll('svg'),
       multiple = !(dirObj instanceof google.maps.LatLng);
@@ -184,6 +188,32 @@ lm.App.prototype.bussify = function(enableTransitions){
       .style('top', (d.y - lm.config.offset) +  'px');
     };
 
+/*************
+  U s e r s
+*************/
+
+if(this.userloc){
+
+  var userSvgBind = d3.select('.userloclayer').selectAll('svg')
+    .data(this.userloc)
+    .each(latLngToPx);
+
+  var userSvg = userSvgBind.enter().append('svg')
+    .each(latLngToPx)
+    .attr('class','usersvg');
+
+  var userCirc = userSvg.append('circle')
+    .attr('r', 8)
+    .attr('cx',10)
+    .attr('cy',10)
+    .attr('class','user')
+    .style('fill','blue');  
+}  
+
+/************* 
+  B u s s e s 
+**************/
+
   var busLayer = d3.select('.toplayer');
 
   //create SVG containers

client/src/Map.js

@@ -84,12 +84,14 @@ lm.Map.prototype.getBounds = function() {
 
 lm.Map.prototype.waitForDestinationClick = function(userPosition){
   var self = this;
-  // var userLonLat = [userPosition.coords.longitude, userPosition.coords.latitude]; // not accurate in browser, may be accurate in phone
-  userPosition = {coords:{latitude:37.783594,longitude: -122.408904}}; // fake TODO fix
+  // var userLonLat = [userPosition.coords.lon, userPosition.coords.lat]; // not accurate in browser, may be accurate in phone
+  userPosition = {coords:{lat:37.783594,lon: -122.408904}}; // fake TODO fix
   var userLonLat = [-122.408904,37.783594];                            // fake TODO fix
   var userMapLatLng = new google.maps.LatLng(userLonLat[1],userLonLat[0]);
-  lm.app.updateOrAddSVG(userMapLatLng, '.userloclayer', 'usersvg', 'user', 'blue');
-  var location = new google.maps.LatLng(userPosition.coords.latitude, userPosition.coords.longitude);
+  lm.app.set('userloc',[userPosition.coords]);
+  // lm.app.updateOrAddSVG(userMapLatLng, '.userloclayer', 'usersvg', 'user', 'blue');
+  lm.app.bussify(0);
+  var location = new google.maps.LatLng(userPosition.coords.lat, userPosition.coords.lon);
   this.gMap.setCenter(location);
 
   // may be good to toggle w/ button click on menu

client/style.css

@@ -23,9 +23,8 @@ html, body, #map-canvas {
   background: -ms-linear-gradient(top,  rgba(255,255,255,1) 3%,rgba(229,235,238,1) 84%); /* IE10+ */
   background: linear-gradient(to bottom,  rgba(255,255,255,1) 3%,rgba(229,235,238,1) 84%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5ebee',GradientType=0 ); /* IE6-9 */
-
   z-index: 10;
-  border:1px solid #696969   ;
+  border:1px solid #696969;
   border-radius:10px;
   box-shadow: -1px 3px 10px #888888;
 
@@ -56,18 +55,15 @@ html, body, #map-canvas {
   text-shadow: 0 -1px 1px rgba(0,0,0,0.1);
   font-size: 1.25em;
   font-family: helvetica neue, verdana, sans;
-  color: #696969   
-
-
-   ;
+  color: #696969;
   background: rgb(255,255,255); /* Old browsers */
-background: -moz-linear-gradient(top,  rgba(255,255,255,1) 3%, rgba(229,235,238,1) 84%); /* FF3.6+ */
-background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgba(255,255,255,1)), color-stop(84%,rgba(229,235,238,1))); /* Chrome,Safari4+ */
-background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 3%,rgba(229,235,238,1) 84%); /* Chrome10+,Safari5.1+ */
-background: -o-linear-gradient(top,  rgba(255,255,255,1) 3%,rgba(229,235,238,1) 84%); /* Opera 11.10+ */
-background: -ms-linear-gradient(top,  rgba(255,255,255,1) 3%,rgba(229,235,238,1) 84%); /* IE10+ */
-background: linear-gradient(to bottom,  rgba(255,255,255,1) 3%,rgba(229,235,238,1) 84%); /* W3C */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5ebee',GradientType=0 ); /* IE6-9 */
+  background: -moz-linear-gradient(top,  rgba(255,255,255,1) 3%, rgba(229,235,238,1) 84%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgba(255,255,255,1)), color-stop(84%,rgba(229,235,238,1))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 3%,rgba(229,235,238,1) 84%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  rgba(255,255,255,1) 3%,rgba(229,235,238,1) 84%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  rgba(255,255,255,1) 3%,rgba(229,235,238,1) 84%); /* IE10+ */
+  background: linear-gradient(to bottom,  rgba(255,255,255,1) 3%,rgba(229,235,238,1) 84%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5ebee',GradientType=0 ); /* IE6-9 */
 
 }
 

server/routes/routes.js

@@ -16,7 +16,7 @@ exports.files = function(req, res){
 };
 
 exports.main = function(req, res){
-  var readStream = fs.createReadStream(path.join(__dirname, '../../client/dist/livemuni.min.js')).pipe(res);
+  var readStream = fs.createReadStream(path.join(__dirname, '../../client/dist/livemuni.js')).pipe(res);
 };
 
 exports.style = function(req, res){