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?
[GIS] Which style options are available for polylines in Leaflet
geojsonjavascriptleafletlinestyle
Related Solutions
You could use PyQGIS for that (not sure is the best solution for it, though).
Assuming your layer has a color field (type: string), select (or activate) the layer in the QGIS ToC, open the QGIS Python console, and copy this code snippet:
layer = iface.activeLayer()
attr = layer.renderer().classAttribute()
attrColor = 'color' # Name of the field to store colors
fieldIndex = layer.dataProvider().fieldNameIndex(attrColor)
attrFeatMap = {}
for cat in layer.renderer().categories():
expr = "\"" + attr + "\"='" + unicode(cat.value()) + "'"
for f in layer.getFeatures(expr):
attrMap = {fieldIndex : cat.symbol().color().name()}
attrFeatMap[f.id()] = attrMap
layer.dataProvider().changeAttributeValues( attrFeatMap )
After running it, you'll obtain this:
Let me know if you face any problem.
- title
- description
- marker-size
- marker-symbol
- marker-color
- stroke
- stroke-opacity
- stroke-width
- fill
- fill-opacity
Mapbox.js uses the simplestyle spec. That's where you can find out more about defaults and accepted values.
Adding a dashed line is a little more complicated, see dashArray in the leaflet documentation which will work with mapbox.js.
Best Answer
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.
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: