Displaying a map on a website isn’t a new capability. When you search for someone using Spokeo, we include a map with the search results showing geographic locations. Many web-based maps on other sites are using a dynamic Google Maps API that runs a large amount of Javascript in the browser. This means that the map you see is live and fully accessible for use. Running this type of map adds the risk of heavily increasing the load time of the site. With fifteen million visits to Spokeo each month and many location pins to display, long page load times became a user problem that needed to be solved.
Reed, a Spokeo engineer, set out to improve the load time of the map feature by finding a way to “lazily” load in the Javascript API by allowing the map to first display as a still image, which instantly becomes an interactive map once the user moves their mouse towards it. Reed used this tactic to decrease page load time to a mere 1.5 seconds from 5.5 seconds. According to Nielsen Norman Group, users will only stay on your page for an average of 10 seconds unless you engage them within that timeframe to stay longer. If users have to wait for pages to load, they may become frustrated and bounce. Therefore, decreasing load time helps Spokeo provide users with a better site experience and potentially provides the company with operational cost savings.
Google Maps provides the option of using an image API called StaticMap, which is essentially a still picture of coordinates displayed on a map. Using an image instead of a fully functional and interactive map decreases the load time of the page. The user first sees a map snapshot with the locations of their search results. What if the user wants to interact with the map?
Who's Calling Me?
Search any phone number to learn more about the owner!
While we called it the “LazyMap” project, it was definitely not a lazy process. Reed had to figure out how to phase the static map out of the dynamic app without any noticeable change or delays. In order to achieve this, he needed the coordinates on the static map to line up exactly and match the markers on the dynamic map after the page loads and without the user losing their place. One would think that the pins transfer from the picture map to the interactive map since this is how the page displays to the user. Surprisingly, it is the exact opposite. Instead of figuring out the pin placement from image to interactive, Reed needed to place the dynamic pin onto the static image, which is due to the fact that the Static API does not natively offer the clustering functionality that enables the user to see markers on a map. In order to replicate the JavaScript Map location functionally, Reed needed to figure out where the clusters should display in the static map, how many pins they contained, and then place those cluster icons back onto the StaticMap API so the dynamic and static maps look identical to the user. This proved to be a challenging reverse engineering effort.
Reed spent nearly a week and a half coding the coordinate clusters by writing a new algorithm that allowed the static images to mimic the dynamic functionality. It required a lot of math to figure out how to space those clusters onto the static map, which is actually a two-dimensional plane vs. the 3D dynamic plane used for globe calculations. After five tries and a few failures, he succeeded.
When you search on Spokeo for a phone number or a name, be sure to check out the map in the top left corner. Note how quickly it shows where your results are located – all thanks to Reed.