How to add own icon to BeautifyMarkers in OSM?

General talk
21

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.

22

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 :frowning:

23

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.

24 

 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
                    });
25

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.

26

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.

27
28

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