am5charts Click event listener in maps

lorisca 0
Viewed 23

I am building a world map with am5charts in HTML/JS and I would like that, on clicking a country, it opens the link given in the "description" attribute of that specific country. For some reason, it seems that after "setAll" the modified countries become deaf and don't listen to the event "click"... If I define the new attributes after the event.click, then I can't retrieve the new variable in the event.

Below a snippet of my code. Thank you!

PS. I am new in asking questions here so don't hesitate to let me know if I did something wrong!

HTML

<html>

<head>
    <title></title>
    <link rel="stylesheet" href="css/style.css" media="screen">

</head>

<body>
    <!-- <div id="header"></div> -->

    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/map.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>
    <script src="https://www.amcharts.com/lib/5/geodata/worldHigh.js"></script>
    <script src="https://www.amcharts.com/lib/5/geodata/peruHigh.js"></script>

    <div id="chartdiv"></div>
    <div id="info"></div>


    <script src="js/script.js"></script>

    <!-- <div id="footer"></div> -->
</body>

</html>

CSS

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: 95vh;
    margin-bottom: 100vh;
}

JS

// Create root and chart
var root = am5.Root.new("chartdiv");

// Set themes
root.setThemes([
    am5themes_Animated.new(root)
]);

var chart = root.container.children.push(
    am5map.MapChart.new(root, {
        panX: "rotateX",
        projection: am5map.geoNaturalEarth1(),
        wheelY: "none",
        maxPanOut: 0.0
    })
);        

var backgroundSeries = chart.series.unshift(
    am5map.MapPolygonSeries.new(root, {})
);

// sea color
backgroundSeries.mapPolygons.template.setAll({
    fill: am5.color(0xd4f1f9),
    stroke: am5.color(0xd4f1f9),
});

backgroundSeries.data.push({
    geometry: am5map.getGeoRectangle(90, 180, -90, -180)
});


chart.events.on("wheel", function (ev) {
    if (ev.originalEvent.ctrlKey) {
        ev.originalEvent.preventDefault();
        chart.set("wheelY", "zoom");
    }
    else {
        chart.set("wheelY", "none");
        overlay.show();
        overlay.setTimeout(function () {
            overlay.hide()
        }, 800);
    }
});

// Create polygon series
var polygonSeries = chart.series.push(
    am5map.MapPolygonSeries.new(root, {
        // geoJSON: am5geodata_worldLow,
        geoJSON: am5geodata_worldHigh,
        // geoJSON: am5geodata_peruHigh,
        exclude: ["AQ", "FK", "GS", "TF", "HM"],
        fill: am5.color(0x095256)
    })
);



// Hover color
polygonSeries.mapPolygons.template.states.create("hover", {
    fill: am5.color(0x677935),
});



// Add all blogs URLs
polygonSeries.data.setAll([{
    id: "FR",
    name: "France",
    description: "www.google.com"
}, {
    id: "ES",
    name: "Spain",
    value: 200
}]);



polygonSeries.mapPolygons.template.events.on("click", function (ev) {
    var clickedCountry = ev.target.dataItem.get("id");
    console.log(clickedCountry);
    window.open(ev.target.dataItem.get("description"));
});
amcharts javascript html
1 Answers

I found an answer! Using Promise.all as shown below.

// click event to open link
polygonSeries.mapPolygons.template.events.on("click", (ev) => {
    var clickedCountry = ev.target.dataItem.get("id");
    var clickedData = polygonSeries.getDataItemById(clickedCountry);
    var pageToOpen = clickedData.dataContext.description;

    if (pageToOpen in window) { // check if "description" is empty
        console.log("Not visited");
    } else {
        Promise.all([
            window.open(pageToOpen)
        ]);
    }
});

...

// list of countries with their links
polygonSeries.data.setAll([
    {
        id: "FR", description: "https://www.google.com" }
    }
lorisca0
Related