Separate colors for stroke, fill

[chaitanya1248]

I've added arrowheads along the path of a GeoJson. I'm wondering if there is a way to customize the stroke color to be different from fill color?

Here are the options I tried:

        {
          offset: "20%",
          repeat: "30%",
          symbol: L.Symbol.arrowHead({
            pixelSize: zoom * 2,
            pathOptions: {
              fillOpacity: 1,
              weight: 0,
              // fill: true,
              // fillColor: "#c71002",
              color: "#c71002",
              stroke: true,
              strokeColor: "#fff"
            }
          })
        }
      ]

[miko866]

Try this code but it's static.

 let arrow = L.polylineDecorator(layer, {
                id: layer._leaflet_id,
                patterns: [
                  {
                    offset: '100%',
                    endOffset: '100%',
                    repeat: 0,
                    symbol: L.Symbol.arrowHead({
                      pixelSize: 15,
                      polygon: false,
                      pathOptions: {
                        fill: false,
                        fillColor: '',
                        fillOpacity: 1,
                        stroke: true,
                        color: feature.properties.color,
                        opacity: 1,
                        weight: 5,
                        lineCap: 'square',
                        lineJoin: 'miter',
                      },
                    }),
                  },
                ],
              }).addTo(vm.map);

If you want it dynamically you will need something so:

  this.arrowHeads.map((arrow) => {
        if (arrow.options.id === this.layerShape._leaflet_id) {
          arrow.options.patterns[0].symbol.options.pathOptions.weight = val;
        // Refresh map after update arrow value
          this.map.fitBounds(this.map.getBounds());
        }
      });