I'm very new to HTML, and I'm currently working on a personal project with an interactive amCharts map. When a country is clicked, it changes colour, marking it "active." I am struggling to keep the countries "active" between web reloads. (I am mainly using this code to make an interactive notion widget for my travel page)
I've tried using local storage to preserve these clicked states across page reloads for personal use, but I couldn't get it to work.
I've used localstorage successfully on a button I coded before to keep its state if it's clicked or not between web reloads.
I couldn't find clear guidance in amCharts documentation on how to achieve this. Can anyone provide insights or code examples for storing and retrieving the active states of clicked countries using local storage or another method?
The code below:
<html><head><meta charset="UTF-8"><title>Interactive Polygon Map</title><!-- Styles --><style> #chartdiv { width: 100%; height: 500px; }</style><!-- Resources --><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/geodata/worldLow.js"></script><script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script></head><body><div id="chartdiv"></div><script> am5.ready(function () { var root = am5.Root.new("chartdiv"); root.setThemes([am5themes_Animated.new(root)]); var chart = root.container.children.push(am5map.MapChart.new(root, { panX: "rotateX", panY: "translateY", projection: am5map.geoNaturalEarth1() })); var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, { geoJSON: am5geodata_worldLow, exclude: ["AQ"] })); chart.chartContainer.set("background", am5.Rectangle.new(root, { fill: am5.color(0x191919), fillOpacity: 1.0 })); polygonSeries.mapPolygons.template.setAll({ tooltipText: "{name}", toggleKey: "active", interactive: true, fill: am5.color("#FFD6E6"), }); polygonSeries.mapPolygons.template.states.create("hover", { fill: am5.color("#DEB4C6") }); polygonSeries.mapPolygons.template.states.create("active", { fill: am5.color("#B9CCB1") }); // Function to handle when a country is clicked function handleCountryClick(event) { var polygon = event.target; var isActive = polygon.isActive; polygon.isActive = !isActive; } // Add a click event listener to handle country clicks polygonSeries.mapPolygons.events.on("hit", handleCountryClick); // Set clicking on "water" to zoom out chart.chartContainer.get("background").events.on("click", function () { chart.goHome(); }); // Add zoom control var zoomControl = chart.set("zoomControl", am5map.ZoomControl.new(root, {})); var homeButton = zoomControl.children.moveValue(am5.Button.new(root, { paddingTop: 10, paddingBottom: 10, icon: am5.Graphics.new(root, { svgPath: "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8", fill: am5.color(0xffffff) }) }), 0); homeButton.events.on("click", function () { chart.goHome(); }); // Make stuff animate on load chart.appear(1000, 100) });</script></body></html>