How to apply css on polylines : leaflet

Question

I am working with the application which uses leaflet api.

Introduction

I needed to draw different types of fences, using decorators i can somewhat apply good visuals to the polylines but not much.

Problem

I was willing to show twisted wires instead of dashes, dots or plain lines and I know the twisted wire line will be an image but can't find help about applying custom css to polylines.

Script Example

         var fence2Icon = L.icon({
                            iconUrl: 'xxxx.png',
                            iconSize: [5, 20]
                            iconAnchor: [5, 18]
                        });

                        // Add coordinate to the polyline
                        var polylineFence2 = new L.Polyline([], { color: 'red' });
                    function fencePlace2(e) {
                        // New marker on coordinate, add it to the map
                new L.Marker(e.latlng, { icon: fence2Icon, draggable: false }).addTo(curr);
                        // Add coordinate to the polyline
               polylineFence2.addLatLng(e.latlng).addTo(curr);
            var decorator = L.polylineDecorator(polylineFence2, {
            patterns:[{offset:5,repeat:'20px',symbol:new L.Symbol.Dash({pixelSize:5})
                         }]
                    }).addTo(curr);
                    }    

                L.easyButton('fa-flash', function () {
                            $('.leaflet-container').css('cursor', 'crosshair');
                            map.on('click', fencePlace2);
                            polylineFence2 = new L.Polyline([], { color: 'red' });
                        }).addTo(map);

If someone know anything about polyline or another way please do help. Thanks for your time:-)

Answer 1

You can add a class in the options of your polyline ...

var polyline = L.polyline(latlngs, { className: 'my_polyline' }).addTo(map);

and add your own settings in the CSS ...

.my_polyline { 
  stroke: green;
  fill: none;
  stroke-dasharray: 10,10; 
  stroke-width: 5;  
}

Here is an example: http://jsfiddle.net/FranceImage/9dggfhnc/

You can also access some options directly ...

var polyline = L.polyline(latlngs, { dashArray: '10,10' }).addTo(map);

See Path Options