This presentation has been prepared by Oleksii Prohonnyi for internal JS team meeting to improve skills of junior developers.

1. OpenLayer’s basics
_by Oleksii Prohonnyi

3. INTRODUCTION

4. OpenLayers
A high-performance, feature-packed library for all your mapping needs.
Features:
 Tiled Layers
 Fast & Mobile Ready
 Vector Layers
 Cutting Edge & Easy to Customize
Read more: http://openlayers.org/

5. OpenLayers 3 vs OpenLayers 2
 Vector architecture
 Format/parser architecture
 Hit detection
 High-DPI support
 Rendering hooks
Read more: http://www.camptocamp.com/actualite/hot-new-features-in-
openlayers-3/

6. Good parts
Objectives:
 Rewritten core which implement modern design patterns
 Backward compatibility
 Rotation and animation
 Good scalability
Closure tools:
 Based on Google's Closure Tools (Closure Library)
 Sufficient optimization by Closure Compiler

7. Public API
 Using the advanced optimizations of the Closure Compiler means that
properties and methods are renamed – longMeaningfulName might
become xB – and so are effectively unusable in applications using the
library. To be usable, they have to be explicitly exported. This means the
exported names, those not renamed, effectively become the public API of
the library.
 http://openlayers.org/en/v3.8.2/apidoc/
 Closure library functions are not exported, they placed into goog
namespace.

8. BASIC CONCEPTS

9. Basic Concepts: Map
The core component of OpenLayers 3 is the map (ol.Map). It is rendered to a
target container (e.g. a div element on the web page that contains the map).
All map properties can either be configured at construction time, or by using
setter methods, e.g. setTarget().

10. Basic Concepts: View
ol.Map is not responsible for things like center, zoom level and projection of
the map. Instead, these are properties of an ol.View instance.
An ol.View also has a projection. The projection determines the coordinate
system of the center and the units for map resolution calculations. If not
specified (like in the below snippet), the default projection is Spherical
Mercator (EPSG:3857), with meters as map units.

11. Basic Concepts: Source
To get remote data for a layer, OpenLayers 3 uses ol.source.Source
subclasses. These are available for free and commercial map tile services like
OpenStreetMap or Bing, for OGC sources like WMS or WMTS, and for vector
data in formats like GeoJSON or KML.

12. Basic Concepts: Layer
A layer is a visual representation of data from a source. OpenLayers 3 has
three basic types of layers: ol.layer.Tile, ol.layer.Image and ol.layer.Vector.
 ol.layer.Tile is for layer sources that provide pre-rendered, tiled images in
grids that are organized by zoom levels for specific resolutions.
 ol.layer.Image is for server rendered images that are available for arbitrary
extents and resolutions.
 ol.layer.Vector is for vector data that is rendered client-side.

13. Basic map example
To include a map a web page you will need 3 things:
 Include OpenLayers.
 <div> map container

14. Basic map example
 JavaScript to create a simple map
 See demo: http://jsfiddle.net/91kmdd3q/

15. MAP PROVIDERS

16. Map providers
 BingMaps
 MapQuest
 OSM
 Stamen
 TileArcGISRest
 WMTS
 XYZ
 Zoomify

17. BingMaps provider example
Related API documentation: ol.Map, ol.View, ol.layer.Tile, ol.source.BingMaps
 See demo: http://jsfiddle.net/7j0qbuz7/

18. MAP PROJECTIONS

19. Map projections

20. Map projections
 Are methods for coordinate transforms between coordinate systems. By
default, OpenLayers ships with the ability to transform coordinates
between geographic (EPSG:4326) and web or spherical mercator
(EPSG:900913 et al.) coordinate reference systems. See the transform
method for details on usage.
 Additional transforms may be added by using the proj4js library. If the
proj4js library is included, the transform method will work between any two
coordinate reference systems with proj4js definitions.
 See more: http://dev.openlayers.org/apidocs/files/OpenLayers/Projection-
js.html

21. More about projections
 List of map projections
 OpenLayer's global projection object
 How to work with OpenLayers projections:
 peterrobins.co.uk
 Spherical mercator explanation
 proj4js

22. EXAMPLES

23. Examples: Animation
 Animations: rotate left/right, rotate around, pan to, elastic to, bounce to,
spin to, fly to, spiral to
 See demo: http://jsfiddle.net/ep2smtqc/

24. Examples: Mouse position
Related API documentation: ol.Map, ol.View, ol.control,
ol.control.MousePosition, ol.coordinate, ol.layer.Tile, ol.proj, ol.source.OSM
 See demo: http://jsfiddle.net/1pm97ho8/

25. Examples: Overlay
Related API documentation: ol.Map, ol.Overlay, ol.View, ol.coordinate,
ol.layer.Tile, ol.proj, ol.source.MapQuest
 See demo: http://jsfiddle.net/pqxdr0vn/

26. Examples: User interaction
Related API documentation: ol.Map, ol.View, ol.interaction, ol.interaction.Draw,
ol.interaction.Modify, ol.interaction.Select, ol.interaction.Snap, ol.layer.Tile,
ol.layer.Vector, ol.source.MapQuest, ol.source.Vector, ol.style.Circle, ol.style.Fill,
ol.style.Stroke, ol.style.Style
 See demo: http://openlayers.org/en/v3.8.2/examples/snap.html

27. REFERENCES

28. Useful links
 http://openlayers.org/
 http://openlayers.org/en/v3.8.2/apidoc/
 http://openlayers.org/en/v3.8.2/examples/
 https://github.com/openlayers
 http://openlayers.org/en/v3.8.2/doc/tutorials/
 http://www.acuriousanimal.com/Openlayers-Cookbook/
 http://gis-lab.info/qa/openlayers-begin.html

30. Oleksii Prohonnyi
facebook.com/oprohonnyi
linkedin.com/in/oprohonnyi