mapstyle added

src/components/WorldMap.jsx

@@ -427,20 +427,32 @@ export const WorldMap = ({
     pskMarkersRef.current.forEach(m => map.removeLayer(m));
     pskMarkersRef.current = [];
 
-    if (showPSKReporter && pskReporterSpots && pskReporterSpots.length > 0 && deLocation) {
+    // Validate deLocation exists and has valid coordinates
+    const hasValidDE = deLocation && 
+      typeof deLocation.lat === 'number' && !isNaN(deLocation.lat) &&
+      typeof deLocation.lon === 'number' && !isNaN(deLocation.lon);
+
+    if (showPSKReporter && pskReporterSpots && pskReporterSpots.length > 0 && hasValidDE) {
       pskReporterSpots.forEach(spot => {
-        if (spot.lat && spot.lon) {
+        // Validate spot coordinates are valid numbers
+        const spotLat = parseFloat(spot.lat);
+        const spotLon = parseFloat(spot.lon);
+        
+        if (!isNaN(spotLat) && !isNaN(spotLon)) {
           const displayCall = spot.receiver || spot.sender;
           const freqMHz = spot.freqMHz || (spot.freq ? (spot.freq / 1000000).toFixed(3) : '?');
           const bandColor = getBandColor(parseFloat(freqMHz));
           
+          try {
             // Draw line from DE to spot location
             const points = getGreatCirclePoints(
-            [deLocation.lat, deLocation.lon],
-            [spot.lat, spot.lon],
+              deLocation.lat, deLocation.lon,
+              spotLat, spotLon,
               50
             );
             
+            // Validate points before creating polyline
+            if (points && points.length > 1 && points.every(p => Array.isArray(p) && !isNaN(p[0]) && !isNaN(p[1]))) {
               const line = L.polyline(points, {
                 color: bandColor,
                 weight: 1.5,
@@ -448,9 +460,10 @@ export const WorldMap = ({
                 dashArray: '4, 4'
               }).addTo(map);
               pskMarkersRef.current.push(line);
+            }
             
             // Add small dot marker at spot location
-          const circle = L.circleMarker([spot.lat, spot.lon], {
+            const circle = L.circleMarker([spotLat, spotLon], {
               radius: 4,
               fillColor: bandColor,
               color: '#fff',
@@ -463,6 +476,9 @@ export const WorldMap = ({
               ${spot.snr !== null ? `SNR: ${spot.snr > 0 ? '+' : ''}${spot.snr} dB` : ''}
             `).addTo(map);
             pskMarkersRef.current.push(circle);
+          } catch (err) {
+            console.warn('Error rendering PSKReporter spot:', err);
+          }
         }
       });
     }

src/utils/config.js

@@ -187,6 +187,16 @@ export const MAP_STYLES = {
     name: 'Gray',
     url: 'https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
     attribution: '© Esri'
+  },
+  political: {
+    name: 'Political',
+    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
+    attribution: '© Esri'
+  },
+  natgeo: {
+    name: 'Nat Geo',
+    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}',
+    attribution: '© Esri, National Geographic'
   }
 };