I'm drawing Lines with leaflet.js an have to create custom styled polylines. So i got various image files which should be like a repeated background image in HTML. So is it possible to give a drawn L.polyline a Custom background image (texture)?

I know SVG has Support for that but is It also possible via leaflet API?

    <pattern id="bad" patternUnits="userSpaceOnUse" x="0" y="0"
     width="10" height="10" viewBox="0 0 10 10" >
        <image x="0" y="0" width="10px" height="10px"
         xlink:href="img/non-sprite/grade_0.png" />


And tried to use the pattern by assign its ID as color/fill without any luck.

L.circle(lat, lng, 200, {fill : 'url(#best)'}).addTo(map);

The circle is shown on map but only in color 0033ff (Leaflet default line color)

2 Answers 2


This seems to potentially answer your question: https://github.com/bbecquet/Leaflet.PolylineDecorator

I can't' comment on the appropriateness of the method... seems like a lot of code for a simple problem.

  • I don't think it has support for filling a polygon with a pattern. Commented Nov 26, 2013 at 1:51

Dash array alows you you have a dashed line via svg on a path. No images but you probably don't actually want that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.