OpenLayers 3 choice: the 80/20 rule

There are many other choices to do web mapping, in particular the strong contender Leaflet

You are in the 80% requirements.

In our opinion, as long as your don't meet advanced requirement like projections, canvas rotation or need to consume OGC web services (for SDI for example), you can choose the approach light library "à la Leaflet" with plugins.

If you need more than the 80% to achieve your requirements.

If you need a lot of advanced functions without the third party plugins code quality variations, choose OpenLayers 3 as the features coverage is larger than Leaflet with it philosophy of a well maintained small core.

If you are not sure about the requirements you will have, you may prefer OpenLayers to limit the risk to switch later.

No opposition between both OpenLayers and Leaflet libraries: this vision is shared by companies or web mapping agencies that nowadays support both OpenLayers 3 and Leaflet clients.

Displaying

Different data sources - WMS

Different data sources - OpenStreetMap tile based sources

Different data sources - GeoJSON

Different data sources - Mapbox Vector Tiles

Client-side reprojection

Maps or not?

High-resolution images viewer

See also the Zoomify demo

Overlay or side by side?

National Library of Scotland

Styling - client-side

Styling - multiple styles for a layer

Alternative representations - advanced clustering

Multiple views & renderers

Default Canvas renderer. Drawback: the most interesting renderer, WebGL, does not support all vector types. Funding wanted!

2D/3D combined with Cesium

See the OpenLayers-Cesium project

Interacting

Interacting

Although interactions can concern zooming, panning, keyboard manipulation and mouse/touch related behaviour, we will focus on querying informations from layers and drawing here.

Querying: the options

• Client-side vector

• Server-side vector with WFS

• WMS with GetFeatureInfo

• UTF-Grid

Client-side vector

It uses forEachFeatureAtPixel (from ol.Map). See associated demo

Server-side vector with WFS

You pass filter encoding string in the GET or POST URL

WMS with GetFeatureInfo

Use forEachLayerAtPixel (from ol.Map) combined with getGetFeatureInfoUrl (from ol.source.ImageWMS or ol.source.TileWMS) See associated demo

UTFGrid - population census

Look at class ol.source.TileUTFGrid and associated demo

Display element on the top of your map

You will need an Overlay (ol.Overlay). It position changes depending of geographical coordinates.

Selecting

To draw and select

Drawing/modifying

Processing

Raster processing

Pseudo-3D view for shaded relief

Raster processing

Satellite-image diff in the browser

Vector processing with JSTS

Vector processing with Turf

Ecosystem

A growing ecosystem

There are various ways to create plugins at the moment.

We maintain a repository covering the ecosystem called awesome-openlayers

Protips:

You may ask why "awesome-...", look at awesome-vector-tiles or awesome-javascript. When you search a programming topic, search in a search engine "awesome-yourprogrammingtopic"

Covering all from this list would not be possible. So, what can you take from the list?

With frameworks or frameworkless?

You mainly have choices between:

• Angular based solutions
• React based solutions
• GeoExt based solutions
• Vanilla JavaScript or jQuery based solutions (we consider them as frameworkless)

More or less intrusive frameworks. Choices depend of skills and team/developers personalities.

The "no-code approach" with Desktop GIS to OpenLayers 3

• qgis2web Export from QGIS to various web mapping library including OpenLayers (a Desktop GIS software)
• Web App Builder

One example for inspiration

One of the most impressive is OL3-ext for its variety.

References

Official

• Official website
• Examples
• API documentation
• Workshop
• Custom builds

Books

• OpenLayers 3 Beginner’s Guide by Thomas Gratier, Paul Spencer & Erik Hazzard and code samples) (January 2015)
• The book of OpenLayers 3 - Theory and Practice with code samples by Antonio Santiago Perez
• Mastering OpenLayers 3 by Gábor Farkas (January 2016)
• OpenLayers 3.x Cookbook - Second Edition by Peter J. Langley, Antonio Santiago Perez (March 2016)