L.circleMarker leaflet

Question

how to replace circle with icon in L.circleMarker

var style_station = {
    radius: 12,
    stroke:false,
    weight: 1,
    opacity: 1,
    fillOpacity: 1,
    // color: '#00ABDC',
};

$.getJSON("url", function(stationexits){ exitlayer = L.geoJson(stationexits, { onEachFeature: onEachStation, pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, style_station); } });

Answer 1

You will have to return a L.Marker

Only then will you be able to set your own icon.

Answer 2

I dont want to use L.Marker as L.circleMarker have own advantages over L.marker

I did below and its working for me

1)Created a svg pattern like

<svg>
  <defs>
   <pattern id="bustop_icon" x="0" y="0" width="18" height="18">
    <image xlink:href="img/images/bus-icon.png" x="3" y="5" width="18" height="20" />
    </pattern>
   </defs>
</svg>

2)set className in style

    var style_busstops = {
        radius: 12,
        stroke:false,
        weight: 1,
        opacity: 1,
        fillOpacity: 1,
        className : 'bus_stops'
    };

L.geoJson(busstops, {
            pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, style_busstops);
         }
});

3)Add 'fill' css in class bus_stops

.bus_stops { 
   fill: url(#bustop_icon);
}