Spaces:

Mishak
/

gis-map

Running

File size: 12,854 Bytes

fb8a202

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sales Territory Maps</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <style>
        .map-container {
            width: 100%;
            height: 80vh;
            position: relative;
            background-color: #f0f4f8;
            border: 2px solid #e2e8f0;
        }
        #map {
            height: 100%;
            width: 100%;
        }
        .legend {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background: white;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
            z-index: 1000;
            max-height: 60vh;
            overflow-y: auto;
            width: 300px;
        }
        .hospital-marker {
            background: #3b82f6;
            color: white;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            font-size: 12px;
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
        }
        .airport-marker {
            background: #ef4444;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            font-size: 10px;
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
        }
        .hospital-table {
            width: 100%;
            border-collapse: collapse;
        }
        .hospital-table th, .hospital-table td {
            border: 1px solid #e2e8f0;
            padding: 8px;
            text-align: left;
            font-size: 12px;
        }
        .hospital-table th {
            background-color: #3b82f6;
            color: white;
        }
        .hospital-table tr:nth-child(even) {
            background-color: #f8fafc;
        }
        .hospital-table tr:hover {
            background-color: #e2e8f0;
        }
        .state-title {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(255,255,255,0.9);
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 24px;
            font-weight: bold;
            z-index: 1000;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .print-controls {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
        }
        @media print {
            .no-print {
                display: none;
            }
            body {
                margin: 0;
                padding: 0;
            }
            .map-container {
                height: 100vh;
                width: 100vw;
            }
            .legend {
                position: absolute;
                bottom: 20px;
                right: 20px;
                max-height: 80vh;
            }
        }
    </style>
</head>
<body class="bg-gray-100 p-4">
    <div class="max-w-7xl mx-auto">
        <h1 class="text-3xl font-bold text-gray-800 mb-6">Sales Territory Maps</h1>
        
        <div class="print-controls no-print">
            <select id="state-selector" class="px-4 py-2 border rounded-lg">
                <option value="california">California</option>
                <option value="texas">Texas</option>
                <option value="florida">Florida</option>
                <option value="new-york">New York</option>
                <option value="pennsylvania">Pennsylvania</option>
                <option value="illinois">Illinois</option>
                <option value="ohio">Ohio</option>
                <option value="georgia">Georgia</option>
                <option value="north-carolina">North Carolina</option>
            </select>
            <button onclick="window.print()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Print Map</button>
        </div>
        
        <div class="map-container">
            <div id="map"></div>
            <div class="state-title" id="state-title">California</div>
            <div class="legend">
                <h3 class="font-bold text-lg mb-2">Hospital Legend</h3>
                <div class="overflow-x-auto">
                    <table class="hospital-table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Beds</th>
                                <th>NPR</th>
                                <th>Parent</th>
                                <th>Airport</th>
                            </tr>
                        </thead>
                        <tbody id="legend-table">
                            <!-- Will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
                <div class="mt-3 text-sm">
                    <div class="flex items-center mb-1">
                        <div class="hospital-marker mr-2">1</div>
                        <span>Hospital</span>
                    </div>
                    <div class="flex items-center">
                        <div class="airport-marker mr-2">A</div>
                        <span>Major Airport</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Sample data - in a real implementation, this would come from your spreadsheet
        const stateData = {
            'california': {
                name: 'California',
                center: [36.7783, -119.4179],
                zoom: 6,
                hospitals: [
                    { id: 1, name: 'UCSF Medical Center', beds: 785, npr: 3200000000, parent: 'UCSF Health', lat: 37.7631, lng: -122.4581, airportTime: 25 },
                    { id: 2, name: 'Cedars-Sinai Medical Center', beds: 886, npr: 3800000000, parent: 'Cedars-Sinai', lat: 34.0836, lng: -118.3836, airportTime: 20 },
                    { id: 3, name: 'Stanford Hospital', beds: 613, npr: 2800000000, parent: 'Stanford Health Care', lat: 37.4349, lng: -122.1755, airportTime: 15 },
                    { id: 4, name: 'UCLA Medical Center', beds: 520, npr: 2500000000, parent: 'UCLA Health', lat: 34.0669, lng: -118.4467, airportTime: 18 },
                    { id: 5, name: 'Kaiser Permanente Oakland', beds: 349, npr: 1500000000, parent: 'Kaiser Permanente', lat: 37.8119, lng: -122.2696, airportTime: 22 }
                ],
                airports: [
                    { code: 'LAX', name: 'Los Angeles International', lat: 33.9416, lng: -118.4085 },
                    { code: 'SFO', name: 'San Francisco International', lat: 37.6213, lng: -122.3790 },
                    { code: 'SAN', name: 'San Diego International', lat: 32.7338, lng: -117.1933 },
                    { code: 'SJC', name: 'San Jose International', lat: 37.3626, lng: -121.9290 }
                ]
            },
            'texas': {
                name: 'Texas',
                center: [31.9686, -99.9018],
                zoom: 6,
                hospitals: [
                    { id: 1, name: 'Houston Methodist Hospital', beds: 948, npr: 4200000000, parent: 'Houston Methodist', lat: 29.7099, lng: -95.4019, airportTime: 18 },
                    { id: 2, name: 'UT Southwestern Medical Center', beds: 460, npr: 2100000000, parent: 'UT Southwestern', lat: 32.8136, lng: -96.8386, airportTime: 15 },
                    { id: 3, name: 'Baylor University Medical Center', beds: 1025, npr: 3800000000, parent: 'Baylor Scott & White', lat: 32.7996, lng: -96.8007, airportTime: 12 }
                ],
                airports: [
                    { code: 'DFW', name: 'Dallas/Fort Worth International', lat: 32.8968, lng: -97.0380 },
                    { code: 'IAH', name: 'George Bush Intercontinental', lat: 29.9844, lng: -95.3414 },
                    { code: 'AUS', name: 'Austin-Bergstrom International', lat: 30.1945, lng: -97.6699 }
                ]
            }
            // Additional states would follow the same pattern
        };

        let map;
        let currentState = 'california';

        function initMap() {
            const state = stateData[currentState];
            
            // Initialize map
            map = L.map('map').setView(state.center, state.zoom);
            
            // Add tile layer (using OpenStreetMap)
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
            
            // Update state title
            document.getElementById('state-title').textContent = state.name;
            
            // Clear previous markers
            map.eachLayer(layer => {
                if (layer instanceof L.Marker) {
                    map.removeLayer(layer);
                }
            });
            
            // Add hospitals
            state.hospitals.forEach(hospital => {
                const marker = L.marker([hospital.lat, hospital.lng], {
                    icon: L.divIcon({
                        className: 'hospital-icon',
                        html: `<div class="hospital-marker">${hospital.id}</div>`,
                        iconSize: [24, 24]
                    })
                }).addTo(map);
                
                // Add popup
                marker.bindPopup(`
                    <b>${hospital.name}</b><br>
                    Beds: ${hospital.beds.toLocaleString()}<br>
                    NPR: $${(hospital.npr / 1000000).toLocaleString()}M<br>
                    Parent: ${hospital.parent}<br>
                    Airport: ${hospital.airportTime} min
                `);
            });
            
            // Add airports
            state.airports.forEach(airport => {
                const marker = L.marker([airport.lat, airport.lng], {
                    icon: L.divIcon({
                        className: 'airport-icon',
                        html: `<div class="airport-marker">${airport.code}</div>`,
                        iconSize: [20, 20]
                    })
                }).addTo(map);
                
                // Add popup
                marker.bindPopup(`
                    <b>${airport.name} (${airport.code})</b>
                `);
            });
            
            // Update legend table
            const tableBody = document.getElementById('legend-table');
            tableBody.innerHTML = '';
            
            state.hospitals.forEach(hospital => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${hospital.id}</td>
                    <td>${hospital.name}</td>
                    <td>${hospital.beds.toLocaleString()}</td>
                    <td>$${(hospital.npr / 1000000).toLocaleString()}M</td>
                    <td>${hospital.parent}</td>
                    <td>${hospital.airportTime} min</td>
                `;
                tableBody.appendChild(row);
            });
        }

        // Initialize with first state
        document.addEventListener('DOMContentLoaded', () => {
            initMap();
            
            // Handle state selection change
            document.getElementById('state-selector').addEventListener('change', (e) => {
                currentState = e.target.value;
                initMap();
            });
        });

        // For printing, we'd ideally generate a high-resolution version
        // In a real implementation, you might use a server-side solution for this
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=Mishak/gis-map" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>