Example for Polyline (ideally with arrows)

[AISMap]

Hi,

After having hit the performance border with leaflet standard drawing I found your project and it really looks amazing!

Before starting to work on migrating my app I would like to ask for an example of drawing a Polyline. Ideally with having arrows ever n-th point. Is something like this available?

Thanks for your kind support

[vito2005]

I have the same problem!
It will be great to create an example with polylines. I'm working with ur example of french cities. I have got 10000 point and it is necessary to connect them with lines.
Now I did smth like this:

for (let key = 0; key < value.length; key++){
  let coords = project([value[key].lat, value[key].lon]);
  let index = 0;
  let markerSprite = new PIXI.Sprite(textures[index]);
  var lineLatLngs = (value[key+1])
    ? [[value[key].lat, value[key].lon], [value[key+1].lat, value[key+1].lon]]
    : [[value[key].lat, value[key].lon], [value[key].lat, value[key].lon]];
  projectedLineCoords = lineLatLngs.map(coords=>{
    return project(coords)
  });
  let line = new PIXI.Graphics();
  line.lineStyle(3 / scale, 0x3388ff, 1);
  line.x = projectedLineCoords[0].x;
  line.y = projectedLineCoords[0].y;
  projectedLineCoords.forEach(function(coords, index) {
    if (index == 0) line.moveTo(0, 0);
    else line.lineTo(coords.x - line.x, coords.y - line.y);
  });
  markerSprite.textureIndex = index;
  markerSprite.x0 = coords.x;
  markerSprite.y0 = coords.y;
  markerSprite.anchor.set(0.5, 0.5);
  let tint = d3.color(value[key].color);
  markerSprite.tint = 256 * (tint.r * 256 + tint.g) + tint.b;
  container.addChild(markerSprite);
  container.addChild(line);
  markerSprites.push(markerSprite);
  lines.push(line);
  markerSprite.dcId = value[key].dcId;
}

But the problem is how to redraw lines when i change zoom.
Thank u fpr ur lib.

[manubb]

Hi.
As @vito2005 suggested, you can use PIXI.Graphics to draw lines.
If you want stroke width to be independant of zoom value, you have to redraw the polyline when zoom changes. (You should avoid to reproject the points and you can use a different Graphics at each zoom level and store the Graphics container in a cache object so that you avoid computing twice the same thing.)
Another possibility is to use graph-draw which has demos displaying polylines and graphs on a leaflet map.
For adding arrows, you may use rotated sprites.
(Sorry no demo and not much time for all these things right now.)

[Azbesciak]

@vito2005 did you manage it? Could you share some sample if so?