Technical Tips
Using Styled Layer Descriptors with Web Mapping Services
by Ian Miller, Information Technology Strategist |
The Web Map Service (WMS) Open GIS standard provides a vendor-neutral means of publishing web-based mapping services, including the ability to request a map image for a chosen area and a set of map layers to be displayed. There are a number of software servers which implement the WMS standard including open source packages such as MapServer and GeoServer and vendor packages such as ESRI ArcIMS and MapInfo MapXtreme.
Most of these packages require that the symbology for each layer (i.e. the colors and styles used to present features) be defined in a package-specific format, typically in some form of "mapservice" file which specifies the map layers, their source, scale limits, names and symbology. The syntax for these files varies significantly between packages as does the nature and sophistication of the symbology which is supported.
Figure 1 - Sample symbology section from a MapServer "map" file
Figure 2 - Sample symbology section from an ArcIMS "axl" file
The impact of the symbology being defined in a package-specific format is that even though we may be able to access WMS services in an "open" way, if we need to dynamically define symbology, we are forced to write code which is specific to the actual software providing the WMS service - somewhat defeating the purpose of the open standard in the first place!
The OGC Styled Layer Descriptor (SLD) specification, according to the Open Geospatial Consortium "extends the Web Map Service specification to allow user-defined symbolization of feature data. It allows users (or other systems) to determine which features or layers are rendered with which colors or symbols." SLD therefore provides an open-standards-based way to dynamically define symbology and allows us to avoid using package-specific formats. Applications are therefore able to (in theory at least) switch the underlying WMS server without needing to be re-coded.
In practice, a styled layer descriptor is an XML file which is specified in the WMS request, either directly or by providing a URL from which the XML file can be retrieved. The XML file specifies the layer(s) to which it applies and includes a series of rules which define a set of features and the symbology to be applied to them. A simple example is:
Figure 3 - Simple SLD example showing a red solid polygon fill
This example shows symbology being defined for a polygon layer. It has a single rule only, meaning that all polygons in the layer will be symbolised in the same way. The PolygonSymbolizer tag specifies the field which holds the polygons (GEOMETRY) and a simple fill with the color #ff0000, which gives the RGB values in hexadecimal - ie Red is ff (255) and both green and blue are zero.
When the WMS server applies this SLD, it will find a layer called "cma" and apply this symbology in place of that originally defined. The SLD can contain entries for many map layers, each in a separate NamedLayer tag. It is also possible to include multiple rules for a layer, each with a Filter tag to define the set of features they apply to. This allows you to set up thematic symbology based on the values of an attribute as shown in the sample below.
Figure 4 - SLD section showing two rules
In this example, an attribute of the layer, FEATURECODE, is being used to select out each subset, with a different style being applied to each. You can also add an "ELSE" rule which can provide a default symbology for all features not specifically addressed preceding rules. You can, of course, include one or more rules but no ELSE section, as a way of displaying only a subset of features.
The samples shown here have included only very simple symbology but SLD is capable of quite sophisticated symbology including multi-layer symbols and text labelling with "halo"ing and various placement options. Note that you need to check what your particular WMS server supports - most packages do not support all SLD capabilities.
Support for the SLD standard is not currently widespread. ArcIMS at version 9.2 supports SLD for simple point, line, polygon and text symbology but does not support Filters or LegendGraphics. MapServer supports simple symbology, Filters and LegendGraphics.
GeoServer, the Java-based open source WMS/WFS server uses SLDs as its native symbology definition format and supports the same aspects of SLDs as does MapServer.
At Spatial Vision we have recently been implementing SLDs in a web mapping application which uses MapServer as the WMS server and the Internet Mapping Framework for OpenGIS (IMF-OWS) application framework from Moxi Media to develop the web interface.
This application has an extensive set of map layers whose symbology is fixed and which have been defined in the MapServer map file. There is one polygon layer however against which users enter many different scores and from these scores, a set of result values are calculated. Users need to be able to view this polygon layer symbolised by any of the scores or results.
One way of achieving this would have been to statically define some 30 additional layers, each showing the same polygon layer symbolised by a different score or result and each with the details of symbology hard coded in the map file. Instead of this, we defined the polygon layer only once in map file and allowed the user to select from a dynamic list which of the values they would like to symbolise the layer by.
Figure 5 - Application layer list showing dropdown used to select score to be symbolised
IMF-OWS allows an SLD url to be set on a WMS request and we set this to the url of a Java Server Pages (JSP) script which would be called by MapServer and would dynamically generate the required SLD. The SLD url included the "id" of the value to be used. The JSP script queries the underlying database for the passed score id and retrieves the values and descriptions required for the SLD, then generates and returns the SLD content to MapServer.
The above may sound complex but in practice the user selects the desired score from the list, clicks Refresh Map and the map is redrawn with the updated symbology. A similar change to the script which generates the map legend ensures that the legend always reflects the dynamically selected symbology.
Figure 6 - Section of map screen showing polygons dynamically symbolised with related map legend
SLDs could be used to implement a number of other capabilities such as:
• Security/Privacy - generate an SLD with a FILTER clause based on the current user which hides features other than those the user is authorised to see
• User-defined symbology - build an interface to allow users to select the desired symbology from color pickers, lists etc and generate an SLD which implements the selected symbology
Some web resources to help you explore SLDs further:
• The SLD Specification from the Open Geospatial Consortium
• MapServer tutorial on SLDs including some great examples of SLD requests and the results they produce:
• An article on a software converter which can export symbology defined in ESRI ArcMap to SLD, developed by Albrecht Weiser as part of his thesis at the Institute for Spatial Information and Surveying Technology:
• Details of ArcIMS 9.2 support for SLDs:
Note that, to date, there are no graphical SLD editors available and users must edit SLDs in an XML editor and deploy them to a working service in order to view the results - a somewhat time-consuming process. There is a software converter which can export symbology defined in ESRI ArcMap to SLD, developed by Albrecht Weiser as part of a thesis at the Institute for Spatial Information and Surveying Technology. Further details can be accessed at http://arcmap2sld.geoinform.fh-mainz.de/ArcMap2SLDConverter_Eng.htm - note that Spatial Vision has not used the software provided there.
There are some excellent web resources providing examples of SLD requests and the results - MapServer provides one at http://mapserver.gis.umn.edu/docs/howto/sldhowto
What is Web 2.0?
Web 2.0 refers to the so called second generation of web
applications that are beginning to appear on the World Wide
Web. In contrast to generation one, Web 2.0 gives users a
richer more dynamic experience closer to desktop applications
than the traditional static Web pages.
In order to provide a dynamic user interface Web 2.0 applications
make use of modern web browser technologies such as Dynamic
HTML (DHTML), Cascading Style Sheets (CSS) and Asynchronous
Javascript and XML (AJAX) technology. These are now supported
in modern web browsers (Internet Explorer 5.5+ and Mozilla
Firefox).
back to top
Dynamic HTML
Dynamic HTML is a technology that enables client side code
to make dynamic changes to the content of a web page without
the need for a server round-trip.
All objects contained in a web page are accessible using
an object structure known as the Document Object Model (DOM).
Using a browser scripting language such as Javascript an application
can dynamically modify properties of a page object to alter
its appearance and content.
function
showSearch(){
$("searchWindow").style.visibility = "visible"
$("searchWindow").style.zindex = 0;
}
|
back to top
CSS
Cascading Style Sheets is the standard technique for applying
style to a web application. Generally modern web applications
aim to separate (where possible) the page ‘mark-up’
(its content) from its layout and style. This is done by creating
two separate files an HTML file containing the mark-up and
a style sheet file containing the style and layout definition.
Applying the style sheet to the page sets the page fonts and
colours as well as the position and size of the various page
elements.
Authoring a page using CSS techniques has two primary advantages:
- The layout and style of a page can be modified without
changes to the page content.
- Use of CSS layout and positioning allows for the properties
of page elements to be modified dynamically using DHTML
(described above).
Code example:
HTML, BODY {
FONT: 11px verdana, sans-serif;
MARGIN: 0;
PADDING: 0;
HEIGHT: 100%;
WIDTH: 100%;
}
|
back to top
Ajax
Asynchronous Javascript and XML is the most recent of the
Web 2.0 technologies to be popularised. In basic terms, this
technology allows for communication to occur between the client
and server without the end user being aware.
In Web 1.0 applications server communication is always visible
to the user in the form of a page reload. In contrast, Ajax
based applications can send and receive messages to and from
the server behind-the-scenes. This allows the page to behave
in a much more dynamic way by allowing it to asynchronously
retrieve new data or perform validations while maintaining
the current page view.
Code example:
req
= new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = this.processStateChange;
req.open("GET", url, true);
req.send();
}
|
back to top
Web 2.0 Examples
Figure
1
Google Calendar is a full featured web based calendar application.
Google calendar uses DHTML and CSS to provide a desktop application
style interface and Ajax to save calendar changes to the server
behind-the-scenes
Figure
2
Google Maps is a web based mapping client, the application
makes extensive use of Ajax to retrieve surrounding map images
behind the scenes. This allows the user to pan the map without
the requirement for a browser refresh.
Try it yourself
Figure
3
Save the code below to an HTML file (e.g. ‘web2.html’)
and open it in your browser, this simple example demonstrates
use of DHTML code and CSS based styling to dynamically change
the page colour.
<html>
<head>
<script Language="JavaScript">
function changeColour(colour) {
var colouredBoxObj = document.getElementById('colouredBox');
colouredBox.style.backgroundColor = colour;
}
</script>
<div style="font: 20px verdana,sans-serif;
text-align:center; width: 100%;">Web 2.0 Example</div>
</head>
<body style="height: 100%; width: 100%">
<div id="colouredBox" style="position:
absolute; top: 25%; left: 25%; height:50%; width:50%;
text-align:center; border:#B8C4BD 1px solid;">
<span><input type="button" value="Red"
onclick="changeColour('red')"/></span>
<span><input type="button" value="Green"
onclick="changeColour('green')"/></span>
<span><input type="button" value="Blue"
onclick="changeColour('blue')"/></span>
</div>
</body>
<html>
|
Clicking the ‘Red’, ‘Green’ &
‘Blue’ buttons dynamically changes the box colour
using DHTML and CSS.
back to top
Spatial Vision & Web 2.0
Spatial Vision has developed (and is currently undertaking)
a number of Web 2.0 applications. These applications feature
very dynamic interfaces making use of DHTML, CSS & Ajax
to deliver functionality not previously possible in the web
environment. Spatial Vision has invested in achieving the
development skills necessary to construct applications that
can deliver Web 2.0 functionality.
back to top
Further information
• A comprehensive definition and links from Wikipedia:
http://en.wikipedia.org/wiki/Web_2.0
• An excellent article on Ajax from the inventors
of the term
http://www.adaptivepath.com/publications/essays/archives/000385.php
• A frequently updated Blog on Web 2.0 sites and technologies
http://www.programmableweb.com/
back to top
Copyright © Spatial Vision, Wednesday, 26-July-2006 |
