3

I'd like to change the style of certain points based on events, but I can't figure out how to do it.

Here's a working jsfiddle for an example.

var points = new L.geoJson(pointsData, {
  pointToLayer: function(feature, latlng) {
    if (feature.properties.name === "Point1") {
      return L.circleMarker(latlng, {
        radius: 10,
        fillColor: "blue",
        color: "black"
      });

    } else if (feature.properties.name === "Point2") {
      return L.circleMarker(latlng, {
        radius: 10,
        fillColor: "green",
        color: "white"
      });

    } else if (feature.properties.name === "Point3") {
      return L.circleMarker(latlng, {
        radius: 10,
        fillColor: "orange",
        color: "purple"
      });
    }
  }
}).addTo(map);

In the above example, how would I change the style of, say, Point1 after it's been created?

I haven't found anything in the documentation, or online.

Is it possible?


I ended up splitting the geojson up for each point, and created a function that returns a new geojson object.

point1Data = {
    ...
};

point2Data = {
    ...
};

function createPoint(pointData, radius, fill, stroke) {

    return new L.geoJson(pointData, {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, {
                radius: radius,
                fillColor: fill,
                color: stroke,
            });
        }
    });
}

point1.createPoint(point1Data, 10, "red", "black").addTo(map);
point1.remove();
point1 = createPoint(point1Data, 10, "black", "red").addTo(map);

Here's a working jsfiddle for an example.

2

Use eachLayer to loop through your GeoJSON features and setStyle to change the feature's style.

Here's a tweaked version of your fiddle that waits a second then makes Point1 red.

  • Ahh, thanks! I ended up splitting the geojson up for each point, and then created a function that returns a new geojson object. I edited my question to show. Is there anything wrong with doing it that way, or is your example the preferred way? – geogeogeo Feb 12 '17 at 19:34
  • 1
    Glad to help. Either way works. I don't think there's a best practice for this and I wouldn't worry about optimizing this or using a clever solution until you have a lot of data to manage. Go with what makes the most sense to you. – Derek Swingley Feb 12 '17 at 20:27
2

To set your points style after some action on your layer point (e.g. after click), you can do it with onEachFeature function. To get along with your code the function can look like this:

function onEachFeature(feature, layer) {
    layer.on('click', function (e) {
        if(feature.properties.name === "Point1") {
          this.setStyle({fillColor: "black", fillOpacity: 1});
        }
      else if(feature.properties.name === "Point2") {
          this.setStyle({fillColor: "green", fillOpacity: 1});
        }
      else if(feature.properties.name === "Point3") {
          this.setStyle({fillColor: "red", fillOpacity: 1});
        };
    });
}

Point will change it's color after you click on it. Example on codepen: http://codepen.io/dagmara223/pen/OWrgVd

  • Thanks! So the onEachFeature property can be used for events? That's cool. I thought it was used to do something with the data immediately. – geogeogeo Feb 12 '17 at 19:58
  • @geogeogeo yes you can assign here a function that fires after some action (in example click or mouseover) or just after some time interval – d324223 Feb 13 '17 at 7:27

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.