Open Layer with GeoSever
9 Comments so far
Leave a comment
July 14, 2010, 1:50 pm
Filed under: Openlayer | Tags: geoserver with openlayer, openlayer geoserver, openlayer with geosever, openlayer WMSGetFeatureInfo, WMSGetFeatureInfo
Filed under: Openlayer | Tags: geoserver with openlayer, openlayer geoserver, openlayer with geosever, openlayer WMSGetFeatureInfo, WMSGetFeatureInfo
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
9 Comments so far
Leave a comment
Isn’t the geoproxy a liddle bit dangerous if someone passes a path to to local config-file as parameter?
Comment by mo-cacher February 2, 2011 @ 3:33 pm@mo-cacher
Comment by khayer February 28, 2011 @ 12:00 pmEasily can be prevent confidential files by apply filtering concept. We can create an array which contain block files list and we would not server those file any more.
umm, sorry but when i call the geoproxy.php file the $res variable didt give any result…
exactly what it used for?
<?php
Comment by kouji March 17, 2011 @ 10:09 am$url=$_GET["url"];
$res = file_get_contents($url);
echo $res;<
Dear Khayer!
Thank you so much for your clear instruction about using Open layer with Geoserver, this is very good resource for beginner of Openlayer, Geoserver and GIS.
I have followed your steps above to implement the example but I still can not successful, here are some issues that I am facing with, could you please advice me:
- There is nothing display when I copied the full source code to create new openlayer1.htm and run by this address: http://localhost:8080/geoserver/openlayers/openlayer1.htm. (I got the openlayer folder and put inside geoserver/openlayer)
- I saw that you have 5 calls to http://localhost:8088/geoserver/wms, but I have nothing named wms in geoserver or openlayer folder, so is it my problem?
- Could you please tell me tho code that you use to get the map of Bangladesh so that I can custom it and display Vietnam map.
- Do I have to create new geoproxy.php and put in the same folder with html file.
Thank you so much.
Regards,
Comment by Trong April 5, 2011 @ 10:09 amTrong
Khayer, you are a nice guy. Thanks for your idea about geoproxy.php.
Comment by Evilinside April 23, 2011 @ 10:20 amhello sir this post really helps me alot ,basically i m a beginner in this topic ,now it gives some idea reg this but one more thing i need from u can u plz give detaails about how to create buffer in layers plz !!!!
Comment by Priyamadhaiyan May 11, 2012 @ 1:15 pmThank you very very match!!!! This tutorial is a best!
Comment by Essohana ALAYI August 11, 2012 @ 1:37 amit is nice and very useful for us thank you
Comment by hareesh September 6, 2012 @ 12:04 pmHello sir, It is nice and very useful for me this post really helps me alot ,basically i m a beginner in openlayers,now it gives some idea about OpenLayers – Cross Domain but one more thing i need from u can u plz give details about how to Configure WFS ProxyHost with php (Wamp/Xampp) on Windows plz!!
Comment by Priya April 1, 2013 @ 3:51 pm