2. Open Layers (OL),
history,
versions,
what it can do,
features,
compatible,
leaflet vs OL ,
google trend,
leaflet over OL,
OL over Leaflet,
the choice?,
some practical examples,
How ol grows,
in short
CONTENTS
3. OPEN LAYERS(OL)
Lightweight Open source
JavaScript library
Displays map data in
the form of tiles
Provides API for web
based geographic
applications
Provided under 2-
clause BSD license
(Simplified or Free)
4. HISTORY
2005
Before
Originally based on the
Prototype JS Framework for
Ajax support in Ruby on Rails
2005
June 29-30, 2005
• Created by MetaCarta as
per its business needs
• After the O’Reilly Where
2.0 Conference
2006
June 13-14.2006
• Released as open source
• After the Where 2.0
Conference
Nov. 2007
onwards
• owned by Open Source
Geospatial Foundation
Project
5. VERSIONS June
2006
latest V1 released
July 2013
•latest V2 released
•updated filter
encoding and GML
12 Dec.
2016
latest V3 compatible
to HTML5 and CSS3
released
rewriting of OL with
new API
20 Mar.
2017
latest V4 released
introduced semantic
versioning
6 Nov.
2018
Latest V5, no longer
compatible to
closure-util released
standardized as ES
modules, type
checking, rendering
tests
Note: Currently V6 with new layer interface and immediate rendering API is just released
6. WHAT IT CAN DO
displaying
interaction
processing
the three pillars
10. INTERACTING /QUERYING
draw and modify features select features
query WMS with GetFeatureInfo query UTF Grid-population census
11. INTERACTING /QUERYING
Ol is more than zooming and panningquery the client-side vector*
*can also query the vector on the server through Get and Push URL
12. PROCESSING
vector processing Using JSTS vector processing Using Turf
I2maps (a geo-computing env.)
JSTS: js library for processing
and analyzing geometries
Turf: simple, modular
and fast js library for
geospatial analysis
framework for knowledge
discovery from spatio-
temporal data
13. OTHERS
OpenLayers Timeline: creates a time
related maps
Timemap.js: to use different maps
with simile(widget) timeline.
Geolocation tracking heatmaps
…and many more @
https://openlayers.org/en/latest/exampl
es/
Demo: http://elasticterrain.xyz/#map
14. FEATURES
Tiled Layers
pulls tiles from OSM, Bing, MapBox,
Stamen or other sources supporting
OGC standards
Cutting Edge, Fast & Mobile
Ready
pulls Canvas 2D, WebGL for graphics, and all
the latest features from HTML5 and supports
mobile
Easy to Customize and Extend
straight-forward CSS, easy to customize and
extend functionality.
Source: https://openlayers.org/
Projection System
can deal with many projections, the
default:- Web Mercator projection
(EPSG:3857)
15. and all the browsers that support HTML5 and ECMAScript 5.
For older platforms like IE <9 or Android <4.x
polyfills are required
COMPATIBLE
recreates the missing
features to support
different browsers
18. LEAFLET OVER OL
Some plugins: heatmap.js, Leaflet.MultiTileLayer, Leaflet
Data Visualization Framework (DVF), Proj4Leaflet, plugins
for geocoding, routing, geometries and many more
Source: https://mappinggis.com/2016/11/openlayers-vs-leaflet-mejor/ retrieved on 29th Sept, 2019
easy to learn, basic GIS
knowledge to display
maps
Better architecture
and internal design
better look and feel
large no. of plugins
(200 vs a dozen)
Better visualization for cell
phones
API Documentation easier
to understand than OL
19. OL OVER LEAFLET
supports all webGIS
protocols like WFS, GML,
WMTS,MVT no plugins
needed
more examples and
workshops
Better 3D visualization Better integration of
projection system
more features on
map controls
Better for complex
GIS applications
20. THE CHOICE?
the 80/20 rule:
if you can achieve your requirement by only 80% i.e you
don’t have advanced requirements like canvas rotation,
elastic terrain, OGC web services, go with leaflet
if your requirements grow beyond 80%, choose open
layers for the following reasons:
get rid of variation of code quality of third party plugins
feature coverage is larger than leaflet
230000 lines of code vs 7000 lines of codes (as of 2015)
eliminate the risk of switching later
this is what common web mapping agencies, companies
do nowadays
Source:https://labs.webgeodatavore.com/presentation-openlayers-foss4g-uk-2016/#/3
simplicity vs features and flexibility
I suggest:
As a novice of web mapping
•leaflet
As a professional/company
•OL
22. CDRC MAP
SHOWS THE INDEX OF MULTIPLE DEPRIVATION OF ENGLAND
Source: https://maps.cdrc.ac.uk/#/geodemographics/imde2019/default/BTTTFFT/10/-0.1500/51.5200/
23. SIMD MAP
SHOWS THE SCOTTISH INDEX OF MULTIPLE DEPRIVATION 2016
Source: https://simd.scot/2016/#/simd2016/BTTTFTT/9/-4.0000/55.9000/
24. TUBECREATURE
SHOWS THE LONDON TUBE DATA MAP
https://tubecreature.com/#/total/current/same/*/*/FFTFTF/13/-0.1000/51.5200/
26. IN SHORT
It is a powerful tool
Need research for betterment of existing
features
Collaboration with other js libraries
Addition of new features
OL powers in serving wider market reach
GeoRSS is a specification for encoding location as part of a Web feed.
KML: Keyhole Markup Language is an XML notation for expressing geographic annotation and visualization
GML: Geography Markup Language is an XML to express geographical features.
OpenLayers - Cesium integration library
UTFGrid. The UTFGrid encoding scheme encodes interactivity data for a tile in a space efficient manner. It is designed to be used in browsers, e.g. for displaying tooltips when hovering over certain features of a map tile.
Turf.js:Simple-Modular, simple-to-understand JavaScript functions that speak GeoJSON , Modular-Turf is a collection of small modules, you only need to take what you want to use, FastTakes advantage of the newest algorithms and doesn't require you to send data to a server
I2maps: Provides web visualization with interactive interface of framework for knowledge discovery from spatio-temporal data
Polyfills: It's a service which accepts a request for a set of browser features and returns only the polyfills that are needed by the requesting browser.
ECMAScript (or ES) is a scripting-language specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262. It was created to standardize JavaScript, to foster multiple independent implementations.
Bikesharp (formerly the Bike Share Map) shows the locations of docking stations associated with bicycle sharing systems from 400+ cities around the world. Each docking station is represented by a circle, its size and colour depending on the size and number of bicycles currently in it. The maps generally update every few minutes. There is a version that replays the last 48 hours of colour and size changes. In many cities, an ebb and flow of cycle commuters can be seen.
Welcome to the Consumer Data Research Centre (CDRC)
Camptocamp,swisstopo,terestris,boundless,flightaware,1000museums,adelphic,bae systems,zibby,maptia
Once a year, a code sprint gathers the most dedicated developers for a collocated week in a remote place with good bandwidth. This strengthen the community spirit and delivers brilliant technical updates.OutreachThe community outreaches at special technical conferences, like FOSS4G and their local events. Let’s support sending committers to these event so that everyone gets the latest updates.
This example shows how to use postrender and vectorContext to animate flights. A great circle arc between two airports is calculated using arc.js and then the flight paths are animated with postrender. The flight data is provided by OpenFlights (a simplified data set from the Mapbox.js documentation is used)