Open Layers Workshop
Jorge Sanz - @xurxosanz
Alberto Romeu - @alrocar
Before we start, let's stop
and see where we are...
Objectives
- Why to use Open Layers
- Understand OL concepts: map, layers,...
- Learn how to
- add WMS and cached layers
- add WFS and other vector layers
- add some interactivity to your map
- apply rules to your vector layers
- apply styles to your vector layers
Outline
- The Open Layers project
- Open Layers basics
- Working with layers
- Working with controls
- Vector layers
Open Layers
- http://openlayers.org
- OSGeo project
- Started in 2006 (history)
- 150 contributors and almost 225k LOC (statistics)
- 2.13 stable release (will use this)
- 3.0 next major release
- Mature, well established
- For years THE web mapping framework
- Great support for standards
- WMS/WFS/WMTS/TMS
- GML/KML/GeoRSS/WMC...
-
New challenges
and competition (Leaflet) - Users and developers mailing lists
-
Beginner's guide and
cookbook available
Open Layers basics
Your first map
Dissect your map
- markup
- where you put the map
- styles
- how big is your map?
- initialization code
- after loading OL library
- order is important
Open Layers resources
- Your best friend: documentation
- Your really best friend: examples
- Your inevitable friend: API docs
- OpenLayers.Layer jsdoc
- Your "always there" friend: sources!
- Layer.js source code on github
Working with layers
WMS Layers
- Constructor with 3 parameters
- Name of the layers in your viewer
- URL of the service
- Parameters to pass to the service
- WMS layers to load
- image format
- transparency
- ...
Cached layers
- Images already rendered at the server
- Several formats
- OpenStreetMap is a typical base map
- EPSG:3857 (see epsg-registry for details)
- OSM accepts custom urls
Proprietary layers
Vector Layers
Minimum parameters of a vector layer constructor:
- A layer name
- A configuration object with:
- A list o strategies
- When your data is requested
- Ordered
- Independent
- A protocol
- How your data is requested
- Deal with data format
More on vector layers later
Bonus exercises
- Visit the USGS web portal and try to represent other earthquakes documents (KML for example?)
- Create a selection control and try to show below your map additional information stored on your earthquakes vector layer
Bonus exercises
Working with Controls
Controls
- Add interactivity to the map
- Not all provide a user interface
- Some are loaded by default
- Navigation
- PanZoom
- Examples:
- Overview map
- Scale line
- Selection tools
- Drawing tools
- and many more
Vector Layers
Open Layers and vector concepts
"Dealing with vector layers and features is like a postal service"
- Format:
- the language of your letters
- let's play with this example
- Protocol
- the way you put your address on the envelope
- independent of the format or the features
- i.e. through national post service or USPS, writing down the address or using a barcode?
- Strategy
- when you send your letter to the addresses
- i.e. as written or go to the post office every Monday?
Creating new features
- Just create, without persisting yet
- Create a checkbox to activate/deactivate the control
- Create a OpenLayers.Control.DrawFeature
- Create a function to toggle the control
Persisting features
- We use the transactional profile of WFS
- We need to add a couple of controls
- Add the OpenLayers.Strategy.Save
- Add a new EditingPanel control to the map
- Check the changes on the GeoServer layer preview
Vector Styling
- To apply a style we need to use filters
- Symbolizers are similar to CSS
- A rule joins a filter with a symbolizer
- A style is a group of rules with a default symbolizer
- A style map is a map of render intents with styles
OpenLayers Workshop
By Jorge Sanz
OpenLayers Workshop
Girona Summer School 2014 OpenLayers workshop
