2

I've created a webmap viewer with Leaflet and used the plugin leaflet.wms to call the WMS GetFeatureInfo service to query a map layer and return information about the underlying features. My code is as follows

var source = L.WMS.source("http://xxxx/geoserver/wms",
                    {
                        "format": "image/png",
                        "transparent": "true",
                        "attribution": "© Instituto Geográfico Nacional de España",
                        "info_format": "text/html",         
                    }        
                );
var lyrAtlas = source.getLayer("atlas:lista_reprod_iii");

It works fine, but the information to be returned is quite long and the displayed popup is too narrow, so the result is unmanageable. I want to set the width of the popup to something wider, but I haven't found any hint to obtain it. Is it possible to do so?

Edit

This is the only chunk of code of the plugin js file where the popup appears:

'showFeatureInfo': function(latlng, info) {
    // Hook to handle displaying parsed AJAX response to the user
    if (!this._map) {
        return;
    }
    this._map.openPopup(info, latlng);
},
Improve this question

2 Answers 2

Reset to default
4

What you have to do is to define your own showFeatureInfo option/method where you can set width of the popup like @Ziggy suggested. To do this you can use include method to modify L.WMS.Source class (see https://leafletjs.com/examples/extending/extending-1-classes.html).

Code for modifying L.WMS.Source class could look something like this:

L.WMS.Source = L.WMS.Source.include({
  'showFeatureInfo': function(latlng, info) {
    L.popup({minWidth: 600})
      .setLatLng(latlng)
      .setContent(info)
      .openOn(map);
  }
});
Improve this answer
1
  • It depends on what you want. Commented Oct 18, 2022 at 13:21
1

Its in the leaflet popup properties

var popup =  L.popup({
  maxWidth: 375
})
Improve this answer
1
  • I'm unable to make this code to work. I'm editing the question adding code from the plugin. Commented Oct 18, 2022 at 7:38

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.