Geeking out with a barefoot poet - Edition 1 - Building a Responsive, Animated Map for Location/Contact Page with CSS and jQuery

I'm starting a little mini-series to sort of geek out over what I do for a living...front-end development.

That being said, I can't take credit for the actual design behind most of what I develop.  I work with extremely talented designers and they provide me comps, tell me how they want or imagine it animating, etc, and I develop it collaboratively with them.

In this first series I'll share what I did to create a location/contact page for a client who we wanted to really delight with the designer's concept...a contact page that represented the client's global presence using a world map with blinking dots, that displayed a small tip with the location image and address on hover, and provided a modal (lightbox) on click.

Annnnd, make it mobile responsive.  Many people develop for mobile first.  I do sometimes.  I'm pretty diverse in my approach depending on the specific needs and goals of the client, including their target audience.

So in this case it was designed desktop first, but easily mobile accessible, while maintaining the delight of the map.  In other words, we didn't want to just display a list of locations on mobile, we wanted to make it just as nice and cool on both.

Annnnd, Annnnnd, also provide a nice list of the locations that the visitor can toggle to from the map view if they'd rather.

Now what I wanted to do is not just have the modal fade in, or slide in, or whatever...I wanted it to zoom in from the actual blinking location dot the visitor was clicking on, so they knew they got the right one...but also because it's just way nicer and cooler to do so.

And then I wanted it to zoom back into that same dot when the visitor exits the modal view.

To make the map usable on mobile, the designer and I realized we needed to have zoom functionality on the actual map, separate from the page...

What I ended up developing out was zoom buttons on mobile and the ability to slide the map around independently from any other page element.

What can see the jsfiddle of part of this creation...the remaining code I did on the live site, so you'll see it there in the next link.

Here's the jsfiddle

Again, that's the jsfiddle and I didn't complete the code or buildout there, so div content on the tooltips is hidden on some, etc...see the live site for the finished product, but I wanted to give you an easier eye into the code behind it through the jsfiddle.

Particularly how the blinking dots are achieved and positioned, and how they fire off.

Now, for the finished product:

http://www.koretelematics.com/contact-us

The flashing dots are achieved using a CSS animation combining transform scale of a div behind a div, and opacity levels...giving it a nice "pulsate" feel.

The "randomness" to their pulsing isn't random at all, but a simple jQuery setTimeout function adding the "pulse" class that fires the animation, at different times on document load.

I could go into further details on how this all is accomplished, but I mostly want to use these posts to share something, share the code, and then have it open for discussion or just inspiration to others out there who are coding something and looking for new ideas or how to solve some weird little specific thing they are trying to achieve.

Hope you like this new little series and get something valuable from it!  

Let me know your thoughts!

Next Edition I'll be sharing how to create a transparent circle that draws in itself on hover, and fades out on mouseleave.  If you know jQuery you already know it's involved ;) but surprisingly not much at all!

If you want to read more of my posts, mostly I do poetry, feel free to follow me @abarefootpoet

Thanks for reading.

~ J Oliver Westbrook