Web development / design — data handling

This page provides data handling methods and tools for web dev.

( I created some of the tutorials for Geog461w — Fall 2017, and some are from our students:))

(Click here to go back to the main page for web development related concepts and techniques. Click here for popular JavaScript libraries supporting interactive maps. Click here for how to create a website with WordPress (Sites at Penn State)) 

  • The simplest way to convert a regular JSON file (with lat/lon properties of course:)) to GeoJSON file 

Step 1: Convert JSON file to CSV

use the following web tool to help you convert a JSON file to CSV.

https://sqlify.io/convert/json/to/csv 

In the demonstration below, I use the json file available at the following page.

https://gist.github.com/tdreyno/4278655  

to get the direct link to the json file (see the picture below)

 

Step 2: convert CSVto GeoJSON

http://geojson.io

Use Open/file to open the csv file, then you should see the points (or whatever your data are) plotted on the map.

Then you can save the uploaded CSV to GeoJSON by hitting Save/GeoJSON

The default saved geojson file name is map.geojson, but you can rename it as whatever name you like (e.g., airports.geojson) after the download complete.

Note: you can convert your csv file to TopoJSON and Shapefile etc see the picture above for other export options.

(the following is taken from Ben’s micro-tutorial presentation slides.)

(Watch the video tutorial below about GeoJSON, if you are not familiar with it, before we go to the different tools to convert other formats to GeoJSON.)

What is GeoJSON and why should you care about it? (YouTube video published on May 9, 2017 by Mike Miller; duration: 14:54mins)

  • geojson.io — create, edit, convert to/from GeoJSON files.

It is a browser-based tool for editing GeoJSON files. geojson.io allows users to easily edit and create geographic data in the browser.

Two methods are explained to get GeoJSON data:

1. Export a shapefile to GeoJSON easily through QGIS

2. Create sample GeoJSON data using geojson.io