Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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?

<defs>
    <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" />
    </pattern>

<defs>

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)

share|improve this question

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.

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

 
discard

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.