OpenLayers Tutorial


OpenLayers makes it straightforward to put a dynamic map from various sources onto any web page. OpenLayers, developed as open source software, is written as a JavaScript library for visualizing map data using most modern web browsers. Its code can be found at http://www.openlayers.org/api/OpenLayers.js. The associated documentation of the Javascript API can be foound at http://trac.openlayers.org/wiki/Documentation. A number of example maps created using Openlayers can be found at http://openlayers.org/dev/examples/

Visualizing Temperature data using Openlayers

In this tutorial we will see how to visualize data using OpenLayers. The resulting map can be found at http://n3.cigi.uiuc.edu:8080/temperature.html. For this map we take the interpolated temperature data from our postgis data store and visualize it as a layer on top of the default background map. The source code for displaying this map can be found on n3.cigi.uiuc.edu in /srv/cigi/httpd/www/ directory.
One directory per group has been created with the code placed there for the purpose of convenience. Please feel free to modify the code in your directories.

Openlayers installed on n3 can be reached at http://n3.cigi.uiuc.edu:8080/OpenLayers-2.7/lib/OpenLayers.js.
Below is the code of the temperature.html with comments, so that you can understand how to visualize map layers using openlayers.

Example Code

Reference