Map line with two arrows
Normally, a MapLine object can have a single arrow head. This demo shows how we can create additional Triangle objects to create a two-way arrows on a MapChart.
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */
// Create map instancevar chart = am4core.create("chartdiv", am4maps.MapChart);
// Set map definitionchart.geodata = am4geodata_worldLow;
// Set projectionchart.projection = new am4maps.projections.Miller();
// Create map polygon seriesvar polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
// Make map load polygon (like country names) data from GeoJSONpolygonSeries.useGeodata = true;
// Configure seriesvar polygonTemplate = polygonSeries.mapPolygons.template;polygonTemplate.tooltipText = "{name}";polygonTemplate.fill = am4core.color("#74B266");
// Remove AntarcticapolygonSeries.exclude = ["AQ"];
// Add some datapolygonSeries.data = [ { id: "US", name: "United States", value: 100 }, { id: "FR", name: "France", value: 50 }];
// Add line seriesvar lineSeries = chart.series.push(new am4maps.MapLineSeries());lineSeries.mapLines.template.strokeWidth = 4;lineSeries.mapLines.template.stroke = am4core.color("#e03e96");lineSeries.mapLines.template.nonScalingStroke = true;
var line = lineSeries.mapLines.create();line.multiGeoLine = [ [ { latitude: 48.856614, longitude: 2.352222 }, { latitude: 40.712775, longitude: -74.005973 }, { latitude: 49.282729, longitude: -123.120738 } ]];
// Add a map object to linevar arrow1 = createArrow(line, false);arrow1.position = 1;arrow1.nonScaling = true;
var arrow2 = createArrow(line, true);arrow2.position = 0.01;arrow2.nonScaling = true;
function createArrow(line, reverse) { var arrow = line.createChild(am4maps.MapLineObject); arrow.shouldClone = false; arrow.width = 8; arrow.height = 10; arrow.mapLine = line; arrow.position = 0.5; arrow.adjustRotation = true;
var triangle = arrow.createChild(am4core.Triangle); //triangle.shouldClone = false; triangle.fillOpacity = 1; triangle.width = am4core.percent(100); triangle.height = am4core.percent(100); triangle.rotation = 90; triangle.horizontalCenter = "middle"; triangle.verticalCenter = "middle"; if (reverse) { triangle.direction = "bottom"; }
return arrow;}<div id="chartdiv"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#chartdiv { width: 100%; height: 400px;}map-line-with-two-arrows