Map of the Week: abbyputinski.com - Google Maps with a twist
By Monica Tran, Google Maps
team
Cross-posted with the Google
Geo Developers Blog
We love the teamwork behind AbbyPutinski.com, designed by San Francisco illustrator
Abby Putinski, and developed by her husband Adam. In this guest blog post, Adam will walk us
through how he worked with Abby to give the map a unique, illustrated look, as well as
fun-to-use animations.
Abby is a designer and illustrator living in San Francisco. In building her site, Abby wanted
to take users on a journey to discover and explore some of her favorite places in San
Francisco, in a way that reflected her illustration style. Taking Abby's design direction into
account, I began building the site, working with the Google Maps API to make the visual
experience come to life for visitors of the site. The app is powered by Ember.js, so the
application template includes a helper to render a MapView.
Custom
Overlays are used to take users on a journey around San Francisco.
Designing in Reverse
To make the map feel like an illustration, Abby used the
Styled
Maps Wizard to play with colors of the map. By using very few colors and disabling
most of the roads and landmarks, she was able to give the map a flat, simple look. After
exporting the JSON from the Styled Maps Wizard, Abby worked with screenshots of the map to
design the rest of the experience.
Some of Abby's favorite landmarks in San Francisco
The animated GIF in situ on the map as a custom overlay.
Defining a custom
overlay
To create a fullscreen overlay, the bounds are set to the Southwest and Northeast corners.
Positioning the overlay on the map
The MapView has two child views. The DOM element for a custom overlay actually needs to reside
inside the markup generated by Google Maps, but the overlay is an Ember.View so the
MapOverlayView is actually rendered as a sibling of the MapCanvas and then moved into the
correct spot later.
Keep the overlay centered while panning
The default behavior for a custom overlay is to re-calculate the styles when the map is
panned, but to build an overlay that stays centered on the map, the overlay should only be
drawn once and then pan with the map.
Creating the overlay
Finally, once the overlay has been created and rendered, resolve a promise letting the
application know the map is ready.
Final Thoughts
This project was extremely fun and was successful due to the collaboration between design and
development. The Google Maps API gave us the creative freedom to completely customize the map,
while Custom Overlays really pulled the experience together.
Adam and Abby Putinski are a husband and wife design/dev team located in San
Francisco. Learn more about their work at abbyputinski.com
Posted by Ashleigh Rentz, Editor
Emerita
By Monica Tran, Google Maps
team
