Fix: Increase SVG size and improve click event handling with load listener

src/app/map-svg/map-svg.css

@@ -1,7 +1,7 @@
 .svg-object {
   width: 100%;
-  height: auto;
-  max-width: 100%;
+  height: 600px;
+  max-width: 900px;
   pointer-events: all;
 }
 

src/app/map-svg/map-svg.ts

@@ -12,30 +12,47 @@ export class MapSvgComponent implements AfterViewInit {
   constructor(private elementRef: ElementRef) {}
 
   ngAfterViewInit(): void {
-    // Wait for object to load
-    setTimeout(() => {
+    const objectElement = this.elementRef.nativeElement.querySelector('object');
+    
+    if (objectElement) {
+      objectElement.addEventListener('load', () => {
         this.attachClickHandlers();
-    }, 500);
+      });
+    }
   }
 
   private attachClickHandlers(): void {
     const objectElement = this.elementRef.nativeElement.querySelector('object');
     if (!objectElement || !objectElement.contentDocument) {
-      console.error('SVG object not loaded');
+      console.error('SVG object not loaded or no contentDocument');
       return;
     }
 
     const svgDoc = objectElement.contentDocument;
     const paths = svgDoc.querySelectorAll('path[id]');
     
+    console.log(`Found ${paths.length} country paths`);
+    
     paths.forEach((path: Element) => {
       const countryCode = path.getAttribute('id');
       if (countryCode) {
         path.setAttribute('class', 'country-path');
+        path.setAttribute('style', 'cursor: pointer;');
         
         path.addEventListener('click', () => {
+          console.log(`Clicked country: ${countryCode}`);
           this.countryClick.emit(countryCode.toUpperCase());
         });
+        
+        path.addEventListener('mouseenter', () => {
+          (path as SVGPathElement).style.fill = '#3498db';
+          (path as SVGPathElement).style.opacity = '0.8';
+        });
+        
+        path.addEventListener('mouseleave', () => {
+          (path as SVGPathElement).style.fill = '';
+          (path as SVGPathElement).style.opacity = '';
+        });
       }
     });
   }

src/app/map/map.css

@@ -3,16 +3,18 @@
   min-height: 100vh;
   gap: 2rem;
   padding: 2rem;
+  box-sizing: border-box;
 }
 
 .map-column {
-  flex: 2;
+  flex: 3;
   display: flex;
   flex-direction: column;
 }
 
 .data-column {
   flex: 1;
+  min-width: 300px;
   display: flex;
   flex-direction: column;
   background-color: #f5f5f5;
@@ -26,13 +28,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  overflow: auto;
-}
-
-.world-map {
-  max-width: 100%;
-  height: auto;
-  cursor: pointer;
+  width: 100%;
+  min-height: 500px;
 }
 
 .country-info {

src/app/map/map.ts

@@ -17,18 +17,21 @@ export class MapComponent {
   constructor(private worldBankService: WorldBankService) {}
 
   onCountrySelected(countryCode: string): void {
+    console.log('Country selected:', countryCode);
     this.loading = true;
     this.error = null;
+    this.countryData = null;
     
     this.worldBankService.getCountryData(countryCode).subscribe({
       next: (data) => {
+        console.log('Received data:', data);
         this.countryData = data;
         this.loading = false;
       },
       error: (err) => {
+        console.error('API Error:', err);
         this.error = 'Failed to load country data';
         this.loading = false;
-        console.error('API Error:', err);
       }
     });
   }