filterleafletgeojsonmarkers

styling leaflet markers according to property in geojson file


I´m completly stuck with this part. I have tryed a lot of solutions I have found here and on other places but I simply can´t figure out the situation. I´m trying to place markers on a map according to some properties on the geojson file, but for some reason it doens´t work.

I have a json file which have a propertie 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([data], {

    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 could´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);
}

All the help would be really appreciated because I´m been trying to solve this and it´s driving me mad....


Solution

  • So, after a long error and trial rampage I manage to come up with a solution.

    I have created a function to set the colors according to a feature.property

    function getColor(stype) {
      switch (stype) {
        case 'Sem JA':
          return  'blue';
        case 'Ok':
          return 'green';
        case 'Sem JR':
          return 'orange';
        case 'Sem Uplinks':
          return 'red';
        default:
          return 'white';
      }
    }
    

    After that I passed the options the variable that creates the points from the geojson file.

       var data = L.geoJson(data, {
        pointToLayer: function (feature, latlng) {
        return new L.CircleMarker(latlng, {radius: 5, 
            fillOpacity: 1, 
            color: 'black', 
            fillColor: getColor(feature.properties.Issue), 
            weight: 1,});
        },
        onEachFeature: setPopup
    }).addTo(map);
    

    I hope this helps anyone with the same problem, since I got no help in here and took me a lot of searching and trying diferent solutions I have found here and on the internet.