Hey there! I've done exactly this before with AmCharts maps—here's a straightforward way to trigger info windows from external sidebar links:

Step 1: Make your map instance accessible #

First, when initializing your map, store the instance in a global variable (or make it accessible to your click handler somehow). This lets us reference the map later from the sidebar links:

// Initialize map and save the instance
let worldMap = am4core.create("map-container", am4maps.MapChart);

// ... rest of your map setup (load geodata, configure series, etc.)

Step 2: Add sidebar links with country identifiers #

Create your sidebar links and include a custom data attribute that matches the ID used in your map's geodata (usually ISO 3166-1 alpha-2 codes like US, FR, JP):

<div class="country-sidebar">
  <a href="#" data-country-code="US">United States</a>
  <a href="#" data-country-code="CA">Canada</a>
  <a href="#" data-country-code="GB">United Kingdom</a>
</div>

Step 3: Add click handlers to trigger the info window #

Write a script that listens for clicks on your sidebar links, finds the corresponding map polygon, and triggers the info window (plus optional zoom/pan):

// Attach click events to all sidebar links
document.querySelectorAll('.country-sidebar a').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // Stop the default link navigation
    
    // Get the country code from the data attribute
    const countryCode = this.getAttribute('data-country-code');
    // Get the main map series (adjust index if you have multiple series)
    const mapSeries = worldMap.series.getIndex(0);
    
    // Find the polygon for the selected country
    const targetPolygon = mapSeries.getPolygonById(countryCode);
    
    if (targetPolygon) {
      // Trigger the "hit" event to open the default tooltip/info window
      targetPolygon.dispatchImmediately("hit");
      
      // Optional: Zoom and pan to focus on the country
      worldMap.zoomToMapObject(targetPolygon);
    }
  });
});

Step 4: Ensure your map has info windows configured #

Make sure your map polygons have a tooltip or custom info window set up—otherwise, triggering the "hit" event won't do anything. Here's a quick example of setting up a default tooltip:

// Configure tooltip for map polygons
const polygonTemplate = mapSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}: {population}"; // Customize with your data
polygonTemplate.fill = am4core.color("#4682B4");

Pro Tips: #

• Double-check that your data-country-code values match exactly with the IDs in your map's geodata (case-sensitive!).
• If you're using a custom modal instead of the default tooltip, replace the dispatchImmediately("hit") line with your modal's show function, passing in the polygon's data (like targetPolygon.dataItem.dataContext).
• If you have multiple map series, use mapSeries = worldMap.series.get("your-series-name") instead of getIndex(0) to target the right one.

内容的提问来源于stack exchange，提问作者anubhav