6

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)

2
+25

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.

|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
0

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

|improve this answer|||||

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.