CODEWITHSUNDEEP
typescriptleafletreact-leafletpolylinepolyline-decorator
user3050590
user3050590

Reputation: 1716

Change the color of the L.Symbol.arrowhead in typescript Leaflet

I am implementing L.symbol.arrowhead to show arrows on polyline by using polyline-decorator plugin. I am able to dynamically change the polylines color, however, I am not able to dynamically change the color of the arrows. I am using react-leaflet with typscript.

function PolylineDecorator({ patterns, polyline,color }) {
  const map = useMap();
  useEffect(() => {
    if (!map) return;
   L.polyline(polyline, {color}).addTo(map);  // added color property
    L.polylineDecorator(polyline, {
      patterns,
    }).addTo(map);
  }, [map]);
 
  return null;
}

const arrow = [
{
  offset: "100%",
  repeat: 0,
  symbol: L.Symbol.arrowHead({
    pixelSize: 15,
    polygon: false,
    pathOptions: { stroke: true }
  })
}];


 {currentData?.movingActors.map(line =>(<PolylineDecorator key={line.id} patterns ={arrow} polyline={position}  color = {modeColor(line.mode)} />) ) }   //here I used color parameters to dynamically add colors

When I try to access the pathOptions via

arrow.forEach((line) => {line.symbol.pathOptions})

the typescript error I get is

"Property 'pathOptions' does not exist on type 'ArrowHead"

Upvotes: 0

Views: 1140

Answers (1)

user3050590
user3050590

Reputation: 1716

I have solved my problem by using Arrowhead plugin. It is much easier as it takes the same color as that of the polyline.

So my new solution looks like

function PolylineDecorator({polyline,color }) {
  const map = useMap();
  useEffect(() => {
    if (!map) return;
  var x = L.polyline(polyline, {color}).arrowheads({ size: '5%' });
  x.addTo(map);
  }, [map]);
 
  return null;
}


 {currentData?.movingActors.map(line =>(<PolylineDecorator key={line.id} polyline={position}  color = {modeColor(line.mode)} />) ) }

However, if someone else has made it work with L.symbol.arrowhead then please update it here for others.

Upvotes: 1

Related Questions