I have a Leaflet javascript web application which uses WMS to make calls to GeoServer. The returned object is Geometry plus attributes. While the Geometry (polygons) render fine as Counties in the US, I need to make the Counties layer to show different colors, based on County populations.

Here is code to load the WMS data:

     var wmscounty = L.tileLayer.wms("<?php echo  $geoserverwms_url; ?>", {
        layers: '<?php echo  $geoserverwms_layer_countypop; ?>',
        format: 'image/png',
        transparent: true,
        version: '1.1.1',
        attribution: "countypopulation"
    }
    wmscounty.addTo(map);

The code I could possibly use set the layer's styles are:

  function getColorCounties(d) {
        return d > 1000000 ? '#800026' :
        d > 50000   ? '#FED976' :
                          '#FFEDA0';
    }
   function styleCounties(feature) {
        return {
            weight: 2,

            fillColor: getColorCounties(feature.properties.COUNTY_POP)
        };
    }

I don't know how to pass the 'feature' object to the styleCounties() function? Should it be in some onAdd() function? Or some 'forEach'. There are some examples available but I can't find any for Leaflet/WMS.

Thanks!

I have a Leaflet javascript web application which uses WMS to make calls to GeoServer. The returned object is Geometry plus attributes. While the Geometry (polygons) render fine as Counties in the US, I need to make the Counties layer to show different colors, based on County populations.

Here is code to load the WMS data:

     var wmscounty = L.tileLayer.wms("<?php echo  $geoserverwms_url; ?>", {
        layers: '<?php echo  $geoserverwms_layer_countypop; ?>',
        format: 'image/png',
        transparent: true,
        version: '1.1.1',
        attribution: "countypopulation"
    }
    wmscounty.addTo(map);

The code I could possibly use set the layer's styles are:

  function getColorCounties(d) {
        return d > 1000000 ? '#800026' :
        d > 50000   ? '#FED976' :
                          '#FFEDA0';
    }
   function styleCounties(feature) {
        return {
            weight: 2,

            fillColor: getColorCounties(feature.properties.COUNTY_POP)
        };
    }

I don't know how to pass the 'feature' object to the styleCounties() function? Should it be in some onAdd() function? Or some 'forEach'. There are some examples available but I can't find any for Leaflet/WMS.

Thanks!

• javascript
• wms

Share Improve this question Follow asked Apr 9, 2014 at 15:37 IrfanClemsonIrfanClemson 1,77966 gold badges3535 silver badges5656 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I must say I'm a bit confused. WMS is a service to get raster images from the server. You don't get geometries or attributes from WMS.

Since WMS gives raster images, you can't style it with Javascript. So you can't just set weight, fill color, etc. from the Javascript, since the data has already been rendered on the server when the Javascript sees it.

However, you can set the styles parameter in the WMS request, which instructs the WMS server (GeoServer in your case) to apply a certain style to the returned images; see the GetMap reference: http://docs.geoserver/stable/en/user/services/wms/reference.html#getmap.

If you really want to control styling on the client, you should probably use WFS instead, which will give you the geometries in vector format, and the attributes. GeoServer can return them in GeoJSON format, which makes it easy to work with them in Leaflet. There's at least one plugin you could use for this: https://github./azgs/azgs-leaflet (I have not used it myself).