1

I am working on the point data. I have managed to display the data using the WFST leaflet plugin.

var univ = new L.WFS({
        url: 'http://localhost:8080/geoserver/HEC/wfs',
        typeNS: 'HEC',
        typeName: 'Unis',
        crs: L.CRS.EPSG4326,
        geometryField: 'the_geom',
        showExisting: true,
        maxFeatures: 500,
}).addTo(map);

Now my question is: how do I style my simple markers? I have tried following this link but it's not working for me.

Also maybe because I want to use L.ExtraMarkers.icon for markers.

Even if I alter my code markers do not style as I want them to.:

var univ = new L.WFS({
        url: 'http://localhost:8080/geoserver/HEC/wfs',
        typeNS: 'HEC',
        typeName: 'Unis',
        crs: L.CRS.EPSG4326,
        geometryField: 'the_geom',
        showExisting: true,
        maxFeatures: 500,
        pointToLayer: function (feature, latlng){
                           switch (feature.properties.Sector){
                                   case 'Public' : return L.marker(latlng,{icon: L.ExtraMarkers.icon({icon: 'fa-graduation-cap', markerColor: 'orange', shape: 'circle', prefix: 'fa'})});
                                   case 'Private' : return L.marker(latlng,{icon: L.ExtraMarkers.icon({icon: 'fa-graduation-cap', markerColor: 'cyan', shape: 'circle', prefix: 'fa'})});
    }
}).addTo(map);

Any ideas where I could be going wrong?

2 Answers 2

2

So I solved it. For the L.WFST point feature, you need to pass two arguments: the options and a GeoJSON which you can use to style the marker. So the code now looks like this:

var univ = new L.WFST(
        {
            url: 'http://localhost:8080/geoserver/HEC/wfs',
            typeNS: 'HEC',
            typeName: 'Unis',
            crs: L.CRS.EPSG4326,
            geometryField: 'the_geom',
            showExisting: true,
            maxFeatures: 500,
        },
    new L.Format.GeoJSON({
        pointToLayer(feature, latlng) { 
            switch (feature.properties.Sector){
                case 'Public' : return L.marker(latlng,{icon: L.ExtraMarkers.icon({icon: 'fa-graduation-cap', markerColor: 'orange', shape: 'circle', prefix: 'fa'})});
                case 'Private' : return L.marker(latlng,{icon: L.ExtraMarkers.icon({icon: 'fa-graduation-cap', markerColor: 'cyan', shape: 'circle', prefix: 'fa'})});
            }
        },
    })
).addTo(map);

Posting the answer in case it helps someone else.

4
  • I'm interested but I have so much difficulties to implement it. What is the L.extramarkers version your're using?
    – Vincent Dc
    Jun 21 at 13:15
  • I'm using this: github.com/coryasilva/Leaflet.ExtraMarkers What difficulties are you having? Since I just implemented it I might be able to help.
    – Aneeqa
    Jun 22 at 6:09
  • I just corrected my WFS layer in Qgis/Postgis. Maybe because the column wasn't in 'varchar', it was unreadable. Now it works
    – Vincent Dc
    Jun 24 at 8:54
  • Now I'm using the last version like you do, copying everything on my server , with fontawesome 5. An older version made the icon to show not aligned
    – Vincent Dc
    Jun 24 at 8:56
1

Additionally, in case this helps someone else too, you can add this line right after the "case Public" and "case Private" lines:

       default: return L.marker(latlng,{icon: L.ExtraMarkers.icon({icon: 'fa-graduation-cap', markerColor: 'green', shape: 'circle', prefix: 'fa'})});

to give a color to the remaining "other values" than Public and Private

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.