d3.js and Google Maps API in 11 easy steps

Bryony Miles
Mar 16, 2017 · 3 min read
Image for post
Image for post

A recent challenge was to link data with longitude and latitude coordinates which I’d used when developing a training compliance dashboard. Here’s the final visualisation.

I’d worked with static Google Maps before but the client wanted to use live maps which responded to the content. Here’s how I did it in 10 easy steps with a huge amount of help from Mike Bostock’s starter code.

  1. Step one — prepare your data. my_data is a list that contains longitude, latitude and any further variables you might need. You can reset the data and call the code again and the map will redraw within the appropriate boundaries.
  2. Step two — declare the bounds.
Image for post
Image for post

3. Step three — extend the bound for each row in the data.

Image for post
Image for post

4. Step four — select the <div> or <td> where you want to place the map.

Image for post
Image for post

5. Step 5 — create the map and fit the bounds

Image for post
Image for post

6. Step 6 — declare an Overlay, an onAdd function and the append the layer.

7. Step 7 — within the onAdd Function, declare a draw function, set the Projection and then draw each marker appending the data.

Image for post
Image for post

8. Step 8— transform (see above) is a function to position each SVG

Image for post
Image for post

9. Step 9 — now draw the circles. You can add tooltip functionality if you want.

Image for post
Image for post

10. Step 10 — bind the overlay to the map.

Image for post
Image for post

11. Step 11 — finally, you need to set the CSS of the individual layers.

.layer, .layer svg {position: absolute;}

.layer svg {
width: 60px;
height: 60px;
padding-right: 100px;
font: 10px sans-serif;
}

You can also set style attributes for .layer circle, either in CSS or in your D3.js code.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!

Image for post
Image for post

HackerNoon.com

#BlackLivesMatter

Sign up for Get Better Tech Emails via HackerNoon.com

By HackerNoon.com

how hackers start their afternoons. the real shit is on hackernoon.com. Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Bryony Miles

Written by

HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean

Bryony Miles

Written by

HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store