Mapstarter is a tool for turning a geographic data file into a map for the web.

This is a work in progress. Got ideas? Requests? Complaints? Data files that didn't work? Let me know.

How does it work?

Select a GeoJSON file, TopoJSON file, or ESRI Shapefile. It will import your data and give you a starting interactive map, automatically scaled to fit your data. You can change the dimensions, map projection, color scheme, and add basic behaviors like zoom and tooltips. You can also inspect the data stored in your file in the "Data" tab.

Once you've got something you like, you can export it in one of three formats:

The assumption is that most webmaps have a lot in common, and even if you want to add bells and whistles, the first 20% of the project is the same. This aims to speed that up.

Who is this for?

Designers who want to get a headstart on a custom map they're going to work on in graphics software.

Reporters who want to get a quick idea of what's actually in a data file and how an interactive web map approach would look.

Web developers who want to get a sensible starting template without a copy/paste scavenger hunt or a dozen syntax errors.

Who is this NOT for?

People who want to edit their data a lot. This lets you edit the attribute table, but if you want to do bulk, spreadsheet-style editing, you're going to have a bad time. See Other tools and resources below for some tools for this.

People who want to make Google Maps-style tile maps that you can slip and slide around. This is meant for more focused maps that ignore the world at large. Think election maps. See Other tools and resources below for some tools for tile maps.

People who want to make complex, multilayered, or heavily stylized maps. This may still provide a useful starting point for that, but it's not going to get you very far.

Mike Bostock.

Some details/caveats

A shapefile is typically composed of several actual files. To import one, you need to import the .shp file, the .prj file, and the .shx file. Assuming you want to include the attributes (like country names) as part of the map, you'll also need to import the .dbf file. To import these files, you can either select them all (or drag them all onto the target), or you can submit a .zip file that includes all of them. If you accidentally include unnecessary files, that's fine, they'll just get ignored.

This will currently only support a single layer of geometries. If, for example, you have a TopoJSON file with census tracts, counties, and states, all stored separately, it will only draw one of them. I hope to fix this (see To do list).

If you download the code for your map, it will rely on D3 for most of the heavy lifting. D3 is not compatible with IE8 and below, so if you need to serve old browsers, make sure you include an image fallback of some sort.

If you already have GeoJSON/TopoJSON, you can run this without an internet connection. The only pieces that require an internet connection are importing a shapefile and converting from GeoJSON to TopoJSON. If you want to run it locally, you can clone the GitHub repository and open index.html.

This will only work on modern browsers, and I wouldn't recommend using it on your smartphone.

To do list

Get in touch

The source is on Github: https://github.com/veltman/mapstarter

You can email me at noah@noahveltman.com, or if you can keep it short, I'm @veltman on Twitter.

Appendix: other tools and resources