Spaces:

Mishak
/

gis-map

Running

App Files Files Community

Mishak commited on Apr 1, 2025

Commit

fb8a202

verified ·

1 Parent(s): 74107d7

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +306 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Gis Map
-emoji: 😻
-colorFrom: pink
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: gis-map
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,306 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>