Layer Constructor

The next step to creating a viewer is to add a layer to the Map. OpenLayers supports many different data sources, from WMS to Yahoo! Maps to WorldWind. In this example, the WMS layer is used. The WMS layer is an example provided by MetaCarta.

var wms = new OpenLayers.Layer.WMS(
  "OpenLayers WMS",
  "http://labs.metacarta.com/wms/vmap0",
  {'layers':'basic'} );
map.addLayer(wms);

Map Constructor

in order to create the viewer, you must first create a map. The OpenLayers.Map constructor requires one argument: This argument must either be an HTML Element, or the ID of an HTML element. This is the element in which the map will be placed.

var map = new OpenLayers.Map('map');

Creating the Map Viewer

In order to create the viewer, you must first create a map. The OpenLayers.Map constructor requires one argument: This argument must either be an HTML Element, or the ID of an HTML element. This is the element in which the map will be placed.

var map = new OpenLayers.Map('map');

Ex. 2: Map Constructor
The next step to creating a viewer is to add a layer to the Map. OpenLayers supports many different data sources, from WMS to Yahoo! Maps to WorldWind. In this example, the WMS layer is used. The WMS layer is an example provided by MetaCarta.

var wms = new OpenLayers.Layer.WMS(
  "OpenLayers WMS",
  "http://labs.metacarta.com/wms/vmap0",
  {'layers':'basic'} );
map.addLayer(wms);

Ex. 3: Layer Constructor
The first parameter in this constructor is the URL of the WMS server. The second argument is an object containing the parameterss to be appended to the WMS request.
Finally, in order to display the map, you must set a center and zoom level. In order to zoom to fit the map into the window, you can use the zoomToMaxExtent function, which will zoom as close as possible while still fitting the full extents within the window.

OpenLayers. Layer.WMS | Constructor

Create a new WMS layer object

Example

var wms = new OpenLayers.Layer.WMS("NASA Global Mosaic",
                                   "http://wms.jpl.nasa.gov/wms.cgi",
                                   {layers: "modis,global_mosaic"});

Parameters

name	{String} A name for the layer
url	{String} Base url for the WMS (e.g.  http://wms.jpl.nasa.gov/wms.cgi)
params	{Object} An object with key/value pairs representing the GetMap query string parameters and parameter values.
options	{Ojbect} Hashtable of extra options to tag onto the layer

Creating Your First Map

The OpenLayers API has two concepts which are important to understand in order to build your first map: ‘Map’, and ‘Layer’. An OpenLayers Map stores information about the default projection, extents, units, and so on of the map. Inside the map, data is displayed via ‘Layer’s. A Layer is a data source – information about how OpenLayers should request data and display it.

Openlayers Tutorials

OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loaded from any source. MetaCarta developed the initial version of OpenLayers and gave it to the public to further the use of geographic information of all kinds. OpenLayers is completely free, Open Source JavaScript, released under a BSD-style License.

Installing Openlayers in Ubuntu

With this post I will show hot to install MapServer 4.10.3 in Ubuntu 7.10 (but this procedure should work also for previous Ubuntu versions) from repositories.
1) set Ubuntu sources needed for this software
Add universe ( http://archive.ubuntu.com/gutsy/universe ) and multiverse repositories to your sources (by default are not in Ubuntu)

sudo gedit /etc/apt/sources.list

and uncomment this two lines:

deb http://archive.ubuntu.com/ubuntu/ gutsy-security main restricted universe multiverse
deb-src http://archive.ubuntu.com/ubuntu/ gutsy-security main restricted universe multiverse

save the sources.list file and then then update your sources:

sudo apt-get update

2) Install MapServer
now download and install MapServer:

sudo apt-get install cgi-mapserver mapserver-bin mapserver-doc php5-mapscript python-mapscript

MapServer 4.10.3 will be installed (latest of MapServer 4.x serie, the actual MapServer is at 5.0.0), as indicated by typing:

/usr/lib/cgi-bin/mapserv -v
MapServer version 4.10.3 OUTPUT=GIF OUTPUT=PNG OUTPUT=JPEG OUTPUT=WBMP OUTPUT=SVG SUPPORTS=PROJ SUPPORTS=FREETYPE SUPPORTS=WMS_SERVER SUPPORTS=WMS_CLIENT SUPPORTS=WFS_SERVER SUPPORTS=WFS_CLIENT SUPPORTS=WCS_SERVER SUPPORTS=THREADS SUPPORTS=GEOS INPUT=EPPL7 INPUT=POSTGIS INPUT=OGR INPUT=GDAL INPUT=SHAPEFILE DEBUG=MSDEBUG

This is where packages have been installed:

• mapserv is installed from cgi-mapserver package in /usr/lib/cgi-bin
• command line utilities (like shp2img) are installed by the mapserver-bin package in /usr/bin
• some documentations is installed by the mapserver-cod package in /usr/share/doc/mapserver-doc

Test mapserv for cgi by typing (it should work as far you have left the default web site in Apache 2.2): http://localhost/cgi-bin/mapserv
3) Download MapServer Demo
Download the Mapserver 4.x Demo Application from the MapServer web site: http://maps.dnr.state.mn.us/mapserver_demos/workshop.zip
extract the zip file wherever you like, for example i have extracted it here: /home/corti/public_html/mapserverdemo
4) Configure Apache httpd
Configure an httpd virtual host for MapServer. For example we will create a mapserverdemo virtual host editing the default file

sudo gedit /etc/apache2/sites-available/default

this is how I created this virtual host (you may need to change path according to where you have extracted the demo zip file):

 *:80>
 ServerName mapserverdemo
 DocumentRoot /home/corti/public_html/mapserverdemo
 
  />
  Options FollowSymLinks
  AllowOverride All
 >
 
 ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
  "/usr/lib/cgi-bin">
  AllowOverride None
  Options ExecCGI -MultiViews +SymLinksIfOwnerMatch
  Order allow,deny
  Allow from all
 >
 
 ErrorLog /var/log/apache2/mapserverdemo_error.log.
 LogLevel warn
 CustomLog /var/log/apache2/mapserver_access.log combined
 ServerSignature On
>

now let’s add a mapserverdemo host:

sudo gedit /etc/hosts

and add this line:
127.0.0.1 mapserverdemo
save the file and restart Apache:

sudo /etc/init.d/apache2 restart

create a tmp directory in your mapserverdemo root, with writing permissions for the Apache user
Now if you go to http://mapserverdemo/workshop/ you will see a form, but after that it will not work as far we need to add the html form settings to our settings.
If you go at: http://mapserverdemo/cgi-bin/mapserv you should get this response:

No query information to decode. QUERY_STRING is set, but empty.

5) Configure the MapServerDemo
Now let’s configure the demo with our settings.
Edit this section in index.html file (wherever you have extracted the demo), according to your settings:

    <form name="demo" method="GET" action="/cgi-bin/mapserv" onSubmit="submit_form()">
 
   .......
 
      
      <input type="hidden" name="map" value="/home/corti/public_html/mapserverdemo/workshop/itasca.map">
      <input type="hidden" name="program" value="/cgi-bin/mapserv">
      <input type="hidden" name="root" value="/mapserver_demos/workshop">
      <input type="hidden" name="map_web_imagepath" value="/home/corti/public_html/mapserverdemo/tmp/">
      <input type="hidden" name="map_web_imageurl" value="/tmp/">

go to: http://mapserverdemo/workshop/ and the demo should work. Enjoy!