This document introduces OpenLayers 3 (OL3), an open-source JavaScript library for displaying interactive maps in web browsers. It discusses OL3's vision of 2D and 3D map convergence on the client side using powerful rendering. The key design principles are separation of concerns, high performance, and no opinion on the user interface. OL3 features include support for various tile and vector sources, controls, animations, and devices. Demos show maps, animations, and a responsive Swiss topography application. The status update indicates the upcoming 3.0.0 beta1 release and work on a new website, build system, and WebGL/editing features.

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

2. Intro
Introducing OpenLayers 3
http://ol3js.org/

3. Outline
1. Vision
2. Design principles
3. Features
4. Demos
5. Swisstopo application
6. Status update

4. Vision
Where OL3 is going

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

7. Client-side rendering

8. Maps are Graphics

9. Where does OL3 fit?
OpenLayers 2
OpenLayers 3

10. Design
principles

11. SoC - 1/3
(Separation of Concerns)

12. SoC - 2/3
Map
Map has a renderer
Map has a view
Map has layers
Layers have sources

13. SoC - 3/3
Interactions vs Controls
Interactions respond to browser events on the map
Controls have a presence in the DOM

14. High-Performance
For example:
Avoid boxing/unboxing operations
Be nice with the GC and reuse objects
Use rAFand watch the frame rate
Redraw as few pixels as possible
Use Closure Compiler

15. No opinion on the UI
Use CSS
Provide objects for integration with other libs
(ol.Overlay)

16. FeaturesVarious tile sources/providers: OSM, XYZ, Stamen,
TileJSON, Bing Maps, WMTS, WMS
Controls: Attribution, Full-screen, Mouse position,
Scaleline, Zoom, Zoom slider
Vector layer: rule-based styling with powerful
expression system
Parsers: GeoJSON, GPX, KML, FE, GML, WMS
Capabilities, WMTS Capabilities
Animations
Geolocation, Device orientation

17. Demos

18. Map with controls
map with controls example

19. Animations
animation example

20. geo.admin.ch Third Release

21. New map.geo.admin.ch
viewer
Based on OpenLayers 3, AngularJS 1.2 & Bootstrap 3.0
Components
Mobile & desktop: all in one
RE2: 650 Ko / RE3: 250 Ko
In production on 17.10.2013
Code on Github

22. Responsiveness - phone

24. Responsiveness - tablet

26. Responsiveness - desktop

28. Demomap.geo.admin.ch

29. Status update3.0.0 beta1 about to be released
Things in the work:
New web site
New build system
WebGL vector
Vector editing

30. Thanks!