CODEWITHSUNDEEP
javascriptleafletleaflet.markercluster
john williams
john williams

Reputation: 31

change Leaflet circleMarker ,to any custom icon (large data)

enter image description here I load about 10K L.circleMarker on the leaflet map and its works great. I try to change the icon of the circle to anything but I cant I know that I can change the icon in the regular marker but I don't, know how can I change the L.circleMarker.

can't find any doc about changing circle markers: https://leafletjs.com/reference.html#circlemarker

I want to get a result something like this but with different shapes of circle markers: enter image description here

ill be thankful if you have any experience to share

Upvotes: 0

Views: 3075

Answers (2)

john williams
john williams

Reputation: 31

We cant change CircleMarker Shape so, we have to use marker but markers are heavy to load +10K marker so we should change them to path or canvas or font we have a very cool LIB that does this for us and solves my problem loading +250K marker with custom shape and coordinate.

here is the GitHub reference : https://github.com/eJuke/Leaflet.Canvas-Markers sample data picture loaded with cnavas

CODE

<script src="leaflet-markers-canvas.js"></script>  
           var markersCanvas = new L.MarkersCanvas();
                 markersCanvas.addTo(map);
        //DO what you want to do with marker
   var icon = L.icon({
        iconUrl: "images/black_gps.png",
        iconSize: [15, 15],
        iconAnchor: [10, 0],
    });
          var marker = new L.Marker([latitude,longitude],{icon}); 
        markersCanvas.addMarkers(markers);

Upvotes: 0

kgajjar20
kgajjar20

Reputation: 304

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.

try this function to set leftlet icon to any other icon :

You can take detailed reference from here (https://leafletjs.com/reference.html#icon)

function setLeafLetIcon(icon, marker) {
        var myIconReplc = L.Icon.extend({
            options: {
                iconUrl: icon, // icon image url here
                iconSize: [20, 24],
                iconAnchor: [10, 24]

            }
        });
        marker.setIcon(new myIconReplc);
    
}

Upvotes: 0

Related Questions