1

I added a polyline layer as GeoJSON within Leaflet and want to style it.

The following options to set the style I could find (and which work) are:

  • color
  • weight
  • opacity

What are other available options, is it possible to add a border around the line?

2

The available options for styling L.Polylines are clearly documented in the Leaflet API reference. Please note that styling options are common with circles, polygons and any other paths, and so appear as "Options inherited from L.Path".

Is it possible to add a border around the line?

No, it's not possible.

Depending on your needs, you might want to either buffer the line, or to display the line twice, displaying the heavier stroke underneath to serve as a "casing" of sorts.

  • thanks! The option with the buffer sounds good - how can it be done? I only found quite complicated methods to apply it, is there an built-in function provided by Leaflet? – the_chimp Jun 25 '17 at 17:03
2

This seems to be a highly ranked result on search engines so I thought I would stop in and update + add to it.

The Leaflet documentation seems to have been updated since the original answer was provided (v1.03 vs v1.40 at the time of this posting), but even then the documentation on polylines hasn't ever identified any style options outside of the 3 used in the example (that the OP mentions). That makes finding the rest of the options somewhat time consuming. Those options are actually inherited from Path and that's where you'll find the documentation on them. I've attached an image of the options available and tested as many of them as I could to see if they work (2nd column), but only in so far as my current project can make use of them.

enter image description here

NOTE the last item, 'className'. This will allow you to set a CSS class name and use CSS (or SASS) to style your Polyline instead of hard coding it. It should also be noted that CSS rules seem to override the Leaflet style options you configure in your code. Unfortunately, that still doesn't get you borders, ie. border: 1px solid red; doesn't work. This is due to the fact that these aren't HTML elements, but rather SVG.

SVG doesn't recognize the concept of a "border" aka a line around an object. A Polyline is already a "line". SVG does recognize the concept of fill and stroke, however, which can be used to achieve a border-like effect. If you draw a polygon around the polyline and set the stroke to your desired border style and the fill color to your desired line color you'll get a "border". You can read more on that approach here: https://stackoverflow.com/questions/36132689/how-to-convert-polyline-with-weight-to-polygon-in-leaflet

And in text those Path options are:

  • stroke
  • color
  • weight
  • opacity
  • lineCap
  • lineJoin
  • dashArray
  • dashOffset
  • fill
  • fillColor
  • fillOpacity
  • fillRule
  • bubblingMouseEvents
  • renderer
  • className
0

As mentionned above, you can draw the line twice to get a line border:

var style = {
color: "#008000",
weight: 5,
opacity: 0.6
 }, 
stroke = {
color: "#fff",
weight: 7,
opacity: 0.4
};
polyline_2 = new L.Polyline(polylinePoints, stroke);
polyline_2.addTo(active_track);
polyline = new L.Polyline(polylinePoints, style);
polyline.addTo(active_track);

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.