Custom marker and properties from geoJSON in Leaflet

Question

I am having some issues with two things in a Leaflet map 1) custom marker 2) pulling attributes from a geoJSON file and putting it in the pop-up.

I should qualify things, I am really new to Leaflet and web development. I have looked at a number of different examples, but I cannot seem to make it work within my code. Here is a section of the code, which is filtering based on an attribute in the geoJSON, but I would also like to give it a custom icon and attributes in the pop-up.

 var soffParkingMarkerPopup = 'parking';
 var soffParking = L.geoJson(locations, {filter:soffParkingFilter
 }).addTo(map);
 onEachFeature: function soffParkingFilter(feature,layer) {
   if (feature.properties.type === "parking") return true
 };
 soffParking.bindPopup(soffParkingMarkerPopup).addTo(map);

Answer 1

To create a custom marker you can create a L.Icon object and for the popup you can use the onEachFeature option.

Here is an example code snippet for these functions:

var myIcon = L.icon({
  iconUrl: 'my-icon-url',
  iconSize: [32, 37],
  iconAnchor: [16, 37],
  popupAnchor: [0, -28]
});

function onEachFeature(feature, layer) {
  layer.bindPopup(feature.properties.name);
}

function soffParkingFilter(feature, layer) {
  if(feature.properties.type === "parking") return true;
}

L.geoJSON(locations, {
  pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {icon: myIcon});
    },
  filter: soffParkingFilter,
  onEachFeature: onEachFeature
}).addTo(map);

For more informations see the tutorials for custom icons and geojson basics.

Also see this working jsfiddle with the above code.

Answer 2

If anyone wants to add font awesome icons, can use this

const COIcon = L.divIcon({
    html: '<i class="fa-solid fa-house"></i>',
    iconSize: [5, 5],
    className: 'myDivIcon',
    className: 'myDivCO'
});

L.geoJSON(geojsonFeature,{
     pointToLayer: function (feature, latlng) {
     return L.marker(latlng, {icon: COIcon});},
     onEachFeature:onEachFeatureloc
}).addTo(map);