Auto-show zoomed map when EXIF location data is detected

- Automatically display map when photo contains GPS coordinates
- Zoom to level 15 for EXIF locations (more detailed view)
- Add contextual header explaining location source
- Improve map container styling with shadow and colored header
- Show helpful message for EXIF vs manual location selection

src/components/report/LocationSelector.tsx

@@ -55,6 +55,7 @@ export function LocationSelector({ photos, onLocationChange, initialLocation }:
         setSelectedLocation(coords);
         setLocationSource('exif');
         setValidationError(null);
+        setShowMap(true); // Automatically show map with EXIF location
         onLocationChange(coords, 'exif');
       } else {
         setValidationError('Photo location is outside Ireland. Please select a location manually.');
@@ -87,8 +88,9 @@ export function LocationSelector({ photos, onLocationChange, initialLocation }:
       ? [selectedLocation.latitude, selectedLocation.longitude]
       : defaultCenter;
 
-    // Create map instance
-    const map = L.map(mapRef.current).setView(initialCenter, selectedLocation ? 13 : 7);
+    // Create map instance with higher zoom for EXIF locations
+    const initialZoom = selectedLocation && locationSource === 'exif' ? 15 : selectedLocation ? 13 : 7;
+    const map = L.map(mapRef.current).setView(initialCenter, initialZoom);
 
     // Add OpenStreetMap tiles
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -315,11 +317,23 @@ export function LocationSelector({ photos, onLocationChange, initialLocation }:
 
         {/* Map Picker */}
         {showMap && (
-          <div className="border border-gray-300 rounded-lg overflow-hidden">
-            <div className="bg-gray-100 px-4 py-2 border-b border-gray-300">
-              <p className="text-sm text-gray-700">
-                Click on the map to select a location, or drag the marker to adjust.
-              </p>
+          <div className="border border-gray-300 rounded-lg overflow-hidden shadow-lg">
+            <div className="bg-blue-50 px-4 py-3 border-b border-blue-200">
+              <div className="flex items-start">
+                <svg className="h-5 w-5 text-blue-600 mt-0.5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <div>
+                  <p className="text-sm font-medium text-blue-900">
+                    {locationSource === 'exif' ? 'Location from Photo' : 'Select Location'}
+                  </p>
+                  <p className="text-sm text-blue-700 mt-1">
+                    {locationSource === 'exif' 
+                      ? 'This location was extracted from your photo. You can adjust it by dragging the marker or clicking a new location.'
+                      : 'Click on the map to select a location, or drag the marker to adjust.'}
+                  </p>
+                </div>
+              </div>
             </div>
             <div ref={mapRef} className="w-full h-96" />
           </div>