2

I am displaying from Geoserver a WMS layer into leaflet in a PNG Format:

    var app_coup = L.tileLayer.wms("http://localhost:8081/geoserver/cite/wms", {
        layers: 'cite:vnm_polbnda_adm3_2014_pdc',
        format: 'image/png',
        transparent: true,
        version: '1.1.0',
        attribution: "test"
        });

After this, I query in JSON for a POP Up of the information of my labels:

/// Popup limite_inter_district
    var owsrootUrl = 'http://localhost:8081/geoserver/cite/wms';
    var defaultParameters = {
        service : 'WFS', //
        version : '2.0',
        request : 'GetFeature',
        transparent: true,
        typeName : 'cite:vnm_polbnda_adm3_2014_pdc',
        outputFormat : 'json',
        format_options : 'callback:getJson',
        SrsName : 'EPSG:4326'
    };
    var parameters = L.Util.extend(defaultParameters);
    var URL = owsrootUrl + L.Util.getParamString(parameters);
    var ajax = $.ajax({
        url : URL,
        dataType : 'json',
        jsonpCallback : 'getJson',
        success : function (response) {
        L.geoJson(response, {
                onEachFeature: function (feature, url) {
                    popupOptions = {maxWidth: 250};
                    url.bindPopup("<b>adm3_name:</b> " + feature.properties.adm3_name
                        ,popupOptions);
                }
            }).addTo(map);
        }
    });

I have the following question:

Why the polygons are displaying in blue when I been setting transparent to 'True'?

enter image description here

2

Setting transparent: true for WMS call when result is returned as GeoJSON has no effect on style of layer display in Leaflet.

Layer display can be styled with style option when created with L.geoJson call. If no option is specified, polygons inherit default path styles (see https://leafletjs.com/reference-1.6.0.html#path), which means transparent interior and '#3388ff' color for boundary. This is what happened in your case.

If you want to disable boundary display, you have to define style option/function, where style stroke option is set to false.

In your case this would look like:

L.geoJson(response, {
  style: function(feature) {
    return {stroke: false};
  },
  onEachFeature: function (feature, url) {
    popupOptions = {maxWidth: 250};
    url.bindPopup("<b>adm3_name:</b> " + feature.properties.adm3_name
      ,popupOptions);
  }
}).addTo(map);
| improve this answer | |
  • Awesome! Thanks For the explanations @TomazicM – Simon GIS Dec 10 '19 at 2:12

Your Answer

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

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