5. SYMBOLSET "../etc/symbols.txt"
EXTENT -180 -90 180 90
UNITS DD
SHAPEPATH "../data"
IMAGECOLOR 255 255 255
FONTSET "../etc/fonts.txt"
#
# Start of web interface definition
#
WEB
IMAGEPATH "/ms4w/tmp/ms_tmp/"
IMAGEURL "/ms_tmp/"
END
#
# Start of layer definitions
#
LAYER
NAME 'global-raster'
TYPE RASTER
STATUS DEFAULT
DATA bluemarble.gif
END
END
Checking a map file
There are a number of ways to check that the basic syntax of a map file is correct:
1.Shp2img
This is a utility bundled with most mapserver installations that generates an image from a map file. The
syntax is as follows:
$shp2img -m /location/of/your/mapfile.map -o test.png
2.Checking using a browser
This method is more complex but will generate an error message rather than a blank image in the event
of an error, so can be more informative. The basic syntax is as follows, but note that this differs slightly
from operating system to operating system:
http://yourserver.com/cgibin/mapserv?map=/full/path/of/your/mapfile.map&mode=map
Connecting to a PostgreSQL data source using Mapserver
Mapserver uses the 5 parameters defined above to connect to a PostGISenabled PostgreSQL data
source. The CONNECTIONTYPE parameter must also be used, and set to PostGIS. Additionally the
DATA parameter must include an SQL query that selects some or all of the geometry from the
specified table. Note that the SELECT keyword is omitted from the query, and all the query terms must
be in lowercase.
LAYER
NAME "province"
STATUS ON
TYPE POLYGON
6. CONNECTIONTYPE POSTGIS
CONNECTION "host=localhost port=5432 dbname=canada user=postgres
password=postgres"
DATA "the_geom from province"
END
Task: Find the extent of the counties data. In the template map file provided, add a connection to
the counties data, change the extent, and check it using shp2img and using a web browser.
Web Servers and Web Pages
Introduction
A web server is a program that sits on a host and responds to remote requests from a client pc using http
(hypertext transfer protocol). This is normally in the form of a web page that is then displayed in a
browser. The web page simply needs to be stored in a location accessible to the web server.
The simplest form of web page generally has the suffix html (it is written in hypertext markup
language). The client requests a page using its URL (Uniform Resource Locator usually the name of
the web site, plus the directory the page is stored in, plus the name of the page) and the web server
sends that page to the client. The client browser renders the page, and sends off further requests for the
additional resources referred to in the page, such as images, or styling information.
Basic structure of a web page
Web pages have a very simple predefined structure. Like map files, they contain a hierarchy of
elements that perform different functions, in this case defined by opening and closing tags. There can
be only one set of each tags. The basic structure is as follows:
<html>
<head>
<title> My Home Page </title>
</head>
<body>
HELLO WORLD!
</body>
</html>
The <head> section is used to tell the browser information about the page and how it should be run. In
addition to the title (which will appear in the title bar of the browser, it may contain metadata about the
language of the page, and links to external files for styling or scripting.
In the <body> section of the page, everything outside of a pair of angle brackets will be displayed on
the web page. As well as plain text, such as in the example above, other attributes (keywords in angle
brackets) can be used for styling, formatting text as a link to another web page, or showing an image.
8. the map.
3. A map is created using JavaScript.
4. A layer is created using JavaScript, and then added to the map.
5. The map zooms out as far as possible.
6. The JavaScript function gets called only after the body tag’s onLoad event.
9. For example:
<html>
<head>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init() {
map = new OpenLayers.Map('map');
mylayer = new OpenLayers.Layer.MapServer( "World Map",
"http://localhost/cgibin/mapserv.exe",
{map: 'C:/world_mapfile.map'});
map.addLayer(mylayer);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="map" style="width: 600px; height: 300px"></div>
</body>
</html>
Step 1 (red): Getting the OpenLayers Library
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
The URL points to the location of the JavaScript file that loads OpenLayers.
Step 2 (orange): Positioning the map in the web page
<div id="map" style="width: 600px; height: 300px"></div>
The <div> tag is a container with the id “map” for the map that we are creating in our page. Later,
when we initialize the JavaScript map object, we will give it this id.
The size of the map is determined by the size of the element that contains it. Here, we have set the size
of the map to be 600 pixels by 300 pixels.
Step 3 (yellow): The Map Object
map = new OpenLayers.Map('map');
There are lots of "maps" in this statement! This line creates a new OpenLayers.Map object with the to
go in the div 'map' and makes it a variable called map so it can be referred to elsewhere in the code.
The OpenLayers.Map object, tells the openlayers javascript that we are using the Map class. This allows
us to access a whole library of prebuilt code without needing to write the code ourselves.
10. Step 4 (blue): Creating a Layer
mylayer = new OpenLayers.Layer.MapServer( "World Map",
"http://localhost/cgibin/mapserv.exe", {map: 'C:/world_mapfile.map'} );
map.addLayer(mylayer);
Like a Mapserver map file, OpenLayers organizes a single map into several layers or data sources. In
this case, we are adding a new object of the Mapserver layer class, telling it the location of the
mapserver executable, the location of the map file, and the layer we want from it (“World Map”). We
are then assigning it the variable name mylayer, which is then used to load the layer in the map.
Different layer classes need different parameters to be given. Examples of many different layer types
can be seen on the openlayers web site (http://openlayers.org/dev/examples/)
Step 5 (purple): Positioning the Map
map.zoomToMaxExtent();
This code tells the map to zoom out to its maximum extent, which by default is the entire world. It is
possible to set a different maximum extent.
OpenLayers maps need to be told what part of the world they should display before anything will
appear on the page. Calling map.zoomToMaxExtent() is one way to do this. Alternative ways that offer
more precision include using zoomToExtent() and setCenter().
Step 6 (green): Loading the Map
<body onload="init()">
In order to ensure that your document is ready, it is important to make sure that the entire page has been
loaded before the script creating the map is executed.
We ensure this by putting the mapcreating code into a function, and then calling it only when the
<body> element is fully loaded.
Task: Copy the openlayers.html file in your web directory to openlayers_ms.html and adapt to
use your mapserver file then display the results in the web browser.
Base Mapping
Displaying your data in a web map is one thing, but it looks much better when overlain on some base
mapping or satellite data. Openlayers can access base mapping from a variety of different mapping and
imagery providers, such as Google, Yahoo, Microsoft, OpenStreetmap and so on.
Overlaying data onto base mapping brings an additional layer of complexity into the mix as the base
mapping and your data may not necessarily be in the same coordinate system. In fact it is quite unlikely
that they will be, as your data is likely to be smaller in scale and the base mapping is likely to be world
wide.
Commercial base layers tend to be in Spherical Mercator coordinates, which has the EPSG code 900913
(it looks like GOOGLE as an aide memoire). Your data can be projected either serverside by the map
server or clientside by the openlayers code.