Draw and Edit with GeoJson.io

GeoJson.io is a popular open-source web tool to convert, edit, and create GeoJSON files. The tool was originally developed by Tom MacWright in 2013 and quickly became a go-to tool for geospatial practitioners.

In this tutorial, we will show you how to convert existing KML, GPX, TopoJSON, and even CSV files with lat/lon data into GeoJSON files. We will also look at editing attribute data and adding new features to GeoJSON files, and creating them from scratch by tracing satellite imagery.

Convert KML, GPX, and other formats into GeoJSON

Navigate to GeoJson.io. You will see a map on the left, and a Table/JSON attribute view area on the right. At the start, it represents an empty feature collection. Remember that features are your points, polylines, and polygons.

Drag and drop your geospatial data file into the map area on the left. Alternatively, you can also import a file from Open > File menu. If you don’t have a geospatial file, download Hartford parks in KML format. If GeoJson.io was able to recognize and import the file, you will see a green popup message in the upper-left corner saying how many features (in case of Hartford parks, only polygons) were imported. Figure 14.6 shows us that 62 features were imported from the sample Hartford parks file. You can see that the polygons appeared on top of the Mapbox world layer.

Note: If GeoJson.io couldn’t import your file, you will see a red popup saying it “Could not detect file type”. You will need to use a different tool, such as Mapshaper or QGIS, to convert your file to GeoJSON.

GeoJson.io successfully imported Hartford parks KML file.

Figure 14.6: GeoJson.io successfully imported Hartford parks KML file.

You can now save your file to GeoJSON. Go to Save > GeoJSON to download a converted GeoJSON file to your computer.

Create GeoJSON from a CSV file

GeoJson.io can transform a spreadsheet with latitude (or lat) and longitude (or lon) columns into a GeoJSON file of point features. Each row in the spreadsheet becomes its own point, and all columns other than lat and lon become attributes (or properties) of point features. An example of such spreadsheet is shown in Figure 14.7. You can download it for the exercise.

A spreadsheet with lat/lon columns can be transformed into a GeoJSON with point features.

Figure 14.7: A spreadsheet with lat/lon columns can be transformed into a GeoJSON with point features.

  1. Save your spreadsheet as a CSV file, and drag-and-drop it to the map area of GeoJson.io. You should see a green popup in the upper-left corner notifying you how many features were imported.

Note: If you had some data on the map already, GeoJson.io wouldn’t erase anything but instead would add point features to the existing map.

  1. Click on a marker to see a popup with point properties. If you used the sample file with towns around Hartford, you will see town, community_type, and wiki_link features in addition to the tool’s default marker-color, marker-size, and marker-symbol fields.

Tip: The popup is interactive, and you can click and edit each property (including property names). You can also add a new property by clicking the Add row button. You can delete the marker by clicking Delete feature button.

  1. Click Save to record all marker changes to the GeoJSON. This will close the popup window, and you will see updated markers in the JSON tab to the right of the map.
  2. It may be quicker to view all data as a table instead of dealing with individual marker popups. In the Table tab to the right of the map, you can add, rename, and remove columns from all features (markers) at once. Table cells are also modifiable, so you can edit your data there.
  3. Once you are happy with your map data, go to Save > GeoJSON to download the result to your computer. You can also log into GeoJson.io with your GitHub account and save directly to your repository.

Figure 14.8: A spreadsheet with coordinates columns can be transformed into a GeoJSON with point features.

Create a GeoJSON from scratch using drawing tools

GeoJson.io lets you create geospatial files from scratch, using simple drawing tools to put markers (points), lines, and polygons to appropriate locations. These are useful when you have no original file to work with. The following steps will show you how to create a new GeoJSON file and add markers, lines, and polygons to it.

  1. Open GeoJson.io and in the lower-left corner switch from Mapbox (vector tiles) to Satellite.
  2. In the upper-right corner of the map, use the Search tool to find the area you’re interested in mapping. For this exercise, we will use tennis courts at Trinity College, Hartford, as shown in Figure 14.9.
Use drawing tools to create points, lines, and polygons in GeoJson.io.

Figure 14.9: Use drawing tools to create points, lines, and polygons in GeoJson.io.

  1. In the toolbar, you have a choice of four drawing tools: a polyline (which is a series of points connected by lines, but not closed like a polygon), a polygon, a rectangle (which is just an instance of a polygon), and a marker (point). Let’s start by creating a marker.
  2. Click on the Draw a marker button, and click anywhere on the map to place it. You will see a gray marker that is now part of your map. You can modify its properties, or delete it in the interactive pop-up.
  3. Next, choose Draw a polyline and click on multiple locations in the map to see connected lines appearing. To finish and create a feature, click again on the final point. Polylines are generally used for roads and paths.
  4. Drawing a polygon is similar to drawing a polyline, except that you need to complete the feature by making your final point at the same location as your initial point. Polygons are used to define object boundaries, from continents to buildings, cars, and anything that has significant dimensions.
  5. Use Edit layers tool (the one above Delete) to move a marker to a better position, or adjust the shapes of your features.

Once you are done creating features and their physical boundaries, it is time to add meaningful attribution data. Use the interactive popups or the Table view to give objects names and other qualities. When finished, save the GeoJSON to your computer.

Drawing tools can be used to correct your existing GeoJSON files. For example, if you created a GeoJSON from a CSV file, you might decide to move some markers with Edit layers tool instead of modifying their latitude and longitude values. Or you might decide that your polygons (eg those representing Hartford parks) are too “simplified”, and make them more precise with the satellite imagery.

In the next section, we will introduce Mapshaper, another free online tool to convert and modify geospatial files.