OpenLayers 3

30
OL3 http://erilem.net/talks/foss4g2013/ol3.html

description

Presentation of OpenLayers 3 (development: presentation is focused on a specific technology, demonstrating either a new product or new developments in an existing product.) Cool demonstrations of how OpenLayers 3 opens up new possibilities for presenting your geospatial data. OpenLayers 3 enables a huge range of new web mapping functionality. In this talk, we'll show off many of the cool features of OpenLayers 3, including: Rich interaction and animation Virtual globe integration Raster layer effects Wide-ranging data source support The talk will be light on technical details and heavy with cool demos to show you how OpenLayers 3 opens up new and exciting ways of presenting your geospatial data.

Transcript of OpenLayers 3

Page 1: OpenLayers 3

OL3http://erilem.net/talks/foss4g2013/ol3.html

Page 2: OpenLayers 3

IntroIntroducing OpenLayers 3

http://ol3js.org/

Page 3: OpenLayers 3

Outline1. Vision2. Design principles3. Features4. Demos5. Swisstopo application6. Status update

Page 4: OpenLayers 3

VisionWhere OL3 is going

Page 5: OpenLayers 3

2D 3D Convergence

(Image courtesy of the OSM-3D.org project)

Page 6: OpenLayers 3
Page 7: OpenLayers 3

Client-side rendering

Page 8: OpenLayers 3

Maps are Graphics

Page 9: OpenLayers 3

Where does OL3 fit?

OpenLayers 2

OpenLayers 3

Page 10: OpenLayers 3

Designprinciples

Page 11: OpenLayers 3

SoC - 1/3(Separation of Concerns)

Page 12: OpenLayers 3

SoC - 2/3MapMap has a rendererMap has a viewMap has layersLayers have sources

Page 13: OpenLayers 3

SoC - 3/3Interactions vs Controls

Interactions respond to browser events on the mapControls have a presence in the DOM

Page 14: OpenLayers 3

High-PerformanceFor example:

Avoid boxing/unboxing operationsBe nice with the GC and reuse objectsUse rAF and watch the frame rateRedraw as few pixels as possibleUse Closure Compiler

Page 15: OpenLayers 3

No opinion on the UIUse CSSProvide objects for integration with other libs(ol.Overlay)

Page 16: OpenLayers 3

FeaturesVarious tile sources/providers: OSM, XYZ, Stamen,TileJSON, Bing Maps, WMTS, WMSControls: Attribution, Full-screen, Mouse position,Scaleline, Zoom, Zoom sliderVector layer: rule-based styling with powerfulexpression systemParsers: GeoJSON, GPX, KML, FE, GML, WMSCapabilities, WMTS CapabilitiesAnimationsGeolocation, Device orientation

Page 17: OpenLayers 3

Demos

Page 18: OpenLayers 3

Map with controlsmap with controls example

Page 19: OpenLayers 3

Animationsanimation example

Page 20: OpenLayers 3

geo.admin.ch Third Release

Page 21: OpenLayers 3

New map.geo.admin.chviewer

Based on OpenLayers 3, AngularJS 1.2 & Bootstrap 3.0ComponentsMobile & desktop: all in oneRE2: 650 Ko / RE3: 250 KoIn production on 17.10.2013Code on Github

Page 22: OpenLayers 3

Responsiveness - phone

Page 23: OpenLayers 3
Page 24: OpenLayers 3

Responsiveness - tablet

Page 25: OpenLayers 3
Page 26: OpenLayers 3

Responsiveness - desktop

Page 27: OpenLayers 3
Page 29: OpenLayers 3

Status update3.0.0 beta1 about to be releasedThings in the work:

New web siteNew build systemWebGL vectorVector editing

Page 30: OpenLayers 3

Thanks!