I have a Geojson with Cities location. I'm trying to use the City Lat/Lon to send a WMS GetFeatureInfo to my Geoserver to add additional info to the label (temperature data), but I can't get the X and Y to pass in the request.

I've tried using the following code, but the ressponse is always different from a zoom level to another.

 var latlng = [GeoJsonLat,GeoJsonLon];

 var pixelPosition = map.latLngToLayerPoint(latlng);

Zoom Level 3:

enter image description here

Zoom Level 4:

enter image description here

And so on...

What am I doing wrong? Is there any alternative that I can use?


From the above code (lat, lon from GeoJson), pointing on Rome at ZoomLevel = 3, X=231and Y=340, while clicking on Rome with the mouse I get x=232 and y= 345

enter image description here

My Layer code:

cityLayer = L.geoJSON(data, {
  pointToLayer: (feature, latlng) => {
    let emptyGroup = L.layerGroup();

    let marker = () => {
      let tempValue;
      let html;
      let lat = feature.properties.latitude;
      let lon = feature.properties.longitude;
      var latLng = latlng;
      var point = map.latLngToLayerPoint(latlng);
      let bbox = map.getBounds().toBBoxString();
      var BBOX = map.getBounds().toBBoxString(); //coordinates
      var WIDTH = map.getSize().x;
      var HEIGHT = map.getSize().y;
      var X = point.x;
      var Y = point.y;
      console.log("X = ", X, " Y = ", Y);
        `https://www.xtreme-weather.com/maps/gfs/wms?` +
          "service=wms&version=1.1.0&request=GetFeatureInfo&layers=gfs:tempGfs&query_layers=gfs:tempGfs&styles=" + 
          "&bbox=" + BBOX +
          "&feature_count=1" + 
          "&height=" + HEIGHT +
          "&width=" + WIDTH +
          "&format=image%2Fpng&info_format=application%2Fjson&srs=EPSG:4326" + 
          "&x=" + X +
          "&y=" + Y +
          "&time=" + validityTime +
        { cache: "no-cache" }
        .then((response) => response.json())
        .then((data) => {
          data.features.forEach((proerties) => {
            dataValue = proerties.properties.GRAY_INDEX;
            tempValue = dataValue.toFixed(2);
            // console.log(`<span class="my-div-span" style="color:white; width:100%;font-size:8px">${decode_utf8(feature.properties.name)}<br>${tempValue}</span>`)
            // return dataValue.toFixed(2)
            new L.Marker(latLng, {
              icon: new L.DivIcon({
                className: "div-icon",
                html: `<span class="my-div-span" style="color:white; width:100%;font-size:8px">${decode_utf8(
              zIndexOffset: 10000,
      // return tempValue
    // marker.addTo(emptyGroup)
    return emptyGroup;
  • Please use the edit link to add the actual pixel values returned and how you are using them in your GetFeatureInfo requests (seeing the actual URLs will help us). – Ian Turton Jan 27 at 12:00
  • @IanTurton, It seems that GetFeatureInfo returns different values on different zoom levels and from ZoomLevel = 8 , it returns the correct value.. I noticed it also from my WMS layer, which has the same result. I guess I'm doing things right and then Geoserver send back approximations? I don't know then, if my question topic shall be different and this question shall be closed – Davide Raro Jan 27 at 12:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.