How to add own icon to BeautifyMarkers in OSM?

General talk
1

I created some icons (.png) for markers used in Leaflet BeautifyMarkes. Now I would like to add it to this code and display them in OSM:

L.BeautifyIcon.icon({
                    icon:'',             //in this line
                    iconShape: 'marker',
                    borderColor: '#8D208B',
                    textColor: '#8D208B',
                    backgroundColor: 'transparent'
                })

How to do it?

2

At the risk of stating the obvious, and apologies if you’ve already done this, you’ll probably find an example at https://leafletjs.com/examples.html .

What you will need to do is to extract some information from somewhere to display your marker against. This may be from OSM itself (perhaps via OverPass?) or maybe it’s from an external data source?

3

Thanks for reply. Hard to understand your second part of the answer. Can you please elaborate on this?

4

It’s entirely possible that I’ve just misunderstood what you were asking :slight_smile:

As far as I can tell from reading https://stackoverflow.com/questions/54426972/change-marker-text-with-button-on-leaflet-map etc., you’re using a leaflet plugin.

By definition that’s displaying something on top of an existing map. In order to display that something, your code needs to decide where to place it, and it needs to do this based on information that comes from somewhere. That somewhere can be data you’d previously extracted from OSM or it might be from somewhere else altogether.

For example, supposed you wanted to display one of those markers where London is. You can extract where the “London” node is from OSM in one of a few different ways - you’ll get the information at https://www.openstreetmap.org/node/107775 and that includes lat and long.

Alternatively, suppose you want to display a marker for “my business” and the information about “my business” was stored in a local database. You can fetch that information from the database rather than querying OSM and display the marker that way. As I mentioned before, there is lots of useful information at https://leafletjs.com/examples.html . If you haven’t got basic markers working on top of your map (or even a basic map) then it would make sense to get that working first.

5

Isn’t the question that the OP has a png file somewhere (e.g. of a flower) and wants to use that as a marker in their Leaflet app?
Something that is explained in Markers With Custom Icons I assume.

6

That was my understanding, yes.

7

Thank you. Yes I have the basic markers display like so:

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

and now I want to change

icon:'info'

for my own made icon.

How to do it?

8

Yes, please have a look at my answer above. Having problem to change this icon for my own.

9

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

10

Yes, I’ve changed

icon: 'info'

for

 iconUrl: 'test.png'

and it isn’t working :frowning:

11

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 ?

12

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

13

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

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?

15

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

16

I think you should remove the quotes around geelIcon:

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

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

18

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

19

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

L.BeautifyIcon.icon
20

Did you look into my source code?