An Introduction to OpenLayers 3, Part III

This week we will look at adding a Web Map Service (WMS) in OpenLayers 3 (OL3).

Adding a WMS
The code below illustrates how to add a WMS from the National Atlas.  Specifically, I pull from the data section on "people" and the layer named "fd0002_9" which is for Percent of Population that Receives Food Stamps, by County for 2002.  You can view this information on the National Atlas website or load the WMS through QGIS.  For the capabilities file and loading into a GIS, see: http://nationalatlas.gov/infodocs/wms_intro.html.

Key parts of the code are emboldened in red.

   <!--Loads WMS Service from the National Atlas--People: FoodStamps, 2002//-->
   <!--Makes WMS layer transparent, so if can be overlaid on the OSM basemap//-->

 var wmsmap = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://webservices.nationalatlas.gov/wms?people',
params: {'LAYERS': 'fd0002_9',transparent:'true'},
serverType:'mapserver',
}),
opacity:'0.5'
 });

A basic map is located here: http://webmapexamples.net/WMSExample.html. A text file with the code: http://goo.gl/FGfl1K. However, you won't be able to get any information when you click a county.

Adding Interactivity
In addition, OL3 allows information to be retrieved when a user clicks on a map.  See the more interactive example here: http://webmapexamples.net/WMSExampleFoodStamps.html. Attribute information will be returned in the green box.

Example of a Capabilities File for a WMS from the NationalAtlas.gov.
It contains important information about the map layer/image.

This WMS is queryable (=1) so we can allow users to click an area and return information.  I had to change the INFO FORMAT to text/plain as outlined in the National Atlas's technical documentation.

Lastly, it is important to mention that the NationalAtlas is being merged into the USGS NationalMap later this year.  It is always possible the links for the WMS could change.

Next post: Adding a KML

Helpful OL3 API Docs
http://probins.github.io/ol3docs/apidocs/