8

I'm having a hard time figuring out why the Leaflet method setstyle will change the color of a polygon but not the color of my markers.

Polygon works fine:

Polygon

But the markers won't change colors:

Markers

I want to be able to mouseover a marker and changes its color. It seemed like setStyle would do this. But I keep getting layer.setStyle is not a function

I'm using Angular and Leaflet together to make the map (I'm using the angular-leaflet-directive).

Here's the mouseover part of the code:

$scope.$on("leafletDirectiveMap.geojsonMouseover", function (ev, leafletEvent) {
        pointMouseover(leafletEvent);
    });

    function pointMouseover(leafletEvent) {
        var layer = leafletEvent.target;
        layer.setStyle({
            weight: 2,
            color: '#666',
            fillColor: 'white'
        });
    }

When the marker get's moused over, it fires pointMousever which then tries to invoke setStyle on the LeafletEvent.target. I've console.logged the LeafletEvent and there is indeed the Target part of it:

Target

Why would setStyle work for the polygon and not for the marker? What's the way to change the marker's color?

  • 2
    You should check out Leaflet.StyleEditor on GitHub. It took me a while to figure out how to get the demo to work, but 1) click the Style tool, 2) click the marker, 3) key point... change the icon setting to something other than default, 4) select color. Voila! Pretty slick. – RyanDalton Jul 25 '14 at 4:24
  • And the Leaflet StyleEditor does its magic by giving the icon a Mapbox URL of this form: api.tiles.mapbox.com/v3/marker/pin-m-circle+ffc871.png, where ffc871 is the hex color string. Apparently it can be any six-digit hex string! But probably this is best done using MakiMarkers, which seems to have been designed for this purpose: github.com/jseppi/Leaflet.MakiMarkers – LarsH May 4 '16 at 17:41
5

Seems like you can't do that because a marker uses an image to render.

enter image description here

I think you'd need to grab the icon class of your marker and change the "iconUrl" attribute to whatever new image you want.

Source: Leaflet API Reference

Hope that helps,

DR

7

Figured it out thanks to some documentation reading.

The polygon in leaflet responds to setStyle but the marker can be changed using setIcon

Documentation for setIcon

4

See Kyle Pennell's Answer :

The polygon in leaflet responds to setStyle but the marker can be changed using setIcon

You can use following lines :

// create custom icon
IconStyleOne = L.icon({
            iconUrl: 'img/image1.png'
        });
IconStyleTwo = L.icon({
            iconUrl: 'img/image2.png'
        });

// ...

//Create empty geojson with mouseover and mouseout events
geojson_feature = L.geoJson(false, {
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {icon: IconStyleOne});
    },
    onEachFeature: function(feature,layer)
            {
            layer.on("mouseover",function(e){
                layer.setIcon(IconStyleOne)
            });
            layer.on("mouseout",function(e){
                layer.setIcon(IconStyleTwo)
            });
            }
}).addTo(this.map);
  • 1
    Kyle Pennell has a great question and answer here ;) – Kyle Pennell Aug 10 '16 at 19:05
1

You can do it without having to create a million different icon images if you use CSS.

  1. Add the marker
  2. find the backgroundcolor attribute for the css and change it.

Here it is:

var marker = L.marker([50,-20], {icon: myIcon}).addTo(map);
marker.valueOf()._icon.style.backgroundColor = 'green'
  • So this only changes the background color? Can you give an example of what that would look like for a typical icon? – LarsH May 4 '16 at 17:29
  • 1
    @LarsH, Yes, this would change the background (put a green square behind the blue teardrop icon). Unfortunately, you can't just change the fill color. As others have pointed out, the icon does not have a color property. It is just an image (jpg or png) and you have to swap the whole image. – JMers Aug 27 '18 at 18:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.