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
 onEachFeature: function soffParkingFilter(feature,layer) {
   if (feature.properties.type === "parking") return true

2 Answers 2


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) {

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

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

Also see this working jsfiddle with the above code.

  • I have tried variations of that and I tried the code you provided, and now none of the markers come into view. Commented Feb 5, 2017 at 15:05
  • 1
    I added a jsfiddle to my answer, where you can play around with the code above. Another hint: In your local browser you can open the developer console (in Chrome with the shortcut ctrl+shift+j) to see emerging issues with your JS code, which can help you with debbuging your code. Commented Feb 5, 2017 at 16:02
  • Thanks for that, very helpful. I have looked at it and I do have a question. Your example has the latLng and hard coded values. My issue is to do that same thing, but from a local geoJSON file. This seems to be where my issue is. I have seen many examples, such as the one you provided, but none where the locations are stored in a geoJSON and custom markers. Commented Feb 6, 2017 at 13:31
  • 1
    This answer gis.stackexchange.com/a/102125/68210 explains how to include an external geojson file into your map. Commented Feb 6, 2017 at 14:02

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'

     pointToLayer: function (feature, latlng) {
     return L.marker(latlng, {icon: COIcon});},

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.