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

tallistroan · Accepted Answer · 2017-02-05T15:59:43.840

15

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.

edited Feb 05 '17 at 15:59

answered Feb 05 '17 at 11:16

tallistroan

2,351
1
13
17

I have tried variations of that and I tried the code you provided, and now none of the markers come into view. – Ryan Garnett Feb 05 '17 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. – tallistroan Feb 05 '17 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. – Ryan Garnett Feb 06 '17 at 13:31
1

This answer http://gis.stackexchange.com/a/102125/68210 explains how to include an external geojson file into your map. – tallistroan Feb 06 '17 at 14:02

score 0 · Answer 2 · edited Oct 19 '22 at 12:11

0

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

edited Oct 19 '22 at 12:11

Kadir Şahbaz

76,800
56
247
389

answered Oct 19 '22 at 11:24

M. Abrar Rubaiyat Islam

39
5

Custom marker and properties from geoJSON in Leaflet

2 Answers2