javascriptleafletlinedrawmapbox

JavaScript - How to draw black outline (or stroke) for a red line - leaflet mapbox

I try to figure out how to draw linestring with fillcolor: red and outline: black. Like the following image:

style = {
        fillColor: 'rgb(255,0,0)',
        outline: 'rgb(0,0,0)'
        weight: 10
    };

It does not work, maybe I need to use strokeStyle?

Any help will be appreciated.

Solution

  • Lines do not, and cannot have a fill colour.

    What you really want is to draw two line symbols per line geometry, while making sure the black line is drawn first (i.e. behind) the red one.

    In Leaflet, create two map panes, make sure their z-indexes are right (read the tutorial!), add layers as appropriate, reusing the line geometry but changing the symbol appearance.