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