better projections

frontend/src/App.jsx

@@ -271,9 +271,9 @@ const APP = () => {
     if (!map) return;
 
     const applyProjection = () => {
-      map.setProjection({ type: mapProjection });
-
       if (mapProjection === 'globe') {
+        map.setProjection({ type: 'globe' });
+        map.easeTo({ pitch: 0, duration: 1000 });
         map.setSky({
           'sky-color': '#199EF3',
           'sky-horizon-blend': 0.5,
@@ -285,8 +285,20 @@ const APP = () => {
         if (map.getSource('terrain')) {
           map.setTerrain({ source: 'terrain', exaggeration: 1.5 });
         }
+      } else if (mapProjection === 'perspective') {
+        map.setProjection({ type: 'mercator' });
+        map.easeTo({ pitch: 60, duration: 1000 });
+        if (map.getSource('terrain')) {
+          map.setTerrain({ source: 'terrain', exaggeration: 1.5 });
+        }
+        // Remove sky for flat perspective as it can look odd without a true globe
+        map.setSky(null);
       } else {
+        // Flat mode
+        map.setProjection({ type: 'mercator' });
+        map.easeTo({ pitch: 0, duration: 1000 });
         map.setTerrain(null);
+        map.setSky(null);
       }
 
       // Re-render line with correct antimeridian handling for this projection
@@ -742,8 +754,8 @@ const APP = () => {
 
   const PROJECTIONS = [
     { id: 'globe', label: 'Globe' },
-    { id: 'mercator', label: 'Mercator' },
-    { id: 'vertical-perspective', label: 'Perspective' }
+    { id: 'perspective', label: 'Perspective' },
+    { id: 'flat', label: 'Flat' }
   ];
 
   return (