import fortuneData from "~/data/fortune500-hqs.json"; export function OpenStreetMap() { const [map, setMap] = React.useState(null); const [selectedCompany, setSelectedCompany] = React.useState(null); const [isAdding, setIsAdding] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false); const mapContainer = React.useRef(null); const markersRef = React.useRef([]); const { data, updateData } = useData(fortuneData); const [newCompany, setNewCompany] = React.useState({ name: "", address: "", revenue: "" }); // Geocode address to coordinates const geocodeAddress = async (address) => { try { const response = await fetch( `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}&limit=1&countrycodes=us` ); const results = await response.json(); if (results.length > 0) { const result = results[0]; return { lat: parseFloat(result.lat), lng: parseFloat(result.lon), city: result.address?.city || result.address?.town || result.display_name.split(',')[0], state: result.address?.state || "Unknown" }; } throw new Error("Address not found"); } catch (error) { console.error("Geocoding error:", error); return null; } }; // Clear all markers from map const clearMarkers = () => { markersRef.current.forEach(marker => { if (map) { map.removeLayer(marker); } }); markersRef.current = []; }; // Add markers to map const addMarkersToMap = (companies) => { if (!map || !companies) return; clearMarkers(); companies.forEach((company, index) => { const color = `hsl(${(index * 137.508) % 360}, 70%, 50%)`; const icon = window.L.divIcon({ className: 'custom-div-icon', html: `

`, iconSize: [20, 20], iconAnchor: [10, 10] }); const marker = window.L.marker([company.lat, company.lng], { icon }).addTo(map); const popupContent = `

${company.name}

📍 ${company.city}, ${company.state}

💰 Revenue: $${(company.revenue / 1000).toFixed(1)}B

`; marker.bindPopup(popupContent); markersRef.current.push(marker); }); }; React.useEffect(() => { if (map) return; const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'; document.head.appendChild(link); const script = document.createElement('script'); script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'; script.onload = () => { const newMap = window.L.map(mapContainer.current).setView([39.8283, -98.5795], 5); window.L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors', maxZoom: 19 }).addTo(newMap); setMap(newMap); }; document.head.appendChild(script); return () => { if (map) { clearMarkers(); map.remove(); } }; }, []); // Add markers when map or data changes React.useEffect(() => { if (map && data.companies) { addMarkersToMap(data.companies); } }, [map, data.companies]); // Global delete function React.useEffect(() => { window.deleteCompany = (companyName) => { const updatedCompanies = data.companies.filter(company => company.name !== companyName); updateData({ ...data, companies: updatedCompanies }); toast(`${companyName} deleted successfully`); }; return () => { delete window.deleteCompany; }; }, [data, updateData]); const handleAddCompany = async () => { if (!newCompany.name || !newCompany.address || !newCompany.revenue) { toast("Please fill in all fields"); return; } setIsLoading(true); try { const location = await geocodeAddress(newCompany.address); if (!location) { toast("Could not find address. Please try a different format."); setIsLoading(false); return; } const company = { name: newCompany.name, city: location.city, state: location.state, lat: location.lat, lng: location.lng, revenue: parseInt(newCompany.revenue) * 1000 // Convert to millions }; const updatedCompanies = [...(data.companies || []), company]; updateData({ ...data, companies: updatedCompanies }); // Reset form setNewCompany({ name: "", address: "", revenue: "" }); setIsAdding(false); toast(`${company.name} added successfully!`); } catch (error) { console.error("Error adding company:", error); toast("Error adding company. Please try again."); } setIsLoading(false); }; const flyToCompany = (company) => { if (map) { map.setView([company.lat, company.lng], 10, { animate: true, duration: 1.5 }); setSelectedCompany(company); } }; return (

Fortune 500 Company Headquarters - OpenStreetMap Interactive map with dynamic company management. Add new companies or delete existing ones.

Company Management Add new companies or manage existing ones

{isAdding && (

Company Name setNewCompany({...newCompany, name: e.target.value})} />

Address setNewCompany({...newCompany, address: e.target.value})} />

Revenue (Billions) setNewCompany({...newCompany, revenue: e.target.value})} />

)}

{data.companies?.map((company, index) => (

))}

); }