OpenLayers
OpenLayers is an open source JavaScript library for displaying map data in web browsers. It provides an API for building rich web-based mapping applications. GeoExt provides a suite of customizable widgets and data handling support that makes it easy to build applications for viewing, editing, and styling geospatial data.
This one day course will introduce attendees to OpenLayers and GeoExt. Attendees will learn how to create browser-based map applications and display data from a variety of sources. Anyone interested in web mapping is encouraged to attend, but familiarity with basic GIS concepts is suggested and experience with JavaScript is preferred, as is experience of creating simple web pages.
Duration: 30hrs
Course Content:
Module 1: Creating Simple Maps with OpenLayers
- Creating a working environment
- Structure of OpenLayers
- Building the layout
- Creating the appeal
- Writing the code
- Using the API documentation
- Understanding type definitions
- Debugging the code
Module 2: Applying Custom Styles
- Customizing the default appearance
- Identifying the classes
- Styling the controls
- Customizing the attribution control
- Creating a custom zoom control with CSS
- Styling vector layers
- Customizing the appearance with JavaScript
- Changing the overview map and the scale bar
- Truncating the coordinate control
- Changing the attribution
- Creating a WebGIS client layout
- Building the HTML
- Styling the layout
- Writing the code
Module 3: Working with Layers
- Using a proxy
- Resources to use
- Basic considerations
- Building a layer tree
- Styling the layer tree
- Creating a layer tree constructor
- Adding layers dynamically
- Creating the interface
- Extending the constructor
- Fetching the WMS metadata
- Adding WMS layers
- Adding WFS layers
- WFS considerations
- Adding vector layers with the File API
- Creating the interface
- Building the method
- Adding vector layers with a library
- Removing layers dynamically
- Extending a constructor
- Changing layer attributes
- Styling active layers
- Extending the method
- Changing the layer order with the Drag and Drop API
- Clearing the message bar
Module 4: Using Vector Data
- Accessing attributes
- Writing the code
- Setting attributes
- Styling the form
- Writing the code
- Validating attributes
- Adjusting the styles
- Building headers
- Writing the code
- Creating thematic layers
- Extending the layer tree
- Creating choropleth maps
- Creating categorized maps
- Saving vector data
- Saving in arbitrary formats
- Saving with WFS-T
- Modifying the geometry
Module 5: Creating Responsive Applications with
- Interactions and Controls
- Building the toolbar
- Mapping interactions to controls
- Creating the control
- Adding and removing the control
- Adding a selection control
- Building a set of feature selection controls
- Styling the cont
- Creating
- Adding new vector layers
- Creating the HTML and the CSS
- Extending the layer tree
- Building a set of drawing tools
- Writing the method
- Modifying and snapping to features
- Extending the method
- Creating new interactions
- Understanding ol.interaction.Pointer
- Removing features
- Dragging features
- Extending the method
- Building a measuring control
- Creating the interaction
- Doing geodesic measurements
- Calculating lengths even more precisely
Module 6: Controlling the Map – View and Projection
- Customizing a view
- Constraining a view
- Creating a navigation history
- Working with extents
- Creating a zoom control
- Extending the toolbar
- Rotating a view
- Changing the map's projection
- Creating custom animations
- Building the control
- Creating animations
Module 7: Mastering Renderers
- Creating a WebGL map
- Drawing lines and polygons with WebGL
- Blending layers
- Clipping layers
- Exporting a map
- Creating a raster calculator
- Raster
- Operating with pixels
- Creating a convolution matrix
- How convolution works
- Converting an image to 8-bit
- Implementing the Sobel filter
- Normalizing an image
- inalizing a control
- Clipping a layer with WebGL
- Writing programs
- Creating a clipping mask
Module 8: OpenLayers 3 for Mobile
- Responsive styling with CSS
- Writing the style sheet
- Constructing the map
- Generating geocaches
- Adding device-dependent controls
- Adding controls for touch devices
- Adding controls for desktop computers
- Vectorizing the mobile version
- Making the mobile application interactive