Styling WFS layer in Leaflet?

Question

I would like to know what I am missing in my code. I am trying to use the layer’s colors that I have loaded in GeoServer, called "dpv_cal", and this has three categories: white, purple and red, but in my webmap the line shape doesn’t appear. I have read Leaflet documentation about GeoJSON and I have tried to follow it but I don't know why it's not working.

In other case, when I put a color like ‘black’ in my code it works ok and I can see the shape correctly whit this color, for example:

...
selectedArea = L.geoJson(data,{
       style: function (feature) {
        return {color: ‘black’};
    },
...

But how I can add my own style, an SLD uploaded to GeoServer, to this WFS request?

***This is my code:***
//Geoserver Web Feature Service
$.ajax('http://localhost/geoserver/.../wfs',{
  type: 'GET',
  data: {
    service: 'WFS',
    version: '1.1.0',
    request: 'GetFeature',
    typename: '...:...',
    srsname: 'EPSG:4326',
    outputFormat: 'text/javascript',
    },
  dataType: 'jsonp',
  jsonpCallback:'callback:handleJson',
  jsonp:'format_options'
});

// the ajax callback function
function handleJson(data) {
    selectedArea = L.geoJson(data,{
       style: function (feature) {
        return {color: feature.properties.dpv_cal}; **//This is the part that doesn't seem to be working**
    },
      onEachFeature: function(feature, layer){
            layer.bindPopup(feature.properties.fna);
        }}
    ).addTo(map)
    };

The line that refers to onEachFeature works fine too. I previously made a WMS request which also works great.

I found another similar posts that refers to WFS, but they aren't useful for this case that is more simple.

Answer 1

I just made and Ajax callback that has three categories to symbolize my GeoJSON. It works:

var geojson = new L.geoJson(data, { 
 style: function (feature) { 
      var c; 
       switch (feature.properties.dpv_cal) { 
        case 'Natural': 
        c = '#ffffff'; 
        break; 
        case 'Mejorada':
        c = '#db6adb'; 
        break; 
        case 'Pavimentada': 
        c = '#ff0127'; 
        break; 
        default: 
        c = 'grey'; 
       }
       return {color: c, opacity: 1, weight: 2}; 
   }
   }).addTo(map);