custom markers not displaying on mapbox map - mapbox

Question

I am working with a mapbox map on a web page, and have everything working fine with the map and dropping pins, but cant get custom markers working.
My code that is working for dropping a pin is:
L.mapbox.featureLayer({
type: 'Feature',
geometry: { type:'Point', coordinates:[$longitude, $latitude] },
properties: { title:'My Location', description:'My Description', 'marker-size':'large', 'marker-color':'#cc0000', 'marker-symbol':'building' }
}).addTo(map);
This works and populates the map with my locations.
I have used this code to try and add a custom marker, but this doesnt work:
L.mapbox.featureLayer({
type: 'Feature',
geometry: { type:'Point', coordinates:[$longitude, $latitude] },
properties: { title:'My Location', description:'My Description', icon: { iconUrl: 'https://www.mapbox.com/mapbox.js/assets/images/astronaut1.png', iconSize: [50, 50], iconAnchor: [25, 25], popupAnchor: [0, -25], className: 'dot' } }
}).addTo(map);
I also have multiple pins and other layers on the map that can be turned on or off, and everything is working well, I just cant get this custom marker to work at all!
Does anyone have custom markers working with code like this on mapbox?

Answer 1

I don't think you can specify custom marker options like icon like that in the main GeoJSON properties hash.
I believe you would need to do something like the below instead.
var customIcon = new L.Icon({iconUrl: 'https://www.mapbox.com/mapbox.js/assets/images/astronaut1.png', iconSize: [50, 50], iconAnchor: [25, 25], popupAnchor: [0, -25], className: 'dot' })
L.mapbox.featureLayer(
{
type: 'Feature',
geometry: { type:'Point', coordinates:[$longitude, $latitude] },
properties: { title:'My Location', description:'My Description'}
},
{
pointToLayer: function(feature,latLng) { return L.marker(latLng, {icon: customIcon}}
}).addTo(map);
See https://www.mapbox.com/mapbox.js/api/v2.2.2/l-mapbox-featurelayer/