A hands on introduction to using OpenLayer 3 (OL3) and Leaflet to display spatial data on the web. The workshop will introduce the two libraries, the underpinning concepts and strengths of each, and take delegates through creating a series of examples.
Documentation: http://astuntechnology.github.io/osgis-ol3-leaflet/
Repository: https://github.com/AstunTechnology/osgis-ol3-leaflet
The workshop walks through building the same simple web mapping application first using OpenLayers 3 and then with Leaflet. The steps break down as follows:
- Basic map with OSM tiles
- OS-GB Map with Ordnance Survey tiles
- GeoJSON layer with markers
- Info for GeoJSON layer
- WMS layer
- Info for WMS layer
Completed versions can be seen here:
First clone or download (and unzip) the repository from GitHub to a suitable location on your local machine.
git clone https://github.com/AstunTechnology/osgis-ol3-leaflet.git
If you are using your own machine then you should be good to go, start building an OpenLayers 3 map.
If you are using the OSGeo Live DVD do the following:
- Dismiss the Welcome and Upgrade prompts
- In Firefox (Applications > Web Browser) navigate to http://is.gd/osgis2014
- Copy and paste the commands displayed in your browser into a Terminal (Applications > Accessories > Terminal Emulator) and hit return
The commands set the keyboard layout to GB, installs git and gedit (a slightly better text editor) then clones the repository and changes you into it's root. Now you're ready to start building an OpenLayers 3 map.
- Style markers based on an attribute value
- Add additional WMS layer (the WMS server used in the workshop also has a
osgb:county_regionlayer)
The documentation is licensed under the Creative Commons Attribution 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/. Sample code is licensed MIT. © Astun Technology.
Third-party libraries bundled with this repository for convenience such as OpenLayers 3, Leaflet, reqwest etc. retain their original license.
- Consider adding Canvas example as suggested by @acanimal