Styling Leaflet markers according to property in GeoJSON file

Question

I´m trying to place markers on a map according to some properties on the GeoJSON file, but for some reason it doesn't work.

I have a JSON file which have a property named Issue and that´s what I want to filter data and place markers accordingly.

var data= {
   "type": "FeatureCollection",
   "name": "freg_palmela",
   "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84"      } 
},
   "features": [
   { "type": "Feature", "properties": { "maclora": "0004A30B00FB82F0", "serial_num":    "2,02103E+14", "freguesias": "Freguesia de PALMELA", "model": "OCTANS 40", "latitude": "38.569244417", "longitude": "-8.88123655", "pt": "PT1508D2052900", "instalation_date": "11/04/2022", "last_ul": "21/06/2022 05:55", "last_jr": "20/06/2022 21:13", "last_ja": "20/06/2022 21:13", "last_rssi": "-109", "last_snr": "5,8", "jr_rssi": "-111,52", "jr_snr": "0,09", "Issue": "Ok" }, "geometry": { "type": "Point", "coordinates": [ -8.88123655, 38.569244417 ] } },

{ "type": "Feature", "properties": { "maclora": "0004A30B00FB9F67", "serial_num":    "2,02101E+14", "freguesias": "Freguesia de PALMELA", "model": "OCTANS 40", "latitude": "38.5841854779", "longitude": "-8.91802882787", "pt": "PT1508D2026400", "instalation_date": "04/03/2022", "last_ul": "19/06/2022 05:51", "last_jr": "21/06/2022 06:09", "last_ja": "21/06/2022 06:09", "last_rssi": "-115", "last_snr": "-4", "jr_rssi": "-117,6", "jr_snr": "-2,3", "Issue": "Sem Uplinks" }, "geometry": { "type": "Point", "coordinates": [ -8.91802882787, 38.5841854779 ] } },
]}

The Icons are defined like this:

var greenIcon = new L.Icon({
iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color- 
markers/master/img/marker- icon-green.png',
shadowUrl:'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/images/marker- 
  shadow.png',
iconSize: [12, 20],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [20, 20]
});

var redIcon = new L.Icon({
iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet- 
colormarkers/master/img/marker- icon-red.png',
shadowUrl:'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/images/marker- 
shadow.png',
iconSize: [12, 20],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [20, 20]
});

And the code that works but doesn´t filter is:

  function onEachFeature(feature,layer) {
  var popupContent = '<b><span style="color:#eb991e;">MacloRa:</span> ' +
        feature.properties.maclora +
        '<br><span style="color:#eb991e;">Serial Number: </span> ' +
        '<small>' +
        feature.properties.serial_num +
        '<br><span style="color:#eb991e;">Issue: </span> ' +
        feature.properties.Issue +
        '<br><span style="color:#eb991e;">Last UL: </span> ' +
        +feature.properties.last_ul +
        '<br><span style="color:#eb991e;">Last JR: </span> ' +
        feature.properties.last_jr +
        '<br><span style="color:#eb991e;">Last JA </span> ' +
        feature.properties.last_ja;
if (feature.properties && feature.properties.maclora) {
    popupContent += feature.properties.maclora;
}
layer.on('mouseover',function(ev) {
    ev.target.openPopup();
});
layer.on('mouseout',function(ev) {
    ev.target.closePopup();
});
layer.bindPopup(popupContent);
}


var points = L.geoJSON([freg_palmela], {

    style: function (feature) {
        return feature.properties.maclora;
    },

    onEachFeature: onEachFeature,

    pointToLayer: function (feature, latlng) {
        
        return L.marker(latlng, {icon: greenIcon});
    },
 }).addTo(map);

But If I try to use a filter no marker is placed in the map. I have tryed the switch inside the PointToLayer but no results I also tryed the leaflet filter: and style: function(feature) with a variable for the propertie but so far I couldn´t solve it.

var points = L.geoJson(freg_palmela,{
   onEachFeature:onEachFeature
}).addTo(map)

 function onEachFeature(feature, layer) {
  var lat = feature.geometry.coordinates[0];
  var lon = feature.geometry.coordinates[1];
  var popupContent; 
  var marker;
 switch(feature.properties.Issue) {
   case "OK":
       marker = L.Icon([lat, lon],{icon: greenIcon}).addTo(map);
       popupContent = feature.properties.Issue
       break;
   case "Sem Uplinks":
       marker = L.Icon([lat, lon],{icon: redIcon}).addTo(map);
       popupContent = feature.properties.Issue
       break;
   default:
       marker = L.Icon([lat, lon],{icon: yellowIcon}).addTo(map);
       popupContent = feature.properties.Issue
}

marker.bindPopup(popupContent);
}

I have used other solutions but none as given the result I´m trying to achieve.

Answer 1

Order of coordinates in GeoJSON is [lon, lat], so in your onEeachFeature function you should have:

function onEachFeature(feature, layer) {
  var lat = feature.geometry.coordinates[1];
  var lon = feature.geometry.coordinates[0];
  .
  .
  .