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:
SVG: useful if you want a starting template to further customize as a flat graphic (e.g. in Adobe Illustrator).
Image: useful if you want an instant flat image of your map.
Code: useful if you're a web developer or have access to one, and you want to put this up on the web in an interactive form. You'll get a basic working page with the JavaScript to generate your map, which you can then go trick out with extra cleverness.
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
Save a map to work on it later
Option to add data file to a communal library
Responsive scaling option for code download
Built-in image fallbacks for code download
Pull in data from a Google spreadsheet with Tabletop.js
Feature simplification
Merge features
Add a legend to a choropleth
Categorical choropleths
Support files with multiple geometry layers
Auto-delete weird features (i.e. tiny islands)
Split a feature into its constituent parts and edit in detail
If you want to make a few basic edits to your underlying data, geojson.io is pretty handy. If you want to do more in-depth editing, you'll need desktop software. The fancy and very expensive option is ArcGIS; I recommend QGIS, which is free, probably does everything you need, and is more beginner-friendly than you might think.
To convert a shapefile to GeoJSON, you can use ADC's online converter.
If you want to simplify the geometry of your data file, Matthew Bloch's Mapshaper is fantastic.
If you're a coder or code-curious and have some JavaScript under your belt, Mike Bostock has a great detailed walkthrough that introduces you to many of the fundamentals of mapping with D3. You can also consult the bountiful list of examples. I'd probably start with this one.
If you want to make a slippy, Google Maps-style tile map, I highly recommend Leaflet. It's delightful. Another option is Modest Maps.
If you're in the choropleth business, the folks at MinnPost have a great utility for that called Tulip with much finer controls than this offers.
If you're a developer, Kartograph.js is a neat JavaScript library for building SVG maps that also includes support for IE7 and IE8.
If you want to build stuff out of geodata and you don't mind paying for the privilege and giving up some control over the details, CartoDB offers a lot of features (Disclaimer: I've never used it).
For detailed geodata about the entire world, OpenStreetMap is without equal, and has a vibrant ecosystem of lots of tools and services to help you extract specific data you want. And it's free!
For semi-canonical shapefiles of countries of the world, states, provinces, coastlines, or other high-level features, try Natural Earth Data. To get it as TopoJSON, try Mike Bostock's World Atlas tool.
For US-specific geodata, you can try the US Census Bureau, but you'll probably end up in tears. This TopoJSON file from Mike Bostock includes US counties and states and may be a shortcut.
Some news organizations offer boundary services that provide geodata exports for things like congressional districts, city council districts, and ZIP codes. The Los Angeles Times, Chicago Tribune, and MinnPost all have great ones.
In the UK, the Ordnance Survey offers some data for download and accepts custom shapefile requests if you're not in a hurry.
For miscellaneous geodata, you can try GeoCommons.
This section includes options for coloring your map. If you have numerical attributes, like population or literacy rate, stored as attributes, you can make a chloropleth map scaled to that attribute.
Borders
Colors
Color Scale
Options for how users can zoom/pan around your map, and whether a tooltip will appear when they mouseover a feature. Use the map below to test your changes.
This doesn't affect the SVG or PNG option on the download page, only the Code option.
Zoom
Tooltip
This table contains attributes about your map that were stored in the file you uploaded. Hover over a row in the table to highlight it on the map.
You can click "Remove" to remove a feature (if you remove something by mistake, just click "Restore" to add it back), and use the column headers to sort the table.
To edit data for a feature, just click on the cell you want to edit.
The features in this file have no attributes.
If you're using a shapefile, make sure you submit the .shp file AND the .dbf file on the "Choose File..." page. You can do this by selecting both files, or by selecting a .zip file that contains both.
If you only submit a .shp file, you can still draw the map, but none of the attributes will be included.
The code below will generate a basic version of your map in a browser. Make sure you also download the data file and save it in the same folder, or else the code won't work.
Download this code:
Download your data:
How do I upload a shapefile?
An ESRI shapefile is actually usually a set of files with different extensions, like .shp, .dbf, or .shx. To upload a shapefile, you have three options:
Just upload the .shp file. You'll get a map, but it won't include any attributes stored in your shapefile, like feature names or statistics you might want to use in your map. For example, a map of the world might have the name of each country and its population stored as attributes.
Upload both the .shp and .dbf file. If you drag both files into the upload box, or select both from the dialog, you'll get a map that includes any attributes too.
Upload a .zip file. A .zip file with a .shp file, or a .shp and a .dbf file, will be treated the same as if you uploaded the files directly. It can have other files in there too, but they'll be ignored.
What are GeoJSON and TopoJSON?
GeoJSON and TopoJSON are two web-friendly file formats for geographic data. A GeoJSON file is a text file with a list of features and, for each one, a bunch of latitudes and longitudes describing its geometry. A TopoJSON file is similar, but instead of storing the latitudes and longitudes directly, it describes the topology of a group of features, meaning the borders between them. TopoJSON files are usually much smaller, but require a little bit of extra processing in the browser when you want to display one on a map, and can potentially lose details from the original latitudes/longitudes. Shapefiles don't play nicely with the web, so if you upload a shapefile, it gets converted to GeoJSON.
What are map projections?
Map projections are different systems for displaying part of the round Earth as a flat image. Each projection has advantages and disadvantages. Some distort how big things are relative to each other. Some distort where things are relative to each other or the angles between them. One thing to consider is that when making a choropleth map, so a conic equal area projection or something else that preserves relative areas is good. For more on map projections, see the National Atlas summary.
How does the code download work?
The code download gives you two files: one is a data file with your map data in a web-friendly format. The other is a basic template page that will display the map with the options you've selected. If you have them in the same folder and open them via a web server (either remotely or on your computer), you'll get an interactive map. You can modify this template to add all kinds of bells and whistles!
Where is my data being uploaded?
If you use GeoJSON or TopoJSON, it's not going anywhere, it's staying entirely in your browser. But if you select a shapefile, or you want to convert a GeoJSON file to TopoJSON, it will be sent to a converter currently living on my server. Any files getting converted are deleted immediately after conversion, although in the future I'll add an option for you to contribute the file to a commons for geographic data.