Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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., lng, 200, {fill : 'url(#best)'}).addTo(map);

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

share|improve this question

This seems to potentially answer your question:

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

share|improve this answer
I don't think it has support for filling a polygon with a pattern. – Paulo Scardine Nov 26 '13 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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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