Custom icon in worksheet not working

Question

The standard method of using a custom icon, as shown in Leaflet docs, does not work for me when I have a geojson data source. the layer is added fine, but the default marker icon is used. There is no link to my custom PNG icon when I review the DOM. Here is my code:

var crossIcon = L.icon({ iconUrl: 'plus.png', shadowUrl: 'marker-shadow.png', iconSize: [11, 11], shadowSize: [11, 11], iconAnchor: [6, 6], shadowAnchor: [5, 5], popupAnchor: [5, 5] }); var points = L.geoJson(labels, { icon: crossIcon }); map.addLayer(points); layerControl.addOverlay(points, 'Site Locations'); 

I tried several suggestions found on SO and elsewhere, without success. plus.png is located in / lib / images /, where the default icon is also found.

Answer 1

Looking at the GeoJson API here , this is not possible when creating the L.GeoJson layer for the icon . I believe you can search

The GeoJson sample page page on the Leaflet website shows this scenario. Look at the baseball player badge.

The icon is defined as follows:

 var baseballIcon = L.icon({ iconUrl: 'baseball-marker.png', iconSize: [32, 37], iconAnchor: [16, 37], popupAnchor: [0, -28] }); 

The icon is applied to the L.geoJson layer through the pointToLayer parameter, which indicates the function; eg:

 var coorsLayer = L.geoJson(coorsField, { pointToLayer: function (feature, latlng) { return L.marker(latlng, {icon: baseballIcon}); } }) 

This function will be called for each GeoJSON point. The function will return L.Marker , which uses the icon you specified.

So, to answer your question: Your block of code creating your layer should look like this:

 var points = L.geoJson(labels, { pointToLayer: function (feature, latlng) { return L.marker(latlng, {icon: crossIcon }); } }); 

Answer 2

Instead of adding it as a geojson layer, you can add it as a marker

 var crossIcon = L.icon({ iconUrl: 'plus.png', shadowUrl: 'marker-shadow.png', iconSize: [11, 11], shadowSize: [11, 11], iconAnchor: [6, 6], shadowAnchor: [5, 5], popupAnchor: [5, 5] }); L.marker(icon:crossIcon);