Web-Based GeoJSON Visualization & GeoProcessing

There are three ways to load geojson data:

1. Paste geojson directly into the geojson text box and click Render
2. Use the src= URL variable to point to a valid geojson source file.
   http://townsendjennings.com/geo/?src=https://raw.githubusercontent.com/johan/world.geo.json/master/countries/ESP.geo.json
3. Use the geojson= URL variable to pass geojson in directly.
   http://townsendjennings.com/geo/?geojson={"type":"Point","coordinates":[3.1977,46.6841]}

If no sources are specified, the page will automatically generate two datasets: random points and random polygons. You can toggle between the two with Previous and Next

Render will attempt to parse the text in the input box and if it is valid geojson, it will render it on the map.

Fit Bounds will move the map to the bounds of the currently rendered objects.

Previous and Next will cycle through the history of successfully rendered geojson objects. Each time a new geojson object is created, the previous geojson is stored in history.

Quadkey

Clicking Get Quadkey will populate the quadkey input box with the quadkey for the smallest tile that can fit the currenty rendered geojson (with max zoom 15). Render Quadkey renders a GeoJSON polygon representation of the quadkey value currently in the text box.

turf.js Operations

A few turf.js operations can be selected from the drop down menu. If applicable to the selected operation, the amount and units can be adjusted. Run then performs the selected operation on the currently rendered geojson, updating the map with the results. To undo the operation, click Previous.

Built with these frameworks and tools:

mapbox-gl-js: The map, all map styles, and the rendering of the geojson is all handled by the mapbox-gl-js javascript library.

turf-js: GeoProcessing in the browser! The site currently implements just a fraction of the turf functions. With inspiration (and credit to) the former turfjs.party site.

tilebelt: A small and very powerful set of helper functions for working with tiles, bounding boxes, and quadkeys.

assembly.css: This site uses the assembly css library for the icons and styles.

react-js & webpack: I used this tutorial to get started (this was a first time react.js project). Also, the react-select library powers the turf operations and map style lists.