How to draw custom topojson maps for d3.js in 3 steps

The problem

Solution

Step 1: Draw your map using polygons in google.com/mymaps.

Step 2: Export the layer in KML format

  • Select the layer which you want to export
  • Click on layer settings -> Export data -> KML/KMZ -> KML
Figure 1: Exporting map data from Google’s mymaps

Step 3: use mapshaper to correct borders & convert to TopoJSON

  1. Correct overlaps with borders: Open the console (i.e. click top-right button with the same name)
  2. Go to console on the left pane & type
mapshaper -clean
Figure 2: Fixing geometry issues in mapshaper
Figure 3: Exporting map data as TopoJSON file

--

--

Get the Medium app

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