maptime berlin presentationgeosysnet.de/custom/downloads/maptimeberlin_turfjs_20... · 2016. 9....

54
Turf.js Geoprocessing in a Browser Numa Gremling, Maptime Berlin, 20.09.2016

Upload: others

Post on 06-Oct-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Turf.jsGeoprocessing in a Browser

Numa Gremling, Maptime Berlin, 20.09.2016

Page 2: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

http://geosysnet.de/en/downloads.html

Page 3: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

What is Turf.js?

Turf is a JavaScript library for spatial analysis.

… JavaScript!

Page 4: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

https://www.mapbox.com/blog/turf-gis-for-web-maps/

Page 5: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Origins

Morgan Herlocker, 2013

http://morganherlocker.com

@morganherlocker

Mapbox, since 2014

https://www.mapbox.com

@Mapbox

Page 6: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS
Page 7: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

https://www.mapbox.com/blog/coffee-with-turf/

Page 8: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

GeoJSON in, GeoJSON out

GeoJSON: the data format in Turf.js

All in one file:

geometry

attributes

coordinate system

Page 9: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

GeoJSON

Point LineString Polygon

Page 10: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

GeoJSON

MultiPoint MultiLineString MultiPolygon

Page 11: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

GeoJSON

GeometryCollection

Spec: http://geojson.org/geojson-spec.html

Page 12: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

`

https://en.wikipedia.org/wiki/GeoJSON

Page 13: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS
Page 14: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS
Page 15: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Where to get a GeoJSON?

Write from scratch

http://geojson.io/

QGIS

Page 16: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

GeoJSON in QGIS

Page 17: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Geoprocessing in the Web

Page 18: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Geoprocessing in the Web: WPS

Typically: Web Processing Service

OGC standard

requires:

complex serverside infrastructure

requests

internet

http://www.opengeospatial.org/standards/wps

http://www.opengeospatial.org

Page 19: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Geoprocessing in the Web: WPS

user sends a request to a server

server processes the request in a DB or a GIS

server sends back the result

1

2

3

Page 20: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Example - WPS: Buffer

… a few minutes later…

Page 21: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Geoprocessing in the Web: WPS

user sends a request to server

server processes the request in a DB or a GIS

server sends back the result

(user falls asleep)

(user notices a mistake, does it all over again)

(user falls asleep again)

(user notices another mistake?)

Page 22: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

WPS - yes or no?

WPS makes sense when:

analyses and calculations are complex

data is large

However: WPS is often used to accomplish simple tasks

... until now!

Page 23: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Turf.js

Page 24: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

GitHub

https://github.com/Turfjs/turf

Page 25: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Turf.js Website

Page 26: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Modular

About 50 modules

05.06.2014, http://morganherlocker.com/

Page 27: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Build your own!

https://turfjs-builder.herokuapp.com/

Page 28: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Methods

center centroid distance destination

envelope midpoint bezier buffer

concave convex difference intersect

simplify union combine explode

flip kinks pointOnLine random

sample tin inside isolines

Page 29: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Mapbox.js?

Official examples use Mapbox.js

https://www.mapbox.com/mapbox.js/api/v2.4.0/

But: Turf.js can be used separately, even without a map

Page 30: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Mapping = optional

Turf.js works without a map

In most cases a map is used to display the results but that is entirely optional

Turf.js can be used by itself, as a pure GIS library, without any visualization

{ }

Page 31: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Mapping Clients

Leaflet

OpenLayers

Mapbox.js

Mapbox GL JS

Google Maps JavaScript API

etc.

... as long as GeoJSON is supported Turf.js can be integrated

Page 32: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

No API Keys

works without API keys

download, include, go!

Page 33: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Syntax

Very simple:

turf.tool(params);

Example, buffer:

turf.buffer(features, 45, 'kilometers');

Page 34: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

DEMO

Page 35: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Point in Polygon

Page 36: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Point in Polygon

Page 37: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Lines to Points

Page 38: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Lines to Points

Page 39: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Digitizing

Page 40: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Digitizing

Page 41: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Digitizing

Page 42: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Digitizing

Page 43: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Digitizing

Page 44: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Digitizing

Page 45: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS
Page 46: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS
Page 47: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS
Page 48: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS
Page 49: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Dashboard – gis-trainer.de final project

Page 50: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Dashboard – new version

http://geosysnet.de/demos/dashboard/index.html

Page 51: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Live Coding?

Page 52: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Europe Game

Page 53: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Thanks, Contact, Questions

console.log('Thank you! :-)!');

gis.stackexchange.com/users/23263/britishsteel

[email protected]

twitter.com/Gremling89

geosysnet.de

gis-trainer.de

Slides and data: http://geosysnet.de/en/downloads.html

Page 54: Maptime Berlin Presentationgeosysnet.de/custom/downloads/MaptimeBerlin_TurfJS_20... · 2016. 9. 21. · Leaflet OpenLayers ... Maptime Berlin Presentation Author: numa_gremling@spatial.redlands.edu;geoSYS

Impressum

geoSYSPflügerstr. 5612047 Berlin, Germany

Telefon: 030/82070657Telefax: 030/82070658

Email: [email protected]: www.geosysnet.de