CODEWITHSUNDEEP
javascriptleafletleaflet.draw
disguisedtoast
disguisedtoast

Reputation: 339

How do I change the stroke color for polylines?

My web app allows users to draw polylines on them. I want to give users the option to change the polyline's stroke color.

I looked at the polyline object in console log. In the options property, there is a property called color. I have tried this.

selectedLayer.options.color = "#2196F3";

And this.

selectedLayer.color = "#2196F3";

And this.

selectedLayer.setStyle({ color: "#2196F3"});

The stroke color should have changed, but it does not. What is the proper way to set a polyline's stroke color after it has been created? As far as I know, this is not an issue with polygon's fillColor property.

Upvotes: 0

Views: 1712

Answers (2)

saadat ali
saadat ali

Reputation: 1053

Use latest version of leaflet which is 1.5. The code below will work for you.

var polyline = new L.Polyline([
  [-45, 45],
  [45, -45]
], {
  color: 'green',
  weight: 5,
  opacity: 0.5
}).addTo(map);

map.fitBounds(polyline.getBounds());
polyline.setStyle({color:'#2196F3'});

Green Color which is set initially has been replaced by the color you have mentioned

Upvotes: 6

StefanN
StefanN

Reputation: 911

You can use css variables for that. Take a look at the following example:

const div = document.querySelector('div');
document.querySelector('button')
  .addEventListener('click', () => {
    div.style.setProperty('--line-color', 'green');
  });
:root {
  --line-color: red;
}

div {
  border: 1px solid var(--line-color);
  width: 250px;
  height: 250px;
}
<div>Hello world</div>

<button>Change color to green</button>

Upvotes: -2

Related Questions