Fix: Simplify SVG loading using object tag instead of HttpClient

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

@@ -1,14 +1,8 @@
-.svg-container {
+.svg-object {
   width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-:host ::ng-deep svg {
-  max-width: 100%;
   height: auto;
+  max-width: 100%;
+  pointer-events: all;
 }
 
 :host ::ng-deep .country-path {

src/app/map-svg/map-svg.html

@@ -1 +1 @@
-<div class="svg-container"></div>
+<object data="map-image.svg" type="image/svg+xml" class="svg-object"></object>

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

@@ -1,5 +1,4 @@
 import { Component, Output, EventEmitter, AfterViewInit, ElementRef } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'app-map-svg',
@@ -10,38 +9,30 @@ import { HttpClient } from '@angular/common/http';
 export class MapSvgComponent implements AfterViewInit {
   @Output() countryClick = new EventEmitter<string>();
 
-  constructor(private http: HttpClient, private elementRef: ElementRef) {}
+  constructor(private elementRef: ElementRef) {}
 
   ngAfterViewInit(): void {
-    // Load SVG file and inject it into the component
+    // Wait for object to load
-    this.http.get('map-image.svg', { responseType: 'text' }).subscribe({
+    setTimeout(() => {
-      next: (svgContent) => {
+      this.attachClickHandlers();
-        const container = this.elementRef.nativeElement.querySelector('.svg-container');
+    }, 500);
-        if (container) {
-          container.innerHTML = svgContent;
-          this.attachClickHandlers();
-        }
-      },
-      error: (err) => {
-        console.error('Failed to load SVG:', err);
-      }
-    });
   }
 
   private attachClickHandlers(): void {
-    const svgElement = this.elementRef.nativeElement.querySelector('svg');
+    const objectElement = this.elementRef.nativeElement.querySelector('object');
-    if (!svgElement) return;
+    if (!objectElement || !objectElement.contentDocument) {
+      console.error('SVG object not loaded');
+      return;
+    }
 
-    // Find all path elements with id attributes (country codes)
+    const svgDoc = objectElement.contentDocument;
-    const paths = svgElement.querySelectorAll('path[id]');
+    const paths = svgDoc.querySelectorAll('path[id]');
     
     paths.forEach((path: Element) => {
       const countryCode = path.getAttribute('id');
       if (countryCode) {
-        // Add hover effect
         path.setAttribute('class', 'country-path');
         
-        // Add click handler
         path.addEventListener('click', () => {
           this.countryClick.emit(countryCode.toUpperCase());
         });

src/app/map/map.html

@@ -2,6 +2,7 @@
   <div class="map-column">
     <h2>Interactive World Map</h2>
     <div class="map-container">
+      <p>Map will load here</p>
       <app-map-svg (countryClick)="onCountrySelected($event)"></app-map-svg>
     </div>
   </div>