|
| 1 | +/** |
| 2 | + * Centralized map configuration for consistent tile providers and error handling |
| 3 | + */ |
| 4 | + |
| 5 | +export interface MapTileConfig { |
| 6 | + url: string; |
| 7 | + attribution: string; |
| 8 | + maxZoom: number; |
| 9 | + errorTileUrl?: string; |
| 10 | +} |
| 11 | + |
| 12 | +/** |
| 13 | + * Get the appropriate tile configuration based on theme and environment |
| 14 | + */ |
| 15 | +export function getMapTileConfig(isDarkMode: boolean = false): MapTileConfig { |
| 16 | + // Check if we have a Mapbox token for premium tiles |
| 17 | + const mapboxToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN; |
| 18 | + |
| 19 | + if (mapboxToken && mapboxToken !== 'your-mapbox-token') { |
| 20 | + // Use Mapbox tiles (more reliable for production) |
| 21 | + const styleId = isDarkMode ? 'dark-v11' : 'streets-v12'; |
| 22 | + return { |
| 23 | + url: `https://api.mapbox.com/styles/v1/mapbox/${styleId}/tiles/{z}/{x}/{y}?access_token=${mapboxToken}`, |
| 24 | + attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>', |
| 25 | + maxZoom: 22, |
| 26 | + errorTileUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==' // 1x1 transparent PNG |
| 27 | + }; |
| 28 | + } |
| 29 | + |
| 30 | + // Fallback to OpenStreetMap-based tiles |
| 31 | + if (isDarkMode) { |
| 32 | + // Use CartoDB dark tiles for dark mode |
| 33 | + return { |
| 34 | + url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', |
| 35 | + attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>', |
| 36 | + maxZoom: 19, |
| 37 | + errorTileUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==' |
| 38 | + }; |
| 39 | + } else { |
| 40 | + // Use OpenStreetMap tiles for light mode with fallback |
| 41 | + return { |
| 42 | + url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', |
| 43 | + attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', |
| 44 | + maxZoom: 19, |
| 45 | + errorTileUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==' |
| 46 | + }; |
| 47 | + } |
| 48 | +} |
| 49 | + |
| 50 | +/** |
| 51 | + * Create a tile layer with error handling and fallback |
| 52 | + */ |
| 53 | +export function createTileLayer(L: any, isDarkMode: boolean = false) { |
| 54 | + const config = getMapTileConfig(isDarkMode); |
| 55 | + |
| 56 | + const tileLayer = L.tileLayer(config.url, { |
| 57 | + attribution: config.attribution, |
| 58 | + maxZoom: config.maxZoom, |
| 59 | + errorTileUrl: config.errorTileUrl, |
| 60 | + // Add retry logic for failed tiles |
| 61 | + retryDelay: 1000, |
| 62 | + retryLimit: 3, |
| 63 | + }); |
| 64 | + |
| 65 | + // Add error handling |
| 66 | + tileLayer.on('tileerror', function(error: any) { |
| 67 | + console.warn('Map tile failed to load:', { |
| 68 | + url: error.tile.src, |
| 69 | + coords: error.coords, |
| 70 | + error: error.error |
| 71 | + }); |
| 72 | + |
| 73 | + // Try to reload the tile after a delay |
| 74 | + setTimeout(() => { |
| 75 | + if (error.tile && error.tile.src) { |
| 76 | + error.tile.src = error.tile.src + '?retry=' + Date.now(); |
| 77 | + } |
| 78 | + }, 2000); |
| 79 | + }); |
| 80 | + |
| 81 | + tileLayer.on('tileload', function() { |
| 82 | + // Tiles are loading successfully |
| 83 | + console.debug('Map tiles loading successfully'); |
| 84 | + }); |
| 85 | + |
| 86 | + return tileLayer; |
| 87 | +} |
| 88 | + |
| 89 | +/** |
| 90 | + * Get default map center and zoom based on location availability |
| 91 | + */ |
| 92 | +export function getDefaultMapView(location?: { lat: number; lng: number; zoom?: number }) { |
| 93 | + if (location && typeof location.lat === 'number' && typeof location.lng === 'number') { |
| 94 | + return { |
| 95 | + center: [location.lat, location.lng] as [number, number], |
| 96 | + zoom: location.zoom || 15 |
| 97 | + }; |
| 98 | + } |
| 99 | + |
| 100 | + // Default to world view |
| 101 | + return { |
| 102 | + center: [20, 0] as [number, number], // Slightly north to show more land |
| 103 | + zoom: 2 |
| 104 | + }; |
| 105 | +} |
| 106 | + |
| 107 | +/** |
| 108 | + * Enhanced error logging for map issues |
| 109 | + */ |
| 110 | +export function logMapError(context: string, error: any, additionalInfo?: any) { |
| 111 | + console.error(`Map Error [${context}]:`, { |
| 112 | + error: error.message || error, |
| 113 | + stack: error.stack, |
| 114 | + timestamp: new Date().toISOString(), |
| 115 | + userAgent: typeof window !== 'undefined' ? window.navigator.userAgent : 'server', |
| 116 | + url: typeof window !== 'undefined' ? window.location.href : 'server', |
| 117 | + additionalInfo |
| 118 | + }); |
| 119 | +} |
| 120 | + |
| 121 | +/** |
| 122 | + * Check if map tiles are accessible |
| 123 | + */ |
| 124 | +export async function testMapTileAccess(isDarkMode: boolean = false): Promise<boolean> { |
| 125 | + if (typeof window === 'undefined') return true; // Skip on server |
| 126 | + |
| 127 | + const config = getMapTileConfig(isDarkMode); |
| 128 | + const testUrl = config.url |
| 129 | + .replace('{s}', 'a') |
| 130 | + .replace('{z}', '1') |
| 131 | + .replace('{x}', '0') |
| 132 | + .replace('{y}', '0') |
| 133 | + .replace('{r}', ''); |
| 134 | + |
| 135 | + try { |
| 136 | + const response = await fetch(testUrl, { |
| 137 | + method: 'HEAD', |
| 138 | + mode: 'no-cors' // Avoid CORS issues for testing |
| 139 | + }); |
| 140 | + return true; // If we get here, the request didn't fail immediately |
| 141 | + } catch (error) { |
| 142 | + console.warn('Map tile accessibility test failed:', error); |
| 143 | + return false; |
| 144 | + } |
| 145 | +} |
0 commit comments