Category: Openlayer

Open Layer with GeoSever

by khayer, posted in Openlayer

GeoSever is very good map repository. It supports most of the request including WMS. Open layer work well with Geoserver. Here I try to give a sample to use openlayer with Geoserver especially for beginner.

Add MapSever WMS Layer:
The main goal is that we will add geoserver layer as wms in the open layer. So the layer definition should be,

var dist = new OpenLayers.Layer.WMS(
	"dist_GEO - Tiled", "http://localhost:8088/geoserver/wms",
	{
		srs: 'EPSG:4326',
		width: '395',
		styles: '',
		height: '512',
		layers: 'bdadmin:dist_GEO',
		format: format,
		tiled: 'true',
		tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom,
		isBaseLayer: true,
		visibility: true
	},
	{
		buffer: 0,
		displayOutsideMaxExtent: true
		}
	);

This will include Bangladesh district boundary as base wms layer. Note that we set the srs value wgs84 projection of our data. The example geoserver is running on 8088 port.

Now we add the road layer from wms as openlayer overlay layer.

var bdhw = new OpenLayers.Layer.WMS(
	"Bangladesh Highway",
	"http://localhost:8088/geoserver/wms",
	{
		transparent: 'TRUE',
		srs: 'EPSG:4326',
		layers: 'bdadmin:rds_nr_geo',
		format: format,
		isBaseLayer: false,
		visibility: true
	}
);

Now for implantation of identity feature, we need to apply some ticks. We need call a java script ajax request in click/hover event for WMSGetFeatureInfo request to Geserver. In this point, most of the develop have to face problem in cross domain. If hosting apache and geo server(tomcat) listening in sampe pc but different host, there have to take special care for cross domain ajax call. I wrote a post regarding this issue here. Please read this article first to proceed to the next steps.

infoControls = {
            click: new OpenLayers.Control.WMSGetFeatureInfo({
             url: 'http://localhost:8088/geoserver/wms',
             title: 'Identify features by clicking',
             layers: [bdhq,bdhw,dist],
             queryVisible: true,
	infoFormat:'application/vnd.ogc.gml'
           	})
};

Here we set request url to http://localhost:8088/geoserver/wms . but it cannot directly call the request. We have to go via proxy request. So, write a proxy script and bypass the request.
File: geoproxy.php

<?php
$url=$_GET["url"];
$res = file_get_contents($url);
echo $res;
?>

Now we define proxy in openlayer at top,
OpenLayers.ProxyHost = “geoproxy.php?url=”;

Below the full source code is available,


<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>MapServer Layer</title>
    <link rel="stylesheet" href="theme/default/style.css" type="text/css" />
    <style>
		.opmap
		{
			height:500px;
			width:550px;
		}
		/* The map and the location bar */
		#map {
			clear: both;
			position: relative;
			width: 400px;
			height: 450px;
			border: 1px solid black;
		}
		.mypopuphtml{
			 padding-left:5px;
			 padding-top:0px;
			 padding-bottom:0px;
			 padding-right:5px;
			 font-family:Arial;
			 font-size:8pt;
			 background-color:white;
		}

    </style>
    <script src="OpenLayers.js"></script>

    <script defer="defer" type="text/javascript">

        var zoom = 5;
        var map;
		var infoControls;
		var highlightlayer;
		var aktLayer=-1;
		// pink tile avoidance
		OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
		// make OL compute scale according to WMS spec
		OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

		OpenLayers.ProxyHost = "geoproxy.php?url=";

        function init(){

			format = 'image/png';

			var bounds = new OpenLayers.Bounds(
				88.011, 20.59,
				92.683, 26.634
			);

			var options = {
				controls: [],
				maxExtent: bounds,
				maxResolution: 0.023609375,
				projection: "EPSG:4326",
				units: 'degrees'
			};

			map = new OpenLayers.Map('map', options);

			// setup tiled layer
			var dist = new OpenLayers.Layer.WMS(
				"dist_GEO - Tiled", "http://localhost:8088/geoserver/wms",
				{
					srs: 'EPSG:4326',
					width: '395',
					styles: '',
					height: '512',
					layers: 'bdadmin:dist_GEO',
					format: format,
					tiled: 'true',
					tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom,
					isBaseLayer: true,
					visibility: true
				},
				{
					buffer: 0,
					displayOutsideMaxExtent: true
				}
			);

			var bdhw = new OpenLayers.Layer.WMS(
				"Bangladesh Highway",
				"http://localhost:8088/geoserver/wms",
				{
					transparent: 'TRUE',
					srs: 'EPSG:4326',
					layers: 'bdadmin:rds_nr_geo',
					format: format,
					isBaseLayer: false,
					visibility: true
				}
			);

            var bdhq = new OpenLayers.Layer.WMS(
                "Bangladesh Dist HQ",
                "http://localhost:8088/geoserver/wms",
                {
                    transparent: 'TRUE',
                    srs: 'EPSG:4326',
					layers: 'bdadmin:dist_hq_geo',
					format: format,
					isBaseLayer: false,
					visibility: true
                }
            );

			highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {
				displayInLayerSwitcher: false,
				isBaseLayer: false
				}
			);

		   //map.addLayers([gphy, gmap, ghyb, gsat]);
           map.addLayers([dist,bdhw,bdhq,highlightLayer]);

			// build up all controls
			map.addControl(new OpenLayers.Control.PanZoomBar({
				position: new OpenLayers.Pixel(2, 15)
			}));

			map.addControl(new OpenLayers.Control.Navigation());
			map.addControl(new OpenLayers.Control.Scale($('scale')));
			map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
            map.addControl( new OpenLayers.Control.LayerSwitcher() );
			map.addControl(new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')}));
			map.zoomToExtent(bounds);
			map.updateSize();

			infoControls = {
            click: new OpenLayers.Control.WMSGetFeatureInfo({
                url: 'http://localhost:8088/geoserver/wms',
                title: 'Identify features by clicking',
                layers: [bdhq,bdhw,dist],
                queryVisible: true,
				infoFormat:'application/vnd.ogc.gml',
				eventListeners: {
					getfeatureinfo: function(event) {
						map.addPopup(new OpenLayers.Popup.FramedCloud(
							"chicken",
							map.getLonLatFromPixel(event.xy),
							null,
							GenPopText(event),
							null,
							true
						));
                }}
           	}),
            hover: new OpenLayers.Control.WMSGetFeatureInfo({
                url: 'http://localhost:8088/geoserver/wms',
                title: 'Identify features by clicking',
                layers: [bdhq],
                hover: true,
                // defining a custom format options here
                formatOptions: {
                    typeName: 'water_bodies',
                    featureNS: 'http://www.openplans.org/topp'
                },
                queryVisible: true,
				infoFormat:'text/html'
            	})

			};

			for (var i in infoControls) {
				infoControls[i].events.register("getfeatureinfo", this, showInfo);
				map.addControl(infoControls[i]);
			}

			infoControls.click.activate();
			//infoControls.hover.activate();

			// Active layer combo
			populateLayer(0);
        }

		// sets the HTML provided into the nodelist element
		function setHTML(response){
			document.getElementById('nodelist').innerHTML = response.responseText;
		};

		function errorHTML(response)
		{
			alert("req erro:" + response.responseText);
		}

    	function showInfo(evt) {
			if (evt.features && evt.features.length) {

				 highlightLayer.destroyFeatures();
				 highlightLayer.addFeatures(evt.features);
				 highlightLayer.redraw();

				 $('nodelist').innerHTML = GenPopText(evt);

			} else {
				$('nodelist').innerHTML = evt.text;
			}
        }

		function GenPopText(evt){
				 var temstr="<b><i>" + evt.features[0].gml.featureType + "</i></b><br/>";
				 for(var key in evt.features[0].attributes)
				 {
					temstr += "<b>" + key + "</b>:" + evt.features[0].attributes[key] + "<br/>";
				 }
				 return temstr
		}

    </script>
  </head>

  <body onLoad="init()">
    <div id="title">Geosever Layer</div>
    <div id="layerswitcher" class="olControlLayerSwitcher"></div>
    <div id="map"></div>

    <div id="wrapper">
        <div id="location" style="float:left">location</div>
        <div id="scale" style="float:left"></div>
        <div id="scale" style="clear:both"></div>
    </div>
    <div id="nodelist">
        <em>Click on the map to get feature info</em>
    </div>

  </body>
</html>

………………………………………………
Abul Khayer
GIS Programmer
CEGIS

Open Layer with MapSever

by khayer, posted in Openlayer

Openlayer can add mapserver wms layer. In this writing, I discuss how work with mapserver wms layer using openlayer. I also wrote an article on how to create mapserver wms repository in my another writing here.

So let assume that we have a well configure mapserver repository and now want to view this maps using openlayer.

Add MapSever WMS Layer:

var dist = new OpenLayers.Layer.WMS( "Bangladesh Admin Bourndary",
	 "http://localhost:8080/cgi-bin/mapserv.exe?map=C:/OSGeo4W/apache/htdocs/openlayer/sampleapps/distwms.map",
	{layers: 'dist_geo',
		srs: 'EPSG:4326',
		format: format,
		isBaseLayer: true,
		visibility: true
	}

);

This will include Bangladesh district boundary as base wms layer. Note that we set the srs value wgs84 projection of our data.

Now we add the road layer from wms as openlayer overlay layer.

 // add road layer as overlay layer
	var bdhw = new OpenLayers.Layer.WMS(
                "Bangladesh Highway",
                "http://localhost:8080/cgi-bin/mapserv.exe",
                {
                    map: 'C:/OSGeo4W/apache/htdocs/openlayer/sampleapps/distwms.map',
                    transparent: 'TRUE',
                    layers: 'road_geo',
	    srs: 'EPSG:4326',
	   format: format
                },
                {'reproject': true}
            );

Now we implement identity features. When user click on map, we make WMSGetFeatureInfo request to mapserver.


infoControls = {
	click: new OpenLayers.Control.WMSGetFeatureInfo({
	url: 'http://localhost:8080/cgi-bin/mapserv.exe?map=C:/OSGeo4W/apache/htdocs/openlayer/sampleapps/distwms.map',
	title: 'Identify features by clicking',
	layers: [dist],
	infoFormat:'text/html',
	queryVisible: true
	})
};

Below the full source code is available,

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>MapServer Layer</title>
    <link rel="stylesheet" href="theme/default/style.css" type="text/css" />
    <style>
		.opmap
		{
			height:450px;
			width:550px;
		}
    </style>
    <script src="OpenLayers.js"></script>
    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
    <script type="text/javascript">

		/*######################
		Author: Md Abul Khayer
		Year: 2010
		khayer.wordpress.com
		#######################*/

        var map, layer;
		var infoControls;

        function init(){

			format = 'image/png';

			var bounds = new OpenLayers.Bounds(
				88.011, 20.59,
				92.683, 26.634
			);

			var options = {
				controls: [],
				maxExtent: bounds,
				maxResolution: 0.023609375,
				projection: "EPSG:4326",
			};

			map = new OpenLayers.Map('map', options);

			// Add Google Layer as baselayer
			var gphy = new OpenLayers.Layer.Google(
			"Google Physical",
			{type: G_PHYSICAL_MAP}
            );

			var gmap = new OpenLayers.Layer.Google(
                "Google Streets", // the default
                {numZoomLevels: 20}
            );

			var ghyb = new OpenLayers.Layer.Google(
                "Google Hybrid",
                {type: G_HYBRID_MAP, numZoomLevels: 20}
            );

			var gsat = new OpenLayers.Layer.Google(
                "Google Satellite",
                {type: G_SATELLITE_MAP, numZoomLevels: 22}
            );

            map.addLayers([gphy, gmap, ghyb, gsat]);

			// Add Custom base layer. Bangladesh District boundary.
			var dist = new OpenLayers.Layer.WMS( "Bangladesh Admin Bourndary",
                    "http://localhost:8080/cgi-bin/mapserv.exe?map=C:/OSGeo4W/apache/htdocs/openlayer/sampleapps/distwms.map",
					{layers: 'dist_geo',
						srs: 'EPSG:4326',
						format: format,
						isBaseLayer: true,
						visibility: true
					}

			);

            // add road layer as overlay layer
			var bdhw = new OpenLayers.Layer.WMS(
                "Bangladesh Highway",
                "http://localhost:8080/cgi-bin/mapserv.exe",
                {
                    map: 'C:/OSGeo4W/apache/htdocs/openlayer/sampleapps/distwms.map',
                    transparent: 'TRUE',
                    layers: 'road_geo',
					srs: 'EPSG:4326',
					format: format
                },
                {'reproject': true}
            );

            // Bangladesh distric head queater as overlay layer.
			var bdhq = new OpenLayers.Layer.WMS(
                "Bangladesh Dist HQ",
                "http://localhost:8080/cgi-bin/mapserv.exe",
                {
                    map: 'C:/OSGeo4W/apache/htdocs/openlayer/sampleapps/distwms.map',
                    transparent: 'TRUE',
                    layers: 'dist_hq_geo',
					srs: 'EPSG:4326',
					format: format
                },
                {'reproject': true}
            );

			// Get identities of the map. Can be either click or hover is activated.
			infoControls = {
				click: new OpenLayers.Control.WMSGetFeatureInfo({
					url: 'http://localhost:8080/cgi-bin/mapserv.exe?map=C:/OSGeo4W/apache/htdocs/openlayer/sampleapps/distwms.map',
					title: 'Identify features by clicking',
					layers: [dist],
					infoFormat:'text/html',
					queryVisible: true
				}),
            	hover: new OpenLayers.Control.WMSGetFeatureInfo({
                url: 'http://localhost:8080/cgi-bin/mapserv.exe?map=C:/OSGeo4W/apache/htdocs/openlayer/sampleapps/distwms.map',
                title: 'Identify features by clicking',
                layers: [dist],
                hover: true,
				infoFormat: 'text/html',
                queryVisible: true
            	})
			}

            map.addLayers([dist, bdhw, bdhq]);
			map.zoomToMaxExtent();
            map.addControl( new OpenLayers.Control.LayerSwitcher() );
			map.addControl(new OpenLayers.Control.Navigation());
			map.addControl(new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')}));

			map.addControl(new OpenLayers.Control.Scale($('scale')));
			map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));

			for (var i in infoControls) {
				infoControls[i].events.register("getfeatureinfo", this, showInfo);
				map.addControl(infoControls[i]);
			}

        	infoControls.click.activate();

        }

		function showInfo(evt) {
			if (evt.features && evt.features.length) {
				 //highlightLayer.destroyFeatures();
				 //highlightLayer.addFeatures(evt.features);
				 //highlightLayer.redraw();

				 $('nodelist').innerHTML=evt.text;
			} else {
				$('nodelist').innerHTML=evt.text;
			}
    	}

    </script>
  </head>

  <body onLoad="init()">
    <div id="title">MapServer WMS Layer with Google map.</div>
    <div id="layerswitcher" class="olControlLayerSwitcher"></div>
    <div id="map" class="opmap"></div>

    <div id="wrapper">
        <div id="location" style="float:left">location</div>
        <div id="scale" style="float:left"></div>
        <div id="scale" style="clear:both"></div>
    </div>
    <div id="nodelist">
        <em>Click on the map to get feature info</em>
    </div>

  </body>
</html>

………………………………………………
Abul Khayer
GIS Programmer
CEGIS