You are here

Put Your Map Anywhere with Openlayers II--Interact with Map Server

Blog Terms: 

Part I tells you one easy way to put GoogleMap, VE or other Mapservers in your blog or site, that is not enough for our Gisers. If you have built your own map server by using UMN MapServer or SUAS MapServer, or you have collected some useful WMS servers, Openlayers can help you create map viewer client (please download Openlayers toolkit firstly).

One OGC standard WMS should have these parameters:
VERSION=1.1.1
REQUEST=GetMap
BBOX=3504755.432,5395574.262,3521889.2572,5415182.5352
SRS=EPSG:2805
HEIGHT=1000
WIDTH=1000
FORMAT=image/png
LAYERS=GG101_GLEIS,GH201_HALTESTELLE&
TRANSPARENT=TRUE
EXCEPTIONS=application/vnd.ogc.se_xml
STYLES=default

The bold fonts are required parameters,  the others are optional parameters. Openlayers also conform to OGC speciafication, for every WMS, these parameters will not be changed: version, request, format and they have been set to be default values. And these parameters such as bbox. srs and layers are different from each other depending on the different WMS servers.
Here is one lite example, how to build one WMS client. You should know a little bit of HTML and Javascript, but don't care, it is easy.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
        #map {
            width: 800px;
            height: 475px;
            border: 1px solid black;
        }
    </style>
   <!--//This is your Openlayers' path-->
    <script src="../lib/OpenLayers.js"></script>
  
<!--//You can also use such file online-->
  
<!--<script src="http://openlayers.org/dev/lib/OpenLayers.js"></script> -->
    <script type="text/javascript">
        <!--
      
//define X&longitude coordinate
        var lon = 9.182057;
     
//define Y&latitude coordinate
        var lat = 48.832420;
     
//define zoom level
        var zoom = 5;
        var map, layer;

        function init(){
           //initialize one new map object
            map = new OpenLayers.Map( $('map') );
          
//set WMS name, Url, and layer name
            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
          
//Add layers to map object
            map.addLayer(layer);
          
//Set the center point
            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
        }
        // -->
    </script>
  </head>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>

Open this html file, it will look like this:

Now we try to connect to the SUAS WMS, here is one WMS of stuttgart city map:
http://suasdemo.easywms.com/Demo/wms_getmap_r.php?SRS=SRS_not_defined&SQuery=Submit+Query

The parameters Openlayers needs are listed here:
VERSION=1.1.1
REQUEST=GetMap
BBOX=-44, -4308.16, 3071.56, 25
SRS=SRS_not_defined
LAYERS=autobahnen,beschriftung_oeffentliche_gebaeude,bundesstrassen,buslinien,deutsche_bahn,flughafen,
friedhof,gruenflaechen,oeffentliche_gebaeude,orte,orte_texte,private_gebaeude,s_bahn,sonstige_gebaeude,
sportflaechen,strassen,u_bahn,ueberoertliche_strassen,wald,wasserflaechen
FORMAT=image/png
TRANSPARENT=TRUE

Using the same method to input the parameters, the html code:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="imagetoolbar" content="no"> <!--ie image gizmo OFF!-->
    <style type="text/css">
    body { font-family: sans-serif; font-weight: bold; font-size: .8em; }
    body {
    border: 0px;
    margin: 0px;
    padding: 0px;
    }
    #map {
    width: 450;
    height: 350;
    border: 0px;
    padding: 0px;
    }
    </style>

    <script src="http://openlayers.org/dev/lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, stlayer;

        function init(){
        // set the center point as the center of boundry box
            var lon = (-44+3071.56)/2;
            var lat = (-4308.16+25)/2;
            var zoom = 3;
            map = new OpenLayers.Map( $('map'), {maxExtent: new OpenLayers.Bounds(-44, -4308.16, 3071.56, 25),
                                                                                    maxResolution: "auto",
                                                                                    projection:"SRS_not_defined" } );
            var stlayer = new OpenLayers.Layer.WMS( "SUAS",
                "http://suasdemo.easywms.com/WMS/getmapcap.php?",
                {layers:
'autobahnen,beschriftung_oeffentliche_gebaeude,bundesstrassen,buslinien,deutsche_bahn,flughafen,friedhof,gruenflaechen,
oeffentliche_gebaeude,orte,orte_texte,private_gebaeude,s_bahn,sonstige_gebaeude,sportflaechen,strassen,u_bahn,
ueberoertliche_strassen,wald,wasserflaechen
', request: 'getmap' , transparent: "false", format: "image/png"} );
               
            map.addLayer(
stlayer);
            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
        }
    </script>
  </head>
<body onload="init()">
    <div id="map"></div>
</body>
</html>

Maybe you still remember one example in part I that the user could change the center point and zoom level:

<iframe
src="http://openlayers.org/viewer/?center=42.3,-71&zoom=6"
width="100%" height="250"
scrolling="no"
marginwidth="0" marginheight="0"
frameborder="0">
</iframe>

We need add one function to parse the parameters in url:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="imagetoolbar" content="no"> <!--ie image gizmo OFF!-->
    <style type="text/css">
    body { font-family: sans-serif; font-weight: bold; font-size: .8em; }
    body {
    border: 0px;
    margin: 0px;
    padding: 0px;
    }
    #map {
    width: 450;
    height: 350;
    border: 0px;
    padding: 0px;
    }
    </style>

    <script src="http://openlayers.org/dev/lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, stlayer;

        function init(){
        // ger center point from url, if not, use center of bbox
            var theArgs = getArgs();
            var lon = theArgs.lon ? theArgs.lon : (-44+3071.56)/2;
            var lat = theArgs.lat ? theArgs.lat : (-4308.16+25)/2;
            var zoom = theArgs.zoom ? theArgs.zoom : 3;

            map = new OpenLayers.Map( $('map'), {maxExtent: new OpenLayers.Bounds(-44, -4308.16, 3071.56, 25),
                                                                                    maxResolution: "auto",
                                                                                    projection:"SRS_not_defined" } );
            var stlayer = new OpenLayers.Layer.WMS( "SUAS",
                "http://suasdemo.easywms.com/WMS/getmapcap.php?",
                {layers:
'autobahnen,beschriftung_oeffentliche_gebaeude,bundesstrassen,buslinien,deutsche_bahn,flughafen,friedhof,gruenflaechen,
oeffentliche_gebaeude,orte,orte_texte,private_gebaeude,s_bahn,sonstige_gebaeude,sportflaechen,strassen,u_bahn,
ueberoertliche_strassen,wald,wasserflaechen
', request: 'getmap'
, transparent: "false", format: "image/png"} );
               
            map.addLayer(
stlayer);
            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
        }
       
// parse the parameters in URL
        function getArgs() {
            var args = new Object();
            var query = location.search.substring(1);  // Get query string.
            var pairs = query.split("&");              // Break at ampersand. //+pjl
       
            for(var i = 0; i < pairs.length; i++) {
                var pos = pairs[i].indexOf('=');       // Look for "name=value".
                if (pos == -1) continue;               // If not found, skip.
                var argname = pairs[i].substring(0,pos);  // Extract the name.
                var value = pairs[i].substring(pos+1); // Extract the value.
                args[argname] = unescape(value);          // Store as a property.
            }
            return args;                               // Return the object.
        }

    </script>
  </head>
<body onload="init()">
    <div id="map"></div>
</body>
</html>

Now you can reset center point and zoom level when you use iframe to load the map:

<iframe
src="/sites/default/files/File/blog/gis/webgis/openlayers/
stuttgartChangeCenter.html?lon=1000&lat=-1000&zoom=2
"
width="450" height="350"
scrolling="no"
marginwidth="0" marginheight="0"
frameborder="0">
</iframe>



Of course, you can extend the funtion so that you can define layers in Url.
var layers = theArgs.layers ? theArgs.layers : '.....................................................................';

We can add some control pannel to make the map viewer more professional, overview, zoom lever, area selection....., just add these codes in the html file:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="imagetoolbar" content="no"> <!--ie image gizmo OFF!-->

    <style type="text/css">
    body { font-family: sans-serif; font-weight: bold; font-size: .8em; }
    body {
    border: 0px;
    margin: 0px;
    padding: 0px;
    }
    #map {
    width: 450;
    height: 450;
    border: 0px;
    padding: 0px;
    }
    </style>

    <script src="http://openlayers.org/dev/lib/OpenLayers.js"></script>
    <script type="text/javascript">
       
        var map, stlayer;

        function init(){
        // these should be object methods or something
            var lon = (-44+3071.56)/2;
            var lat = (-4308.16+25)/2;
            var zoom = 3;
            map = new OpenLayers.Map( $('map'), { controls: [],
                                 maxExtent: new OpenLayers.Bounds(-44, -4308.16, 3071.56, 25),                                            
                                 maxResolution: "auto", projection:"SRS_not_defined"} );

            map.addControl(new OpenLayers.Control.PanZoomBar());
            map.addControl(new OpenLayers.Control.MouseToolbar());
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition());
            map.addControl(new OpenLayers.Control.OverviewMap());

            var stlayer = new OpenLayers.Layer.WMS( "SUAS",
                "http://suasdemo.easywms.com/WMS/getmapcap.php?",
                {layers:
'autobahnen,beschriftung_oeffentliche_gebaeude,bundesstrassen,buslinien,deutsche_bahn,flughafen,friedhof,gruenflaechen,
oeffentliche_gebaeude,orte,orte_texte,private_gebaeude,s_bahn,sonstige_gebaeude,sportflaechen,strassen,u_bahn,
ueberoertliche_strassen,wald,wasserflaechen', request: 'getmap', transparent: "false", format: "image/png"} );
               
            map.addLayer(stlayer);
            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
            if (!map.getCenter()) map.zoomToMaxExtent();
        }
    </script>

  </head>
<body onload="init()">
    <div id="map"></div>
</body>
</html>

Now you can test Openlayers with your WMS server, in Part III, we will tough how to combine Multi-maps or Multilayers.

Comments

the others are optional parameters. Openlayers also conform to OGC speciafication, for every WMS, these parameters will not be changed: version, request, format and they have been set to be default values. And these parameters such as bbox. srs and layers are different from each other depending on the different WMS servers.

thanls.good good article really beatifulllll {;)}