6

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.

Improve this question

2 Answers 2

Reset to default
3

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.

Improve this answer
2
  • 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? Commented Feb 12, 2017 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. Commented Feb 12, 2017 at 20:27
3

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

Improve this answer
2
  • 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. Commented Feb 12, 2017 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 Commented Feb 13, 2017 at 7:27

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.