Is there a way to request GetFeatureInfo from a WMS service with the Google maps api v3?
[GIS] WMS GetFeatureInfo and Google maps api V3
getfeatureinfogoogle mapswms
Related Solutions
The WMS spec does not provide any direction on how a server should implement the GetFeatureInfo response.
In some systems the "pixel tolerance" is a function of the client (web browser or desktop client) - a clicked point can be buffered and the resulting polygon is sent as the query geometry. However, GetFeatureInfo only accepts a point input so that's a dead end.
However, if you scale down the image size in your GetFeatureInfo request, and also scale down the X and Y coordinate of your query, you can effectively increase the pixel tolerance. Consider the following queries based on the Cities layer for the region surrounding Minneapolis/St.Paul:
WMS GetImage, 400 x 400 pixels
If I issue a GetFeatureInfo request at 138, 145 on a 400x400 map gets me Elk River:
WMS GetFeatureInfo, 138,145, 400x400 - gets results
If I re-issue the request at 140, 140 I get no results:
WMS GetFeatureInfo, 140,140, 400x400 - no results
However, if I halve all values and issue the request at 70,70 on a 200x200 map, it works:
WMS GetFeatureInfo, 70,70, 200x200 - gets results
It's extra work to do this sort of viewport adjustment on-the-fly but should do what you want.
Ok Here is the code for getfeatureinfo and CQL Filter for a layer with EPSG 4326 and Google Maps behind:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers WMS Feature Info Example (GeoServer)</title>
<script src='http://maps.google.com/maps/api/js?v=3.2&sensor=false'></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />
<style type="text/css">
#map {
clear: both;
position: relative;
width: 100%;
height: 90%;
border: 1px solid black;
}
#wrapper {
width: 619px;
}
#location {
float: right;
}
#cql {
width: 400px;
}
</style>
<script type="text/javascript">
var map;
var harta;
var gh;
var xx;
function load() {
map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
gh= new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels:50});
harta = new OpenLayers.Layer.WMS("adi",
"http://localhost:8080/geoserver/adi/wms",
{'layers': 'adi:vladaia4326', transparent: true, format: 'image/gif'},
{isBaseLayer: false}
);
map.addLayers([gh, harta]);
// var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
// map.setCenter (lonLat, zoom);
map.events.register("mousemove", map, function(e) {
var position = this.events.getMousePosition(e);
OpenLayers.Util.getElement("coords2").innerHTML = position;});
map.addControl(new OpenLayers.Control.Permalink());
map.addControl(new OpenLayers.Control.MousePosition({div:document.getElementById("coords")}));
// Tie click event to WMS GetFeatureInfo call
map.events.register('click', map, function (e) {
document.getElementById('nodelist').innerHTML = "Loading... please wait...";
wmsurl="http://localhost:8080/geoserver/adi/wms"
var url = wmsurl
+ "?REQUEST=GetFeatureInfo"
+ "&EXCEPTIONS=application/vnd.ogc.se_xml"
+ "&BBOX=" + map.getExtent().toBBOX()
+ "&X=" + parseInt(e.xy.x)
+ "&Y=" + parseInt(e.xy.y)
+ "&INFO_FORMAT=text/html"
+ "&QUERY_LAYERS=adi:vladaia4326"
+ "&LAYERS=adi:vladaia4326"
+ "&FEATURE_COUNT=50"
+ "&SRS=EPSG:900913"
+ "&STYLES="
+ "&WIDTH=" + map.size.w
+ "&HEIGHT=" + map.size.h;
window.open(url,
"getfeatureinfo",
"location=0,status=0,scrollbars=1,width=800,height=300");
}); //getfeatureinfo s-a terminat. trecem la urmatorul
}
function updateFilter(){
var filter = document.getElementById('filter').value;
if (filter =="")
{
harta.mergeNewParams({'CQL_FILTER': null});
}
else
{
harta.mergeNewParams({'CQL_FILTER': filter});
}
}
function resetFilter() {
document.getElementById('filter').value = "";
updateFilter();
}
</script>
</head>
<body onLoad="load()">
<div id="map" class="smallmap"></div>
Test
<div id="wrapper">
<div id="location">location</div>
</div>
<input id="filter" type="text">
<input type="button" value="update" onClick="updateFilter()">
<input type="button" value="reset" onClick="resetFilter()">
<input type="button" value="mesaj" onClick="evasdaent()">
<div id="location">location</div>
<div id="coords" style="height: 1.5em;"></div>
<div id="coords2" style="height: 1.5em;"></div>
<div id="coords3" style="height: 1.5em;"></div>
<div id="nodelist" style="height: 1.5em;"></div>
</body>
</html>
Now i'm working to put labels on polygons. Wish me luck
Best Answer
Now, We can add WMS service with google map api v3. You can access here https://code.google.com/p/google-maps-api-with-wms-overlay/source/browse/