1

I have a .js file with 19000 entries from where I want to create layers from a feature.properties.Issue. I have tried diferent approaches I have found in here but for some reason the layers are not displayed. I am trying to use the Leaflet filter to do so. How can I do this?

I´m using the code above:

The .js file example is as follow:

var data = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "maclora": "0004A30B00FB82F0",
        "serial_num": 202103000002777,
        "model": "OCTANS 40",
        "latitude": 38.569244417,
        "longitude": -8.88123655,
        "JR_RSSI": "-115,54",
        "JR_SNR": "-0,78",
        "Issue": "Sem JA"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -8.88123655,
          38.569244417
        ]
      }
    },

    {
      "type": "Feature",
      "properties": {
        "maclora": "0004A30B00FBA297",
        "serial_num": 202103000002779,
        "model": "OCTANS 40",
        "latitude": 38.569850281,
        "longitude": -8.881527801,
        "JR_RSSI": "-116,72",
        "JR_SNR": "-4,95",
        "Issue": "Sem JR"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -8.881527801,
          38.569850281
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "maclora": "0004A30B00EDA56B",
        "serial_num": 202104000047982,
        "model": "SCULPTOR 140",
        "latitude": 38.5561081661,
        "longitude": -8.89268654685,
        "JR_RSSI": "-113,82",
        "JR_SNR": "-1,64",
        "Issue": "Sem JR"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -8.89268654685,
          38.5561081661
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "maclora": "0004A30B00ED5DA4",
        "serial_num": 202104000047986,
        "model": "SCULPTOR 140",
        "latitude": 38.5557449488,
        "longitude": -8.89278445244,
        "JR_RSSI": "-121,87",
        "JR_SNR": "-9,41",
        "Issue": "Sem Uplinks"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -8.89278445244,
          38.5557449488
        ]
      }
    },
  ]
};

The html file as the following code:

function setPopup(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;
  
  layer.on('mouseover',function(ev) {
      ev.target.openPopup();
  });
  layer.on('mouseout',function(ev) {
      ev.target.closePopup();
  });
  layer.bindPopup(popupContent);
}

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';
  }
}

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

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

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

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

var addOverlay = {
  "OK": ok,
  "Sem Uplinks": ul,
  "Sem JR": jr,
  "Sem JA": ja,
}

layerControl.addOverlay(baseLayers, addOverlay).addTo(map);
5
  • Hi @TomazicM thanks for the insight. You might be right. I have deleted unnecessary text and left what´s important.
    – Bruno
    Jul 20 at 14:19
  • 1
    Getting any errors in the browser debugger console?
    – TomazicM
    Jul 20 at 15:02
  • 1
    getColor and setPopup are not specified in your code. It is not a runnable minimal example. Please try to provide a runnable minimal example, e.g. using jsfiddle. Often you stumble over the error yourself when you try to create a minimal example.
    – til_b
    Jul 20 at 15:29
  • 1
    Hi TomazicM I wasn´t getting any errors and after checking @til_b example I came to the conclusion I was not setting the var L.control.layers porperly. Another error I have found was instead of defining the feature.properties.Issue === "Ok" I was defining it as OK (with both capital letters), Dumb me :) Thanks for the help.
    – Bruno
    Jul 20 at 19:49
  • I always get confused when I use a L.control.layers and need to see example code to get it to work ;-)
    – til_b
    Jul 21 at 7:20

1 Answer 1

1

While trying to build a JSFiddle minimal example that shows an error I came to a working solution and could not find an error.

See jsfiddle at http://jsfiddle.net/cgdaLjhv/1/ .

The relevant code is

var data = { /* as in question*/ };

var map = L.map("map").setView([38.5,-8.8], 9);

var osmBase = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
});

var getColor = function(i) {
  var c = "blue"
  if (i=="Sem JA") {
    c = "red";
  }
  return c;
}

var setPopup = function(feature,layer) {
    layer.bindPopup('<p>'+feature.properties.serial_num+': '+feature.properties.Issue+'</p>');
}

var baseLayers = {
    "OSM": osmBase
}

var lc = L.control.layers(baseLayers)

lc.addTo(map);

var ja = L.geoJson(data, {
    filter: function(feature, layer) {
      return (feature.properties.Issue === "Sem JA");
    },
    pointToLayer: function(feature,latlng) {
        return new L.CircleMarker(latlng, {radius: 5, 
            fillOpacity: 1, 
            color: 'black', 
            fillColor: getColor(feature.properties.Issue), 
            weight: 1,})
    },
    onEachFeature: setPopup
  } // end json layer options
); // end json layer ja

var jr = L.geoJson(data, {
    filter: function(feature, layer) {
      return (feature.properties.Issue === "Sem JR");
    },
    pointToLayer: function(feature,latlng) {
      return new L.CircleMarker(latlng, {radius: 5, 
          fillOpacity: 1, 
          color: 'black', 
          fillColor: getColor(feature.properties.Issue), 
          weight: 1,})
    },
    onEachFeature: setPopup
  } // end json layer options
); // end json layer jr

lc.addOverlay(ja, "JA");
lc.addOverlay(jr, "JR");

What I did was to build an example from scratch, trying one thing at a time. First adding the JSON without any options. Then specifying a single option (the markers). Then the filters. After each step i check if everything displays as I expect; that way you can really narrow down where you get your errors.

2
  • Hi @til_b, yes exactly that was my approach and first I did put the code that worked (same steps as you). But after a while I couldn´t get it to work. I guess I need some distance from the problem. I´ll check your example, but thanks a lot.
    – Bruno
    Jul 20 at 17:06
  • 1
    Thanks for the help, mate really helped a lot. I also have found that insted of defining feature.properties.Issue === "Ok" I was writing OK (both capital letters :)
    – Bruno
    Jul 20 at 19:51

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.