Map Maker and Editor with D3.js

After building a bunch of D3 map demos, I wanted to combine them all into a Map building tool, a Map Creator based on GeoJSON or TopoJSON with many design features, editing capabilities, and proper export to SVG or PNG. It started out as an enhancement to this GeoJSON and TopoJSON Visualizer and D3 Map Starter Template. I wanted to finally use dat.GUI as a visual controller for map creation. I added some preselected maps of the world, individual countries, and even states as well as the ability to add your own map data. You can change the map projection, resize the map container, and control various design elements from colors, opacity, stroke, and even textures via Textures.js.

You also have some powerful editing capabilities: ability to remove individual objects from the map and ability to merge objects together. The best thing is that you can edit the shape of any object by clicking on it and and zooming in. This exposes small green circles on object borders that can be dragged around and the drag event changes the object shape by automatically editing the SVG path data. My previous examples on working with SVG graphics helped in adding this feature. The final image can be saved as SVG or PNG using code from the Save SVG as PNG article. Finally, I integrated SimpleModal which has a textarea where you can add points (latitude, longitude, and location name) that get added as markers on the map.

Here is the D3 Map Maker

Here are some things you can do with this Map Playground:

Stop using Mercator Projection and Explore other map projections

Design your map with specific textures in certain countries and zoomed in perspective

Customize the map with different colors and styles

Remove some countries and merge or group a few countries

Edit country shape (object path data) by dragging circles around country borders

I think the last part is really awesome because editing SVG path data manually is crazy and having a drag and drop visual interface to editing is awesome. Apart from refactoring all the code, I think this project could be expanded to support more features in the future:

• More options for different textures and patterns
• Removing circles when editing a shape
• Shapefile support for import
• Shape Simplification
• Export changes to GeoJSON, TopoJSON, or even Shapefile
• Allow using images as clipped backgrounds to map objects
• Orthographic projections

Check it out: Map Playground built with D3.js

External:

GeoJSON.io
MapShaper
Distillery
svg-edit
Explore Countries in D3
map background as image tiles
Pattern Fills
Gray Earth
DataMaps
D3 Source WalkThrough
Slippy Map, Indicator Globe with D3 and Stamen Tiles
SVG Maps from AmMaps
Maps from HighCharts
D3 TopoJSON Template