2

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.

2
  • 1
    what error are you getting? does the json display on the map and the styling isnt what you want?
    – ziggy
    Jul 17 at 16:10
  • Hi @ziggy, yes if I dont try to style it the markers show up on the map. It´s when I try styling them, that nothings shows up. I´ve tried diferent methods but I cant style them according to properties....
    – Bruno
    Jul 17 at 17:12

1 Answer 1

2

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];
  .
  .
  .

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.