<div style="position: relative; max-width: 800px; margin: auto;">
  <img src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Mexico_blank_map.svg" 
       usemap="#mexicoMap" 
       style="width: 100%; filter: drop-shadow(0 0 10px rgba(0,0,0,0.1));">
  
  <map name="mexicoMap">
    <!-- Ejemplo para CDMX -->
    <area shape="circle" 
          coords="300,400,15" 
          data-state="cdmx" 
          title="5 organizaciones afiliadas"
          onclick="showAffiliates('cdmx')"
          style="cursor: pointer;">
  </map>
  
  <div id="infoPanel" style="position: absolute; top: 20px; right: 20px; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); display: none;"></div>
</div>

<script>
  function showAffiliates(state) {
    const info = {
      cdmx: "<h3>CDMX</h3><ul><li>Organización A</li><li>Organización B</li></ul>"
    };
    document.getElementById("infoPanel").innerHTML = info[state];
    document.getElementById("infoPanel").style.display = "block";
  }
</script>