Hugging Face's logo

Spaces:
Mishak
/
gis-map
Running

App Files Community
gis-map / index.html
Mishak's picture
Mishak
Add 2 files
fb8a202 verified
raw
history blame contribute delete
12.9 kB
<!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>