Intro to Turf.js

Presentation by James Seppi

Software Developer at TNRIS, part of TWDB

Twitter: hydrologee

Viewable at jseppi.github.io/intro-to-turf/

Source code at github.com/jseppi/intro-to-turf/

What is Turf.js?

JavaScript library for geospatial analysis

Runs in the browser, or in Node.js

Open Source, MIT-licensed

Collection of small modules

turfjs.org

github.com/turfjs

Some History

(from Tom MacWright - macwright.org/presentations/turf-geodc)

2000: Java Topology Suite (JTS)

2003: GEOS, JTS port to C++

2008: Shapely, interface of GEOS to Python

2011: JavaScript Topology Suite (JSTS), JTS port to JS

2014: Turf

About Turf.js

Not a port, new implementations

Project started and managed by Morgan Herlocker (now at Mapbox)

1280+ stars, 15 owners

Modules

Aggregation, Measurement, Transformation, Interpolation, Classification, Joins, Types, and Helpers

turf-area

turf-buffer

turf-distance

turf-intersect, turf-union, turf-merge

turf-aggregate, turf-along, turf-average, turf-bbox-polygon, turf-bearing, turf-bezier, turf-center, turf-centroid, turf-combine, turf-concave, turf-convex, turf-count, turf-destination, turf-deviation, turf-envelope, turf-erase, turf-explode, turf-extent, turf-featurecollection, turf-filter, turf-flip, turf-hex-grid, turf-inside, turf-isolines, turf-jenks, turf-kinks, turf-line-distance, turf-line-slice, turf-linestring, turf-max, turf-median, turf-midpoint, turf-min, turf-nearest, turf-planepoint, turf-point, turf-point-grid, turf-point-on-line, turf-point-on-surface, turf-polygon, turf-quantile, turf-random, turf-reclass, turf-remove, turf-sample, turf-simplify, turf-size, turf-square, turf-square-grid, turf-sum, turf-tag, turf-tin, turf-triangle-grid, turf-variance, turf-within

Why does this matter?

New implementations, recent algorithms - pretty fast!

"Isomorphic" - browser and back-end

Modular - take only what you need (good for browsers via browserify)

Speaks GeoJSON

Wraps other modules so that they speak GeoJSON, too

GeoJSON

Not GeoJohnson

GeoJSON

Lingua franca for geospatial data on the web

Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, GeometryCollection

Feature, FeatureCollection (store properties with geometries)

GeoJSON

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

geojson.org

geojson.io

GitHub renders it: github.com/tnris/tx.geojson

Using Turf

In Node:

npm install turf
//or npm install turf-buffer
var turf = require('turf');
//or var buffer = require('turf-buffer');

On your web page

<script src="//api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js">
</script>
<script>
  var bufferedPoint = turf.buffer(myPoint, 5, 'miles');
</script>

Examples!

Word of Warning: Web map rendering performance

For larger datasets do analysis on back-end

Nonetheless, it is fun to see in a web map

var austin = turf.point([-97.743061, 30.267153]); //GeoJSON point
var buffered = turf.buffer(austin, 15, 'miles');
result = turf.featurecollection([austin, buffered])

var austin = turf.point([-97.743061, 30.267153]); //GeoJSON point
var atxBuffer = turf.buffer(austin, 15, 'miles');
var roundrock = turf.point([-97.678896, 30.508255]);
var rrBuffer = turf.buffer(roundrock, 15, 'miles');
result = turf.union(atxBuffer.features[0], rrBuffer.features[0]);

var austin = turf.point([-97.743061, 30.267153]); //GeoJSON point
var atxBuffer = turf.buffer(austin, 15, 'miles');
var roundrock = turf.point([-97.678896, 30.508255]);
var rrBuffer = turf.buffer(roundrock, 15, 'miles');
result = turf.intersect(atxBuffer.features[0], rrBuffer.features[0]);

//tnris geojson made with rasterio
display = tnris.type;
result = tnris;

result = turf.explode(tnris);
display = 'Num Points: ' + result.features.length;

var merged = turf.merge(tnris);
var polys = merged.geometry.coordinates.map(function (c) {
  return turf.simplify(turf.polygon(c), 0.1);
});
result = turf.featurecollection(polys);

//use simplified result from previous example
result = turf.explode(result);
display = 'Num Points: ' + result.features.length;

//use exploded result from previous example
result = turf.tin(result);

var bbox = turf.extent(tnris);
var grid = turf.squareGrid(bbox, 50, 'miles');
var points = turf.explode(tnris);
var counted = turf.count(grid, points, 'pointCount');
result = counted;

var bbox = turf.extent(tnris);
var grid = turf.triangleGrid(bbox, 50, 'miles');
var points = turf.explode(tnris);
var counted = turf.count(grid, points, 'pointCount');
result = counted;

var bbox = turf.extent(tnris);
var grid = turf.hexGrid(bbox, 50, 'miles');
var points = turf.explode(tnris);
var counted = turf.count(grid, points, 'pointCount');
result = counted;