[GIS] Applying css on polylines using Leaflet

leafletleaflet-draw

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);

Best Answer

My understanding of Leaflet is that it is built to cover about 90% of use cases and for simplicity and compactness. Unfortunately I don't think your usecase is covered in that 90%. This is the API for the upcoming Leaflet 1.0 for Paths (Polyline is a subclass) and there are just simple options for colour, width, dashes etc.

The following plugins may be of interest though:

Leaflet.pattern

Leaflet.PolylineDecorator

Related Question