how to pass icon to leaflet L.CircleMarker

Question

I am trying to use L.CircleMarker because performance was too bad for L.Marker, But I could pass my icon generated by L.DivIcon to L.Marker as an option so that markers would get painted like my passed icons.

Now, When I am using L.CircleMarker, I can't find anything which says how to pass custom icon to L.CircleMarker.

Does this mean I can't pass My custom icon to L.CircleMarker?

`L.CircleMarker` draws a circle. That's what it's for. If it helps, you can use `L.CircleMarker.setStyle()` to pass a custom `className` if you're using the SVG renderer. — peeebeee, Jul 16 '19 at 08:11
I passed it, but I want to show image instead of circle, or background image . couldn't do it. — Nika Kurashvili, Jul 16 '19 at 16:52

score 1 · Answer 1 · answered Feb 02 '22 at 17:11

It is not possible for L.circleMarker to load an icon directly. I have been in similar situation and used a bit of hack combining L.circle and L.marker. I need to specify radius in meters didn't know how to convert it to pixels. L.circleMarker allows to specify Radius of the circle marker, in pixels. L.circle allows to specify Radius of the circle, in meters.

var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);

map.setView([48.85, 2.35], 8);

var myRenderer = L.canvas({ padding: 0.5 });

for (var i = 0; i < 100; i += 1) { // 100 points getRandomLatLng();
var ltln = getRandomLatLng();
    L.circle(ltln, 5000,{
    renderer: myRenderer
  }).addTo(map).bindPopup('marker ' + i);
  L.marker(ltln).addTo(map).bindPopup('ICON ' + i);
}

function getRandomLatLng() {
    return [
    -90 + 180 * Math.random(),
    -180 + 360 * Math.random()
  ];
}

You can use customIcon with L.marker. In my usecase, number of markers was low and hence no such performance degradation. L.marker has poorer performance for large number of points as compared to canvas based L.circle

how to pass icon to leaflet L.CircleMarker

1 Answers1