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

YaFred · Accepted Answer · 2015-10-01T11:25:50.280

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

score 4 · Answer 2 · edited May 23 '17 at 11:54

If you create a polyline you're in fact adding an element to the SVG element which Leaflet uses to draw it's overlays. Styling SVG path elements is different from styling regular HTML elements. There's no such thing as border and background-color etc. It has different properties, if you're interested here's a nice read on the matter:

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

You can style Leaflet's path elements when you instanciate them via options or via CSS using the properties (related to styling) described in the documentation here:

http://leafletjs.com/reference.html#path

Via options:

new L.Polyline([...], {
    weight: 3,
    color: 'red',
    opacity: 0.5
}).addTo(map);

Via CSS:

new L.Polyline([...], {
    className: 'polyline'
}).addTo(map);

.polyline {
    weight: 3,
    color: red,
    opacity: 0.5
}

However, what you want, using an image simply isn't possible. You can use images as fill for SVG paths, but it would be impossible for your usecase. You'de need to add a pattern definition to the SVG Leaflet is using and then you could use that id as the fill property as outlined in this answer: https://stackoverflow.com/a/3798797/2019281 but will always fill/tile the image horizontally which won't work if your polyline is vertical.

many thanks, i understand the idea, i have circular shape which won't effect in any direction.... just need to fill that shape in line,,, — Suhail Mumtaz Awan, Oct 01 '15 at 11:57

How to apply css on polylines : leaflet

2 Answers2