paint-brush
d3.js and Google Maps API in 11 easy stepsby@bryony_17728
8,136 reads
8,136 reads

d3.js and Google Maps API in 11 easy steps

by Bryony MilesMarch 16th, 2017
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

A recent challenge was to link data with longitude and latitude coordinates which I’d used when developing a <a href="https://hackernoon.com/tagged/training" target="_blank">training</a> compliance dashboard. Here’s the <a href="http://www.bmdata.co.uk/effective/index_map.html" target="_blank">final visualisation</a>.

People Mentioned

Mention Thumbnail

Company Mentioned

Mention Thumbnail
featured image - d3.js and Google Maps API in 11 easy steps
Bryony Miles HackerNoon profile picture

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.

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

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

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

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.

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

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

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

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.