Phase E: Implement two-column UI layout with SVG map and data display

src/app/map/map.html

@@ -1 +1,45 @@
-<p>map works!</p>
+<div class="container">
+  <div class="map-column">
+    <h2>Interactive World Map</h2>
+    <div class="map-container">
+      <img src="assets/map-image.svg" alt="World Map" class="world-map" />
+    </div>
+  </div>
+  
+  <div class="data-column">
+    <h2>Country Information</h2>
+    
+    <div *ngIf="loading" class="loading">
+      Loading country data...
+    </div>
+    
+    <div *ngIf="error" class="error">
+      {{ error }}
+    </div>
+    
+    <div *ngIf="countryData && !loading" class="country-info">
+      <div class="info-item">
+        <strong>Country Name:</strong> {{ countryData.name }}
+      </div>
+      <div class="info-item">
+        <strong>Capital:</strong> {{ countryData.capital }}
+      </div>
+      <div class="info-item">
+        <strong>Region:</strong> {{ countryData.region }}
+      </div>
+      <div class="info-item">
+        <strong>Income Level:</strong> {{ countryData.incomeLevel }}
+      </div>
+      <div class="info-item">
+        <strong>Longitude:</strong> {{ countryData.longitude }}
+      </div>
+      <div class="info-item">
+        <strong>Latitude:</strong> {{ countryData.latitude }}
+      </div>
+    </div>
+    
+    <div *ngIf="!countryData && !loading && !error" class="placeholder">
+      Click on a country to view its information
+    </div>
+  </div>
+</div>