How to add own icon to BeautifyMarkers in OSM?

Did you try to follow the instructions in the blog post that I linked before ?

Yes, I’ve changed

icon: 'info'

for

 iconUrl: 'test.png'

and it isn’t working

I didn’t try the steps in the article, but it seems that you also have to define your icon via var greenIcon = L.icon(…) or an icon class, not ?

Not that good yet. You might be right. Could you create one small example so I can follow it, please?

var geelIcon = L.icon({
iconUrl: ‘fotos/geel.png’,

	iconSize:     [25, 40], // size of the icon
	iconAnchor:   [12, 45], // point of the icon which will correspond to marker's location
	popupAnchor:  [0, -30] // point from which the popup should open relative to the iconAnchor
	});

Thank you. Now I add

geelIcon

to this code

L.BeautifyIcon.icon({   
                        icon: 'geelIcon',
                        iconShape: 'marker',
                        borderColor: '#8d2027',
                        textColor: '#8d2027',
                        backgroundColor: 'transparent'
)}

but it doesn’t work. How to solve it?

You don’t use the

var

var geelIcon = L.icon({
        iconUrl: 'fotos/geel.png',

        iconSize:     [25, 40], // size of the icon
        iconAnchor:   [12, 45], // point of the icon which will correspond to marker's location
        popupAnchor:  [0, -30] // point from which the popup should open relative to the iconAnchor
        });

Otherwise I will have a look to your code, send me a pm

I think you should remove the quotes around geelIcon:

L.BeautifyIcon.icon({   
                        icon: geelIcon,
                        iconShape: 'marker',
                        borderColor: '#8d2027',
                        textColor: '#8d2027',
                        backgroundColor: 'transparent'
)}

Did as you said but just a plain border, no icon inside Please have a look https://imgur.com/a/ZDoU8ao

A link to your website will help
Or check mine, all the code is in the source
https://www.jan-karina.es/wandelingen/

No website yet …Still no luck how to use it in

L.BeautifyIcon.icon

Did you look into my source code?

Iconmania, When you introduced the code from Sandal man on your machine, did you create a folder “fotos” and placed a file “geel.png” in it? The folder "fotos’ have to go next to the JavaScript file.

I put the file named “geelIcon.png” in the server and therefore called it directly in the code. Also the icon is 37px by 32px so should be ok. But stil not working

Without a link to your server or website it is difficult to help.
Can’t you place it somewhere online?

Or mail it to me, so I can place it online.

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


function getCategory(d) {
            switch (d) {

            default:
                    return L.BeautifyIcon.icon({   
                        icon: 'info',                 //When here I change to geelIcon, I have this blank space in the marker. With 'info' it works properly. 
                        iconShape: 'marker',
                        borderColor: '#8d2027',
                        textColor: '#8d2027',
                        backgroundColor: 'transparent'
                    })
                    break;

  L.geoJSON(xhr.response, {
                pointToLayer: function(feature, latlng) {
                    return L.marker(latlng, {                       
                        icon: getCategory(feature.properties.category)
                            // onEachFeature: onEachFeature
                    });

BeautifyMarkers is a plugin that doesn’t use images, it’s strictly for text (or fonts with lots of symbols, like FontAwesome).
You can’t use your own images with this plugin.

Using images for markers doesn’t require plugins for Leaflet, support is built in. Read the Leaflet documentation.

Thank you. Could you give an example of using own images in OSM, please? Would be very helpful for me. Still a beginner in this issue.

Followed instructions there and it works. Thanks a ton. And to all of you, too.