I have a GeoTIFF published by Geoserver 2.2 and being used by Leaflet via WMS. How can I get Geoserver to return the raster value at a lat/long point?

I'm guessing it has to do with using WCS, but no examples seem to exist for doing this!

This will be similar to querying PostGIS with ST_Value(raster, ST_SetSRID(ST_Point(lon,lat),4326)). I dont really want to import the same raster into PostGIS just to find the raster value at a point. Or is this the recommended solution?


4 Answers 4


GeoServer will serve the raster value as a GetFeatureInfo of the WMS service. To see this in action, go to the Layer-Preview page, select your layer and just click on the map. On the bottom, you will see your raster value (either RGB triplet or your TIFF channel(s)).

Below is an example from http://projects.bryanmcbride.com/leaflet/wms_info.html . This link expire but the internet archive yields the javascript code below

        //web.archive.org/web/20130525053623/http://var/ map = new L.Map('map');
    var map, popup;

    var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
        cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
        cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});

    var mapquestUrl = 'https://web.archive.org/web/20130525053623/http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
        mapquestAttribution = "Data CC-By-SA by <a href='https://web.archive.org/web/20130525053623/http://openstreetmap.org/' target='_blank'>OpenStreetMap</a>, Tiles Courtesy of <a href='https://web.archive.org/web/20130525053623/http://open.mapquest.com/' target='_blank'>MapQuest</a>",
        mapquest = new L.TileLayer(mapquestUrl, {maxZoom: 18, attribution: mapquestAttribution, subdomains: ['1','2','3','4']});

    var nexrad = new L.TileLayer.WMS("https://web.archive.org/web/20130525053623/http://suite.opengeo.org/geoserver/usa/wms", {
        layers: 'usa:states',
        format: 'image/png',
        transparent: true

    map = new L.Map('map', {
        center: new L.LatLng(44.095475729465, -72.388916015626), 
        zoom: 7,
        layers: [mapquest, nexrad],
        zoomControl: true

    map.addEventListener('click', onMapClick);

    popup = new L.Popup({
        maxWidth: 400

    /*function onMapClick(e) {
        var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';
        var BBOX = map.getBounds()._southWest.lng+","+map.getBounds()._southWest.lat+","+map.getBounds()._northEast.lng+","+map.getBounds()._northEast.lat;
        var WIDTH = map.getSize().x;
        var HEIGHT = map.getSize().y;
        var X = map.layerPointToContainerPoint(e.layerPoint).x;
        var Y = map.layerPointToContainerPoint(e.layerPoint).y;
        var URL = 'https://web.archive.org/web/20130525053623/http://suite.opengeo.org/geoserver/usa/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&LAYERS=usa:states&QUERY_LAYERS=usa:states&STYLES=&BBOX='+BBOX+'&FEATURE_COUNT=5&HEIGHT='+HEIGHT+'&WIDTH='+WIDTH+'&FORMAT=image%2Fpng&INFO_FORMAT=text%2Fhtml&SRS=EPSG%3A4326&X='+X+'&Y='+Y;
        popup.setContent("<iframe src='"+URL+"' width='300' height='100' frameborder='0'><p>Your browser does not support iframes.</p></iframe>");


    function onMapClick(e) {
        var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';
        var BBOX = map.getBounds().toBBoxString();
        var WIDTH = map.getSize().x;
        var HEIGHT = map.getSize().y;
        var X = map.layerPointToContainerPoint(e.layerPoint).x;
        var Y = map.layerPointToContainerPoint(e.layerPoint).y;
        var URL = '?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&LAYERS=usa:states&QUERY_LAYERS=usa:states&STYLES=&BBOX='+BBOX+'&FEATURE_COUNT=5&HEIGHT='+HEIGHT+'&WIDTH='+WIDTH+'&FORMAT=image%2Fpng&INFO_FORMAT=text%2Fhtml&SRS=EPSG%3A4326&X='+X+'&Y='+Y;
        URL = escape(URL);
            url: "wms_proxy.php?&args=" + URL,
            dataType: "html",
            type: "GET",
            //web.archive.org/web/20130525053623/http://async:/ false,
            success: function(data) {
                if (data.indexOf("<table") != -1) {

                    // dork with the default return table - get rid of geoserver fid column, apply bootstrap table styling
                    /*if ($(".featureInfo th:nth-child(1)").text() == "fid") $('.featureInfo td:nth-child(1), .featureInfo th:nth-child(1)').hide();


    function DoTheCheck() {
        if (document.checkform.getfeatureinfo.checked == true)
          {map.addEventListener('click', onMapClick);}
        if (document.checkform.getfeatureinfo.checked == false)
          {map.removeEventListener('click', onMapClick); map.closePopup(popup);}

There is also an OpenLayers example.


See this answer: https://gis.stackexchange.com/a/211562/3399

This is the JavaScript implementation:

var parameters = {
  service: 'WMS',
  version: '1.1.1',
  request: 'GetFeatureInfo',
  layers: currentLayer,
  query_layers: currentLayer,
  feature_count: 10,
  info_format: 'text/javascript',
  format_options: 'callback:handleJson',
  SrsName: 'EPSG:4326',
  width: 101,
  height: 101,
  x: 50,
  y: 50,
  bbox: (lng - 0.1) + ',' + (lat - 0.1) + ',' + (lng + 0.1) + ',' + (lat + 0.1)
var url = owsurl + L.Util.getParamString(parameters)
  url: owsurl + L.Util.getParamString(parameters),
  dataType: 'jsonp',
  success: function (data) {

I can suggest to take a look at http://docs.geoserver.org/stable/en/user/tutorials/cql/cql_tutorial.html#cql-tutorial filtering. Hope it helps!


For convenience, here is the URL format for GetFeatureInfo (version 1.1.1 ; remove end of lines, obviously) :


Default INFO_FORMAT is text/plain, WIDTH and HEIGHT define the resolution on the BBOX, and X and Y the pixel of interest.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.