How to change marker color in leaflet?

Question

I have a method which works in google maps but in leaflet doesn't work. I show what method return in the picture below:

I want to change color with my method. Now I have a default icon

private getMarkerIcon(marker: OpMarker): any {
        if (marker.iconImage) {
            if (marker.iconImage.indexOf('data:image/') > -1)
                return marker.iconImage
            return 'data:image/*;base64,' + marker.iconImage
        } 
        else if (marker.iconURL) {
            return marker.iconURL
        }
        else {

            let iconConfig: any = null


            if (this.$scope.options.defaultMarkerIconOptions != null) {
                iconConfig = _.clone(this.$scope.options.defaultMarkerIconOptions)
                let color: string = null

                if (marker.fillColor) {
                    color = marker.fillColor

                    //TODO: add alpha (opacity)
                    if (color.charAt(0) === '#') {
                        color = color.replace('#', '').slice(0, 6)
                    }

                    if (color.length > 6) {
                        color = color.slice(0, 6)
                        console.warn('Colors in the RGBA model are not supported!')
                    }
                }

                if (color != null) {
                    iconConfig.fillColor = `#${color}`
                }
            }

            return iconConfig
        }
    }

and my method where create a new marker

const icon: any = this.getMarkerIcon(marker)

        if (icon == null) {
            console.warn(StreetMapProvider.LOG_STRING, "No default marker icon options. Using the default leaflet maps one.")
        }

        let mapMarker: any = new L.marker([marker.coords.latitude, marker.coords.longitude], {iconUrl: icon})

You can change the leaflet marker using css. https://stackoverflow.com/questions/27267411/how-do-you-add-a-class-to-a-leaflet-marker — chrismclarke, Sep 02 '19 at 09:14
In that case it's a bit hard to understand exactly what and where the problem is, can you create a minimal reproduction in stackblitz or similar? — chrismclarke, Sep 02 '19 at 11:04
It will be a problem, so I have function which load icon in base64 and return path color etc. You can see on picture. When I create marker i must read this icon and add with color which return my function ```getMarkerIcon``` — Dominik Lorke, Sep 02 '19 at 11:27

score 0 · Answer 1 · answered Sep 16 '19 at 05:10

0

Give your icon class and change it's style

marker._icon.classList.add("yourclass");

answered Sep 16 '19 at 05:10

Dostonbek Oripjonov

1,508
1
12
28

How to change marker color in leaflet?

1 Answers1