Download RM/40.html from stat2025/Map: direct link, hf CLI and curl.
- Browser
- Download file 51 kB
-
https://huggingface.co/spaces/stat2025/Map/resolve/main/RM/40.html
- Command line
-
hf download hf://spaces/stat2025/Map/RM/40.html
-
curl -L -o 40.html https://huggingface.co/spaces/stat2025/Map/resolve/main/RM/40.html
51 kB
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | |
| <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script> | |
| <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/> | |
| <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"/> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/> | |
| <meta name="viewport" content="width=device-width, | |
| initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <style> | |
| #map_9a171fdd9f026825b37d0cdd05b165bb { | |
| position: relative; | |
| width: 100.0%; | |
| height: 100.0%; | |
| left: 0.0%; | |
| top: 0.0%; | |
| } | |
| .leaflet-container { font-size: 1rem; } | |
| </style> | |
| <style>html, body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| </style> | |
| <style>#map { | |
| position:absolute; | |
| top:0; | |
| bottom:0; | |
| right:0; | |
| left:0; | |
| } | |
| </style> | |
| <script> | |
| L_NO_TOUCH = false; | |
| L_DISABLE_3D = false; | |
| </script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.66.2/L.Control.Locate.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.66.2/L.Control.Locate.min.css"/> | |
| </head> | |
| <body> | |
| <div | |
| class="desktop-stats-toggle" | |
| style=" | |
| position:fixed; | |
| top:10px; | |
| right:10px; | |
| z-index:10000; | |
| direction:rtl; | |
| font-family:Arial,sans-serif; | |
| " | |
| > | |
| <button | |
| id="btn_stats_40" | |
| onclick=" | |
| var panel = | |
| document.getElementById( | |
| 'stats_40' | |
| ); | |
| var btn = | |
| document.getElementById( | |
| 'btn_stats_40' | |
| ); | |
| if ( | |
| panel.style.display | |
| === 'none' | |
| ) { | |
| panel.style.display = | |
| 'block'; | |
| btn.innerText = | |
| 'إخفاء'; | |
| } else { | |
| panel.style.display = | |
| 'none'; | |
| btn.innerText = | |
| 'عرض الملخص'; | |
| } | |
| " | |
| style=" | |
| background:rgba(255,255,255,0.92); | |
| border:none; | |
| border-radius:14px; | |
| padding:10px 14px; | |
| font-size:14px; | |
| font-weight:bold; | |
| cursor:pointer; | |
| box-shadow:0 2px 10px rgba(0,0,0,0.18); | |
| " | |
| > | |
| إخفاء | |
| </button> | |
| </div> | |
| <div | |
| id="stats_40" | |
| class="stats-panel mobile-map-sheet" | |
| style=" | |
| display:block; | |
| position:fixed; | |
| top:10px; | |
| right:58px; | |
| width:330px; | |
| max-height:85vh; | |
| overflow-y:auto; | |
| background:rgba(255,255,255,0.88); | |
| backdrop-filter:blur(4px); | |
| border-radius:22px; | |
| padding:18px 18px 16px 18px; | |
| z-index:9999; | |
| direction:rtl; | |
| font-family:Arial,sans-serif; | |
| box-shadow:0 8px 28px rgba(0,0,0,0.16); | |
| line-height:1.9; | |
| color:#222; | |
| " | |
| > | |
| <div style=" | |
| font-size:18px; | |
| font-weight:800; | |
| text-align:center; | |
| margin-bottom:10px; | |
| "> | |
| فايزة محمد مسعود الحازمي | |
| </div> | |
| <div style="font-size:15px;"> | |
| <div> | |
| <b>عدد المواقع بإحداثية:</b> | |
| 7 | |
| </div> | |
| <div> | |
| <b>عدد الحارات:</b> | |
| 6 | |
| </div> | |
| <div> | |
| <b>عينات المسوح الإضافية:</b> | |
| <span style=" | |
| color:#b91c1c; | |
| font-weight:700; | |
| "> | |
| 1 | |
| </span> | |
| </div> | |
| </div> | |
| <div style="margin-top:10px;"> | |
| <div style="font-weight:bold;"> | |
| أكثر الحارات: | |
| </div> | |
| <div style="padding-right:8px;"> | |
| <div>• الخالدية الشمالية: 2</div><div>• الفيحاء: 1</div><div>• المزروعية: 1</div><div>• البساتين: 1</div><div>• الحسام: 1</div> | |
| </div> | |
| </div> | |
| <div style=" | |
| margin-top:14px; | |
| padding-top:10px; | |
| border-top:1px solid rgba(0,0,0,0.08); | |
| "> | |
| <a | |
| href="report_40_فايزة_محمد_مسعود_الحازمي.pdf" | |
| target="_blank" | |
| style=" | |
| display:block; | |
| text-align:center; | |
| background:#16a34a; | |
| color:#fff; | |
| text-decoration:none; | |
| padding:10px 12px; | |
| border-radius:12px; | |
| font-weight:700; | |
| margin-bottom:8px; | |
| " | |
| > | |
| تصدير بيانات هذه الخريطة PDF | |
| </a> | |
| <a | |
| href="report_40_فايزة_محمد_مسعود_الحازمي.xlsx" | |
| target="_blank" | |
| style=" | |
| display:block; | |
| text-align:center; | |
| background:#2563eb; | |
| color:#fff; | |
| text-decoration:none; | |
| padding:10px 12px; | |
| border-radius:12px; | |
| font-weight:700; | |
| margin-bottom:8px; | |
| " | |
| > | |
| تصدير بيانات هذه الخريطة Excel | |
| </a> | |
| <div style="font-size:13px;"> | |
| <div style=" | |
| font-weight:700; | |
| margin-bottom:6px; | |
| "> | |
| ألوان الحارات للعينات الأساسية | |
| </div> | |
| <div style=" | |
| display:flex; | |
| align-items:center; | |
| justify-content:space-between; | |
| gap:8px; | |
| margin-bottom:4px; | |
| "> | |
| <div style=" | |
| display:flex; | |
| align-items:center; | |
| gap:8px; | |
| "> | |
| <span style=" | |
| width:12px; | |
| height:12px; | |
| border-radius:50%; | |
| display:inline-block; | |
| background:#0369A1; | |
| border:1px solid rgba(0,0,0,0.15); | |
| "></span> | |
| <span> | |
| الفيحاء | |
| </span> | |
| </div> | |
| <span style="color:#555;"> | |
| (1) | |
| </span> | |
| </div> | |
| <div style=" | |
| display:flex; | |
| align-items:center; | |
| justify-content:space-between; | |
| gap:8px; | |
| margin-bottom:4px; | |
| "> | |
| <div style=" | |
| display:flex; | |
| align-items:center; | |
| gap:8px; | |
| "> | |
| <span style=" | |
| width:12px; | |
| height:12px; | |
| border-radius:50%; | |
| display:inline-block; | |
| background:#DC2626; | |
| border:1px solid rgba(0,0,0,0.15); | |
| "></span> | |
| <span> | |
| المزروعية | |
| </span> | |
| </div> | |
| <span style="color:#555;"> | |
| (1) | |
| </span> | |
| </div> | |
| <div style=" | |
| display:flex; | |
| align-items:center; | |
| justify-content:space-between; | |
| gap:8px; | |
| margin-bottom:4px; | |
| "> | |
| <div style=" | |
| display:flex; | |
| align-items:center; | |
| gap:8px; | |
| "> | |
| <span style=" | |
| width:12px; | |
| height:12px; | |
| border-radius:50%; | |
| display:inline-block; | |
| background:#EA580C; | |
| border:1px solid rgba(0,0,0,0.15); | |
| "></span> | |
| <span> | |
| البساتين | |
| </span> | |
| </div> | |
| <span style="color:#555;"> | |
| (1) | |
| </span> | |
| </div> | |
| <div style=" | |
| display:flex; | |
| align-items:center; | |
| justify-content:space-between; | |
| gap:8px; | |
| margin-bottom:4px; | |
| "> | |
| <div style=" | |
| display:flex; | |
| align-items:center; | |
| gap:8px; | |
| "> | |
| <span style=" | |
| width:12px; | |
| height:12px; | |
| border-radius:50%; | |
| display:inline-block; | |
| background:#475569; | |
| border:1px solid rgba(0,0,0,0.15); | |
| "></span> | |
| <span> | |
| الخالدية الشمالية | |
| </span> | |
| </div> | |
| <span style="color:#555;"> | |
| (1) | |
| </span> | |
| </div> | |
| <div style=" | |
| display:flex; | |
| align-items:center; | |
| justify-content:space-between; | |
| gap:8px; | |
| margin-bottom:4px; | |
| "> | |
| <div style=" | |
| display:flex; | |
| align-items:center; | |
| gap:8px; | |
| "> | |
| <span style=" | |
| width:12px; | |
| height:12px; | |
| border-radius:50%; | |
| display:inline-block; | |
| background:#0F766E; | |
| border:1px solid rgba(0,0,0,0.15); | |
| "></span> | |
| <span> | |
| الحسام | |
| </span> | |
| </div> | |
| <span style="color:#555;"> | |
| (1) | |
| </span> | |
| </div> | |
| <div style=" | |
| display:flex; | |
| align-items:center; | |
| justify-content:space-between; | |
| gap:8px; | |
| margin-bottom:4px; | |
| "> | |
| <div style=" | |
| display:flex; | |
| align-items:center; | |
| gap:8px; | |
| "> | |
| <span style=" | |
| width:12px; | |
| height:12px; | |
| border-radius:50%; | |
| display:inline-block; | |
| background:#2563EB; | |
| border:1px solid rgba(0,0,0,0.15); | |
| "></span> | |
| <span> | |
| الصفا | |
| </span> | |
| </div> | |
| <span style="color:#555;"> | |
| (1) | |
| </span> | |
| </div> | |
| <div style=" | |
| font-weight:700; | |
| margin:12px 0 6px; | |
| "> | |
| ألوان المسوح الإضافية | |
| </div> | |
| <div style=" | |
| display:flex; | |
| align-items:center; | |
| justify-content:space-between; | |
| gap:8px; | |
| margin-bottom:4px; | |
| "> | |
| <div style=" | |
| display:flex; | |
| align-items:center; | |
| gap:8px; | |
| "> | |
| <span style=" | |
| width:12px; | |
| height:12px; | |
| border-radius:50%; | |
| display:inline-block; | |
| background:#2563EB; | |
| border:1px solid rgba(0,0,0,0.15); | |
| "></span> | |
| <span> | |
| متقاطع مع انتاج الخدمات | |
| </span> | |
| </div> | |
| <span style="color:#555;"> | |
| (1) | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div | |
| id="searchBoxPanel" | |
| class="desktop-search-panel mobile-map-sheet" | |
| style=" | |
| position:fixed; | |
| top:10px; | |
| left:10px; | |
| z-index:10000; | |
| direction:rtl; | |
| font-family:Arial,sans-serif; | |
| " | |
| > | |
| <input | |
| id="mapSearchInput" | |
| type="text" | |
| placeholder="ابحث عن اسم المنشأة..." | |
| style=" | |
| width:300px; | |
| box-sizing:border-box; | |
| padding:10px; | |
| border-radius:12px; | |
| border:1px solid #ccc; | |
| font-size:14px; | |
| direction:rtl; | |
| " | |
| > | |
| <div | |
| id="searchCount" | |
| style=" | |
| margin-top:7px; | |
| font-size:13px; | |
| color:#334155; | |
| background:rgba(255,255,255,.88); | |
| padding:5px 8px; | |
| border-radius:10px; | |
| " | |
| > | |
| اكتب للبحث داخل نقاط الخريطة | |
| </div> | |
| </div> | |
| <div id="mobileMapToolbar"> | |
| <button | |
| id="mobileSearchBtn" | |
| type="button" | |
| onclick="toggleMobileSheet('search')" | |
| > | |
| بحث | |
| </button> | |
| <button | |
| id="mobileStatsBtn" | |
| type="button" | |
| onclick="toggleMobileSheet('stats')" | |
| > | |
| الملخص والتصدير | |
| </button> | |
| </div> | |
| <style> | |
| #mobileMapToolbar { | |
| display:none; | |
| } | |
| @media (max-width: 768px) { | |
| .desktop-stats-toggle { | |
| display:none ; | |
| } | |
| .mobile-map-sheet { | |
| display:none ; | |
| position:fixed ; | |
| top:auto ; | |
| right:10px ; | |
| left:10px ; | |
| bottom:72px ; | |
| width:auto ; | |
| max-height:68vh ; | |
| overflow-y:auto ; | |
| box-sizing:border-box ; | |
| z-index:10900 ; | |
| border-radius:20px ; | |
| background:rgba( | |
| 255, | |
| 255, | |
| 255, | |
| 0.96 | |
| ) ; | |
| box-shadow: | |
| 0 8px 30px | |
| rgba( | |
| 0, | |
| 0, | |
| 0, | |
| 0.28 | |
| ) ; | |
| padding:14px ; | |
| } | |
| .mobile-map-sheet.mobile-open { | |
| display:block ; | |
| } | |
| #searchBoxPanel input { | |
| width:100% ; | |
| min-height:44px ; | |
| font-size:16px ; | |
| } | |
| #mobileMapToolbar { | |
| display:flex; | |
| position:fixed; | |
| right:10px; | |
| left:10px; | |
| bottom:10px; | |
| z-index:11000; | |
| gap:8px; | |
| padding:7px; | |
| direction:rtl; | |
| border-radius:16px; | |
| background: | |
| rgba( | |
| 255, | |
| 255, | |
| 255, | |
| 0.94 | |
| ); | |
| box-shadow: | |
| 0 4px 18px | |
| rgba( | |
| 0, | |
| 0, | |
| 0, | |
| 0.24 | |
| ); | |
| font-family: | |
| Arial, | |
| sans-serif; | |
| } | |
| #mobileMapToolbar button { | |
| flex:1; | |
| min-height:46px; | |
| border:0; | |
| border-radius:12px; | |
| background:#f1f5f9; | |
| color:#1f2937; | |
| font-size:14px; | |
| font-weight:700; | |
| cursor:pointer; | |
| } | |
| #mobileMapToolbar button.active { | |
| background:#2563eb; | |
| color:#fff; | |
| } | |
| .map-footer { | |
| display:none ; | |
| } | |
| .leaflet-control-zoom, | |
| .leaflet-control-locate { | |
| margin-bottom:82px ; | |
| } | |
| .leaflet-popup-content { | |
| max-width: | |
| calc( | |
| 100vw - 80px | |
| ) ; | |
| } | |
| } | |
| </style> | |
| <script> | |
| window.searchableMarkers = []; | |
| function setMobileButtonState( | |
| activeTarget | |
| ) { | |
| var searchBtn = | |
| document.getElementById( | |
| "mobileSearchBtn" | |
| ); | |
| var statsBtn = | |
| document.getElementById( | |
| "mobileStatsBtn" | |
| ); | |
| if (searchBtn) | |
| searchBtn.classList.toggle( | |
| "active", | |
| activeTarget === "search" | |
| ); | |
| if (statsBtn) | |
| statsBtn.classList.toggle( | |
| "active", | |
| activeTarget === "stats" | |
| ); | |
| } | |
| function closeMobileSheets() { | |
| var searchPanel = | |
| document.getElementById( | |
| "searchBoxPanel" | |
| ); | |
| var statsPanel = | |
| document.querySelector( | |
| ".stats-panel" | |
| ); | |
| if (searchPanel) | |
| searchPanel.classList.remove( | |
| "mobile-open" | |
| ); | |
| if (statsPanel) | |
| statsPanel.classList.remove( | |
| "mobile-open" | |
| ); | |
| setMobileButtonState(""); | |
| } | |
| function toggleMobileSheet( | |
| target | |
| ) { | |
| var searchPanel = | |
| document.getElementById( | |
| "searchBoxPanel" | |
| ); | |
| var statsPanel = | |
| document.querySelector( | |
| ".stats-panel" | |
| ); | |
| var targetPanel = | |
| target === "search" | |
| ? searchPanel | |
| : statsPanel; | |
| var willOpen = | |
| targetPanel | |
| && !targetPanel.classList.contains( | |
| "mobile-open" | |
| ); | |
| closeMobileSheets(); | |
| if (willOpen) { | |
| targetPanel.classList.add( | |
| "mobile-open" | |
| ); | |
| setMobileButtonState( | |
| target | |
| ); | |
| if ( | |
| target === "search" | |
| ) { | |
| setTimeout( | |
| function() { | |
| var input = | |
| document.getElementById( | |
| "mapSearchInput" | |
| ); | |
| if (input) | |
| input.focus(); | |
| }, | |
| 100 | |
| ); | |
| } | |
| } | |
| } | |
| setTimeout( | |
| function() { | |
| var input = | |
| document.getElementById( | |
| "mapSearchInput" | |
| ); | |
| var count = | |
| document.getElementById( | |
| "searchCount" | |
| ); | |
| if (!input) | |
| return; | |
| input.addEventListener( | |
| "input", | |
| function() { | |
| var q = | |
| input.value | |
| .trim() | |
| .toLowerCase(); | |
| var found = 0; | |
| window.searchableMarkers.forEach( | |
| function(item) { | |
| var ok = | |
| !q | |
| || item.name | |
| .toLowerCase() | |
| .indexOf(q) >= 0; | |
| if ( | |
| item.layer | |
| && item.map | |
| ) { | |
| if (ok) { | |
| if ( | |
| !item.map.hasLayer( | |
| item.layer | |
| ) | |
| ) | |
| item.layer.addTo( | |
| item.map | |
| ); | |
| found += 1; | |
| } else { | |
| if ( | |
| item.map.hasLayer( | |
| item.layer | |
| ) | |
| ) | |
| item.map.removeLayer( | |
| item.layer | |
| ); | |
| } | |
| } | |
| } | |
| ); | |
| count.innerText = | |
| q | |
| ? ( | |
| "نتائج البحث: " | |
| + found | |
| ) | |
| : ( | |
| "اكتب للبحث داخل نقاط الخريطة" | |
| ); | |
| } | |
| ); | |
| }, | |
| 1000 | |
| ); | |
| </script> | |
| <script> | |
| setTimeout( | |
| function() { | |
| if ( | |
| !window.searchableMarkers | |
| ) | |
| window.searchableMarkers = []; | |
| window.searchableMarkers.push({ | |
| name: | |
| "شركة قمة المعايرة الوطنية الصناعية", | |
| layer: | |
| marker_90502fcc4356842c5498881cf58681ff, | |
| map: | |
| map_9a171fdd9f026825b37d0cdd05b165bb | |
| }); | |
| }, | |
| 800 | |
| ); | |
| </script> | |
| <script> | |
| setTimeout( | |
| function() { | |
| if ( | |
| !window.searchableMarkers | |
| ) | |
| window.searchableMarkers = []; | |
| window.searchableMarkers.push({ | |
| name: | |
| "شركة نيوورلد للتعليم", | |
| layer: | |
| marker_9af3b9606edb10387037bbb10911fad7, | |
| map: | |
| map_9a171fdd9f026825b37d0cdd05b165bb | |
| }); | |
| }, | |
| 800 | |
| ); | |
| </script> | |
| <script> | |
| setTimeout( | |
| function() { | |
| if ( | |
| !window.searchableMarkers | |
| ) | |
| window.searchableMarkers = []; | |
| window.searchableMarkers.push({ | |
| name: | |
| "هيئة الربط الكهربائي لدول مجلس التعاون لدول الخليج العربية", | |
| layer: | |
| marker_8d3ebf9c13d900d0db849661cad0e4e0, | |
| map: | |
| map_9a171fdd9f026825b37d0cdd05b165bb | |
| }); | |
| }, | |
| 800 | |
| ); | |
| </script> | |
| <script> | |
| setTimeout( | |
| function() { | |
| if ( | |
| !window.searchableMarkers | |
| ) | |
| window.searchableMarkers = []; | |
| window.searchableMarkers.push({ | |
| name: | |
| "شركة الخطوط الجوية الملكية الهولندية ك ل م", | |
| layer: | |
| marker_a5d4ebae3f367a44694403547ddac000, | |
| map: | |
| map_9a171fdd9f026825b37d0cdd05b165bb | |
| }); | |
| }, | |
| 800 | |
| ); | |
| </script> | |
| <script> | |
| setTimeout( | |
| function() { | |
| if ( | |
| !window.searchableMarkers | |
| ) | |
| window.searchableMarkers = []; | |
| window.searchableMarkers.push({ | |
| name: | |
| "شركة الجميح وشل لزيوت التشحيم المحدودة", | |
| layer: | |
| marker_0ee9c49c327cf7c84f51ad840c8411c2, | |
| map: | |
| map_9a171fdd9f026825b37d0cdd05b165bb | |
| }); | |
| }, | |
| 800 | |
| ); | |
| </script> | |
| <script> | |
| setTimeout( | |
| function() { | |
| if ( | |
| !window.searchableMarkers | |
| ) | |
| window.searchableMarkers = []; | |
| window.searchableMarkers.push({ | |
| name: | |
| "شركة وورلي بارسونز للاستشارات الهندسية", | |
| layer: | |
| marker_2bbd8856729c7aa75fa31db39b41d577, | |
| map: | |
| map_9a171fdd9f026825b37d0cdd05b165bb | |
| }); | |
| }, | |
| 800 | |
| ); | |
| </script> | |
| <script> | |
| setTimeout( | |
| function() { | |
| if ( | |
| !window.searchableMarkers | |
| ) | |
| window.searchableMarkers = []; | |
| window.searchableMarkers.push({ | |
| name: | |
| "شركة باحث للبحوث والعلوم الطبية", | |
| layer: | |
| marker_410d8ff4f0701f80ffcd2454231f7fd5, | |
| map: | |
| map_9a171fdd9f026825b37d0cdd05b165bb | |
| }); | |
| }, | |
| 800 | |
| ); | |
| </script> | |
| <div class="map-footer" style=" | |
| position: fixed; | |
| bottom: 8px; | |
| left: 8px; | |
| background: rgba(255,255,255,0.85); | |
| padding: 6px 10px; | |
| border-radius: 10px; | |
| font-size: 13px; | |
| direction: rtl; | |
| z-index: 9999; | |
| box-shadow: 0 1px 8px rgba(0,0,0,0.15); | |
| "> | |
| تصميم وإعداد <b>نوف الناصر</b> | |
| </div> | |
| <div class="folium-map" id="map_9a171fdd9f026825b37d0cdd05b165bb" ></div> | |
| </body> | |
| <script> | |
| </script> | |
| </html> |