How to create a hover intent function with Google Maps

Last week I wanted to fire a piece of code (div scrolling) when the user's mouse was hovering over a Google maps polygon. I got that working pretty easily with a simple Google Maps listener with the 'mouseover' event. Unfortunately, that created a different problem - if the user moved the mouse quickly over the map and crossed over many polygons, the div scrolling code I had within the listener was fired too much.

I ended up finding a jQuery plugin, hoverintent,  that only makes the call when the user's mouse is hovering over the element for a specific amount of time. This would have certainly done the trick on a DOM element but it wasn't going to work on my map when the polygon wasn't a DOM element, it was an overlay on the Google maps object. An even easier solution (no plugin required) emerged.

Javascript has a setTimeout() method that you can use to execute code in the future. So, in  my case, I set a variable, timer, to the setTimeout() method and the code I wanted called; I checked for timer when the user had the mouse over an element, if the timer existed, I set it to null and used the clearTimeout method and then reset timer to the a new SetTimeout. I added another Google Maps listener for the event 'mouseout' of the polygon and set timer to null while using the clearTimeout(). In this way, the div scrolling only happened when the timer reached a certain time, in other words, when the user's mouse was hovering over a polygon for  a certain amount of time.

google.maps.event.addListener(polygon, 'mouseover', function(event) {

            if (timer) {
              clearTimeout(timer);
              timer = null;
            }
//set timer so animation of scrollbar only happens when mouse is within polygon for longer than 500 milliseconds
        timer = setTimeout(function() {
            $('#side_content').animate({ top: -$('#div').top }, 300);
        }, 500);
});

google.maps.event.addListener(polygon, 'mouseout', function(event) {
          if (timer) {
            clearTimeout(timer);
            timer = null;
          }
});

Valley to Detroit

Detroit luring Silicon Valley professionals. What?!

The leaders behind the Detroit movement released this website on Monday, luring recently laid off Yahoo employees to Detroit where there are currently hundreds of technology jobs.

"Detroit is quickly emerging as one of the nation's best kept secrets when it comes to technology, Internet and mobile-related jobs," said Josh Linkner, CEO and Managing Partner of Detroit Venture Partners, a Detroit-based high-tech venture capital fund.  "We know that there is a great deal of talent inside of Yahoo – especially in marketing and web development, and we're encouraging those who have been impacted by job cuts to consider Detroit as the next stop in their career."

But it's not only about the jobs. As Bill Emerson correctly points out, taking a job in Detroit means seizing a unique opportunity that exists no where else in the country. The opportunity to play a pivotal part in reinventing an entire city.

"We are creating an exciting urban core for young, energetic and creative professionals who want to affect the outcome of an entire region," said Bill Emerson, CEO of Quicken Loans, who has consistently ranked in the top-10 of Computerworld's 'Best Places to Work in Technology' over the past decade.  "Not only does Detroit make for a great place to start or grow a business, but it's also a great option for those who want to be on the ground-floor of rebuilding and reinventing a great American city."

The Detroit conversation is changing from one of death to that of rebirth. Speramus Meliora; Resurget Cineribus (we hope for better things; it shall rise from the ashes)

http://techcrunch.com/2012/04/09/valley-to-detroit-motor-city-woos-laid-off-yahoo-employees/

Changing redirect after Devise signin

We use Devise to manage user sign authorization and authentication. This solution offers a lot of stuff for free, such as password resets and account confirmations, but it's also a little hard to navigate at first since most of the functionality seems hidden from view. Read up a little bit though and you'll find just about every customization you desire is written about on the Devise wiki, with instructions on implementation.

Yesterday, I customized the redirect after a user signs in. Initially, devise is set up to redirect to the root_url after sign in, but it's easy enough to override it by adding a after_sign_in_path_for(resource) method in the application controller. Because our signin "page" is actually a small menu that sits on every page, I wanted the user to stay on the current page after signin rather than be redirected to a specific page. For example, if a user is using our map and decides to sign in, I want that user to stay on the map after signin, not be redirected to a different page. Seems easy enough, and although it took me a little while to figure out a solution, the implementation for this functionality isn't all that hard.

The key for me was learning about Rails' request.fullpath, which will return path the user is on. (There is also request.uri, request.url, request.path, request.host and a few others). So, on my sign in form, I added a variable that I set to the fullpath returned from request.fullpath, and passed that variable to the user sign in path as a params. With that, I have the current page the user is on and can redirect them there after successful sign in.

<% current_path = request.fullpath %>
 <%= form_for("user", :url => user_session_path(:current_page => current_url), :html => { :id => "signin_form" }) do |f| %>


application_controller

def after_sign_in_path_for(resource)
 params[:current_page] || super
end

Code Academy Interview

Check out a short profile of me on Code Academy's blog. Code Academy continues to grow and thrive, just completing their second class last week and pulling off a demo day with 500+ in attendance. Congratulations to the newest graduates and to the Code Academy program.

Learning Javascript

Though we're using Rails as our framework, Picket Report's code base is only 45% Ruby and 55% Javascript. I didn't have much experience with Javascript until the past month or so, and though the syntax is a little cumbersome at first, I've started to enjoy using the language, particularly creating and handling Javascript objects.

Most APIs that I've dealt with so far respond with JSON objects, but it wasn't until the last two or three weeks that I got more comfortable understanding how get to what I wanted within a response. Part of it was learning how to use console.debug() and thus being able to actually see the object and how it was structured, but most of my improvement can be chalked up to learning some basic Javascript - looping, if/then statements, creating objects for later use, etc.

A basic example from this past week. I created a marker ID object that kept track of each google maps marker on my map as well as a string of html content I wanted to appear in a map popup/infowindow when the user clicked on a marker. I organized the object by marker ID so that I could easily find that marker at a later point. I couldn't have done this a couple of weeks ago, and when it came together it was a nice reminder of how much I've learned and a big aha moment that seemed to open up a sense of possibility...


 markerIDObject[marker.__gm_id] = {};
 markerIDObject[marker.__gm_id].marker = marker;
 markerIDObject[marker.__gm_id].content = contentString;


 this.neighborhoodShowInfoWindowBounce = function(marker_id) {
    showInfoWindow(markerIDObject[marker_id].marker, markerIDObject[marker_id].content);
    markerBounce(markerIDObject[marker_id].marker);
  }