2

I am using AmChart v5 for creating a map view. In the map view there is a feature like user can select any location point on the map and then I am drawing a route from users home location to the destination he just selected.

But now, on certain condition I have to remove the route. I want to know how to clear up the route that is currently drawn on the map.

Please look at the screenshot below for clear understanding. https://i.postimg.cc/1zq0b8vx/How-to-clear-up-selected-route-1.png

Here is the code that I am using

//-------- This is how I am trying to remove routes, but its not working as expected
for (let i = 0; i <= chart.series.length; i++) {
  let item = chart.series.values[i];
  if (item) {
    if (item.className == 'MapPointSeries') {
      let pointSeries = item as am5map.MapPointSeries;
      if (pointSeries._settings.name == 'ArrowSeries') {
        chart.series.removeIndex(i);
        item.bullets.clear();
      }
    }
  }
}


//-------- Drawing the route from home location to destination location
am5.array.each(this.destinations, function (did) {

  let coordinates: Position[] = [
    [did.sourcelongitude, did.sourcelatitude],
    [did.destinationlongitude, did.destinationlatitude]
  ];

  var lineDataItem = lineSeries.pushDataItem({
    geometry: {
      type: "MultiLineString",
      coordinates: [coordinates]
    }
  });

  var arrowSeries = chart.series.push(
    am5map.MapPointSeries.new(root, { name: 'ArrowSeries' })
  );

  arrowSeries.bullets.push(function () {
    var arrow = am5.Graphics.new(root, {
      fill: am5.color('#fff'),
      stroke: am5.color('#fff'),
      draw: function (display) {
        display.moveTo(0, -3);
        display.lineTo(8, 0);
        display.lineTo(0, 3);
        display.lineTo(0, -3);
      }
    });

    return am5.Bullet.new(root, {
      sprite: arrow
    });
  });

  arrowSeries.pushDataItem({
    lineDataItem: lineDataItem,
    positionOnLine: 0.5,
    autoRotate: true
  });
})

I following this guide from amChart initially, but there is no clear indication of how to remove routes once it is drawn on the map.

Ritesh
  • 21
  • 2

1 Answers1

1

For AmChart 5 maps, you can clear up the route like this:

lineSeries.mapLines.removeIndex(0);

Please also check the example below, where I put a button to remove the routes on demand:

https://jsfiddle.net/aw127Lgr/

Valeriu Ciuca
  • 2,084
  • 11
  • 14