Spaces:

stat2025
/

Map

Running

File size: 25,286 Bytes

ca510ce

<!DOCTYPE html>
<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_0860fcb402d77ba7ec3e85e32ba2aa78 {
                    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_9" onclick="
            var panel = document.getElementById('stats_9');
            var btn = document.getElementById('btn_stats_9');
            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_9" class="stats-panel mobile-map-sheet" style="
        display:block;
        position:fixed;
        top:10px;
        right:58px;
        width:320px;
        max-height:85vh;
        overflow-y:auto;
        background:rgba(255,255,255,0.86);
        backdrop-filter:blur(4px);
        -webkit-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;
        ">حسن عادل بن حسين الوصيبعي - 9</div>

        <div style="font-size:15px;">
            <div><b>عدد المواقع:</b> 3</div>
            <div><b>عدد الحارات:</b> 3</div>
        </div>

        

        <div style="margin-top:10px;">
            <div style="font-weight:bold;">أكثر الحارات:</div>
            <div style="padding-right:8px;"><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_09_حسن_عادل_بن_حسين_الوصيبعي.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_09_حسن_عادل_بن_حسين_الوصيبعي.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-weight:bold; margin-bottom:6px;">تلوين حسب الحارة</div>
            <div style="font-size:13px;">
                
        <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:gray;
                    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:green;
                    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:gray;
                    border:1px solid rgba(0,0,0,0.15);
                "></span>
                <span>العمران الجنوبية</span>
            </div>
            <span style="color:#555;">(1)</span>
        </div>
        
            </div>
        </div>
    </div>
    
    
    <div class="desktop-search-toggle" style="
        position:fixed;
        top:10px;
        left:10px;
        z-index:10000;
        direction:rtl;
        font-family:Arial, sans-serif;
    ">
        <button id="searchToggleBtn" onclick="toggleSearchBox()" 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="searchBoxPanel" class="search-panel mobile-map-sheet" style="
        position:fixed;
        top:55px;
        left:10px;
        z-index:10000;
        direction:rtl;
        font-family:Arial, sans-serif;
        background:rgba(255,255,255,0.92);
        padding:10px;
        border-radius:16px;
        box-shadow:0 2px 10px rgba(0,0,0,0.18);
        width:300px;
    ">
        <input id="mapSearchInput" type="text" placeholder="ابحث عن اسم المنشأة..."
        style="
            width:100%;
            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;
            line-height:1.7;
        ">
            اكتب للبحث داخل نقاط الخريطة
        </div>

        <button onclick="clearMapSearch()" style="
            margin-top:8px;
            width:100%;
            padding:8px;
            border:none;
            border-radius:10px;
            background:#f3f4f6;
            cursor:pointer;
            font-weight:bold;
        ">
            مسح البحث
        </button>
    </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-search-toggle,
        .desktop-stats-toggle {
            display:none !important;
        }

        .mobile-map-sheet {
            display:none !important;
            position:fixed !important;
            top:auto !important;
            right:10px !important;
            left:10px !important;
            bottom:72px !important;
            width:auto !important;
            max-height:68vh !important;
            overflow-y:auto !important;
            box-sizing:border-box !important;
            z-index:10900 !important;
            border-radius:20px !important;
            background:rgba(255,255,255,0.96) !important;
            box-shadow:0 8px 30px rgba(0,0,0,0.28) !important;
        }

        .mobile-map-sheet.mobile-open {
            display:block !important;
        }

        #searchBoxPanel {
            padding:14px !important;
        }

        #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:44px;
            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 !important;
        }

        .leaflet-control-zoom,
        .leaflet-control-locate {
            margin-bottom:82px !important;
        }
    }
    </style>

    <script>
    window.searchableMarkers = [];
    window.noCoordinateSamples = [];

    function closeMobileSheets() {
        var searchPanel = document.getElementById("searchBoxPanel");
        var statsPanel = document.querySelector(".stats-panel");
        var searchBtn = document.getElementById("mobileSearchBtn");
        var statsBtn = document.getElementById("mobileStatsBtn");

        if (searchPanel) searchPanel.classList.remove("mobile-open");
        if (statsPanel) statsPanel.classList.remove("mobile-open");
        if (searchBtn) searchBtn.classList.remove("active");
        if (statsBtn) statsBtn.classList.remove("active");
    }

    function toggleMobileSheet(sheetName) {
        var panel = sheetName === "search"
            ? document.getElementById("searchBoxPanel")
            : document.querySelector(".stats-panel");
        var button = sheetName === "search"
            ? document.getElementById("mobileSearchBtn")
            : document.getElementById("mobileStatsBtn");
        var wasOpen = panel && panel.classList.contains("mobile-open");

        closeMobileSheets();

        if (panel && !wasOpen) {
            panel.classList.add("mobile-open");
            if (button) button.classList.add("active");
        }
    }

    function toggleSearchBox() {
        var panel = document.getElementById("searchBoxPanel");
        var btn = document.getElementById("searchToggleBtn");

        if (panel.style.display === "none") {
            panel.style.display = "block";
            btn.innerText = "إخفاء البحث";
        } else {
            panel.style.display = "none";
            btn.innerText = "إظهار البحث";
        }
    }

    function normalizeArabicText(text) {
        return (text || "")
            .toString()
            .toLowerCase()
            .replace(/[أإآا]/g, "ا")
            .replace(/ى/g, "ي")
            .replace(/ة/g, "ه")
            .replace(/ؤ/g, "و")
            .replace(/ئ/g, "ي")
            .replace(/ـ/g, "")
            .trim();
    }

    function applyMapSearch() {
        var input = document.getElementById("mapSearchInput");
        var countBox = document.getElementById("searchCount");
        var query = normalizeArabicText(input.value);
        var shown = 0;
        var noCoordMatch = false;

        window.searchableMarkers.forEach(function(item) {
            var match = query === "" || normalizeArabicText(item.name).includes(query);

            if (match) {
                if (!item.map.hasLayer(item.marker)) {
                    item.marker.addTo(item.map);
                }
                shown++;
            } else {
                if (item.map.hasLayer(item.marker)) {
                    item.map.removeLayer(item.marker);
                }
            }
        });

        if (query !== "") {
            window.noCoordinateSamples.forEach(function(item) {
                if (normalizeArabicText(item.name).includes(query)) {
                    noCoordMatch = true;
                }
            });
        }

        if (query === "") {
            countBox.style.color = "#334155";
            countBox.innerText = "اكتب للبحث داخل نقاط الخريطة";
        } else if (shown > 0) {
            countBox.style.color = "#334155";
            countBox.innerText = "عدد النتائج على الخريطة: " + shown;
        } else if (noCoordMatch) {
            countBox.style.color = "#dc2626";
            countBox.innerText = "العينة موجودة ضمن عينات الباحث، لكنها بدون إحداثية. كرماً الدخول عليها من الجهاز اللوحي.";
        } else {
            countBox.style.color = "#dc2626";
            countBox.innerText = "لا توجد نتيجة مطابقة داخل نقاط الخريطة.";
        }
    }

    function clearMapSearch() {
        document.getElementById("mapSearchInput").value = "";
        applyMapSearch();
    }

    setTimeout(function() {
        var input = document.getElementById("mapSearchInput");
        if (input) {
            input.addEventListener("keyup", applyMapSearch);
            input.addEventListener("change", applyMapSearch);
        }
    }, 800);
    </script>
    
    
        <script>
        setTimeout(function() {
            if (!window.searchableMarkers) {
                window.searchableMarkers = [];
            }
            window.searchableMarkers.push({
                name: "شركة  اكفأ  الشرق التجارية",
                marker: marker_51d1f7ed6a30e728dda2e5287e3b772a,
                map: map_0860fcb402d77ba7ec3e85e32ba2aa78
            });
        }, 800);
        </script>
        
    
        <script>
        setTimeout(function() {
            if (!window.searchableMarkers) {
                window.searchableMarkers = [];
            }
            window.searchableMarkers.push({
                name: "شركة الطير الذهبي",
                marker: marker_38586d38cf9a649af751a304debe0f02,
                map: map_0860fcb402d77ba7ec3e85e32ba2aa78
            });
        }, 800);
        </script>
        
    
        <script>
        setTimeout(function() {
            if (!window.searchableMarkers) {
                window.searchableMarkers = [];
            }
            window.searchableMarkers.push({
                name: "شركة كيان جرين التجارية",
                marker: marker_0fb944b1b74b86611785ab9160a7c9c7,
                map: map_0860fcb402d77ba7ec3e85e32ba2aa78
            });
        }, 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_0860fcb402d77ba7ec3e85e32ba2aa78" ></div>
        
</body>
<script>
    
    
            var map_0860fcb402d77ba7ec3e85e32ba2aa78 = L.map(
                "map_0860fcb402d77ba7ec3e85e32ba2aa78",
                {
                    center: [25.363326333663608, 49.71248486882235],
                    crs: L.CRS.EPSG3857,
                    ...{
  "zoom": 13,
  "zoomControl": true,
  "preferCanvas": false,
}

                }
            );

            

        
    
            var tile_layer_e2fcce9c646974021078ad5262e830d5 = L.tileLayer(
                "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
                {
  "minZoom": 0,
  "maxZoom": 19,
  "maxNativeZoom": 19,
  "noWrap": false,
  "attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors",
  "subdomains": "abc",
  "detectRetina": false,
  "tms": false,
  "opacity": 1,
}

            );
        
    
            tile_layer_e2fcce9c646974021078ad5262e830d5.addTo(map_0860fcb402d77ba7ec3e85e32ba2aa78);
        
    
            var tile_layer_3d7b0ed185195aa99d96876a26e0c9bd = L.tileLayer(
                "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
                {
  "minZoom": 0,
  "maxZoom": 19,
  "maxNativeZoom": 19,
  "noWrap": false,
  "attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors",
  "subdomains": "abc",
  "detectRetina": false,
  "tms": false,
  "opacity": 1,
}

            );
        
    
            tile_layer_3d7b0ed185195aa99d96876a26e0c9bd.addTo(map_0860fcb402d77ba7ec3e85e32ba2aa78);
        
    
            var tile_layer_69cea4bc6540ed202176c5467a1961a9 = L.tileLayer(
                "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
                {
  "minZoom": 0,
  "maxZoom": 18,
  "maxNativeZoom": 18,
  "noWrap": false,
  "attribution": "\u0026copy; Esri",
  "subdomains": "abc",
  "detectRetina": false,
  "tms": false,
  "opacity": 1,
}

            );
        
    
            tile_layer_69cea4bc6540ed202176c5467a1961a9.addTo(map_0860fcb402d77ba7ec3e85e32ba2aa78);
        
    
            var locate_control_d1e6b0e099f5f39355be82e20cb73984 = L.control.locate(
                {}
            ).addTo(map_0860fcb402d77ba7ec3e85e32ba2aa78);
            
        
    
            var marker_51d1f7ed6a30e728dda2e5287e3b772a = L.marker(
                [25.25005446434058, 49.73443490089616],
                {
}
            ).addTo(map_0860fcb402d77ba7ec3e85e32ba2aa78);
        
    
            var icon_6688a073bafb83c9b4504a0e7f694bd5 = L.AwesomeMarkers.icon(
                {
  "markerColor": "gray",
  "iconColor": "white",
  "icon": "info-sign",
  "prefix": "glyphicon",
  "extraClasses": "fa-rotate-0",
}
            );
        
    
        var popup_61bb594aa972dfed17c590e0b826ae57 = L.popup({
  "maxWidth": 320,
});

        
            
                var html_d320dc84b7b3e7ceb6995960c6d8fe5e = $(`<div id="html_d320dc84b7b3e7ceb6995960c6d8fe5e" style="width: 100.0%; height: 100.0%;">         <div style="direction:rtl;font-size:13px;line-height:1.8;">           <b>شركة  اكفأ  الشرق التجارية</b><br>           السجل التجاري: 2251506783<br>           المنطقة: سوده<br>           الحارة: سوده<br>           <a href="https://www.google.com/maps?q=25.25005446434058,49.73443490089616" target="_blank">فتح في خرائط جوجل</a>         </div>         </div>`)[0];
                popup_61bb594aa972dfed17c590e0b826ae57.setContent(html_d320dc84b7b3e7ceb6995960c6d8fe5e);
            
        

        marker_51d1f7ed6a30e728dda2e5287e3b772a.bindPopup(popup_61bb594aa972dfed17c590e0b826ae57)
        ;

        
    
    
                marker_51d1f7ed6a30e728dda2e5287e3b772a.setIcon(icon_6688a073bafb83c9b4504a0e7f694bd5);
            
    
            var marker_38586d38cf9a649af751a304debe0f02 = L.marker(
                [25.4208449155437, 49.6910331463732],
                {
}
            ).addTo(map_0860fcb402d77ba7ec3e85e32ba2aa78);
        
    
            var icon_6d637ee032be8949897b601e0ac1b9a4 = L.AwesomeMarkers.icon(
                {
  "markerColor": "green",
  "iconColor": "white",
  "icon": "info-sign",
  "prefix": "glyphicon",
  "extraClasses": "fa-rotate-0",
}
            );
        
    
        var popup_44ab3ced31276379d3ec6ac056b5ae6e = L.popup({
  "maxWidth": 320,
});

        
            
                var html_d35e6cc57683d9e4caa18086ec07de65 = $(`<div id="html_d35e6cc57683d9e4caa18086ec07de65" style="width: 100.0%; height: 100.0%;">         <div style="direction:rtl;font-size:13px;line-height:1.8;">           <b>شركة الطير الذهبي</b><br>           السجل التجاري: 2031110739<br>           المنطقة: التويثير<br>           الحارة: القارة<br>           <a href="https://www.google.com/maps?q=25.4208449155437,49.6910331463732" target="_blank">فتح في خرائط جوجل</a>         </div>         </div>`)[0];
                popup_44ab3ced31276379d3ec6ac056b5ae6e.setContent(html_d35e6cc57683d9e4caa18086ec07de65);
            
        

        marker_38586d38cf9a649af751a304debe0f02.bindPopup(popup_44ab3ced31276379d3ec6ac056b5ae6e)
        ;

        
    
    
                marker_38586d38cf9a649af751a304debe0f02.setIcon(icon_6d637ee032be8949897b601e0ac1b9a4);
            
    
            var marker_0fb944b1b74b86611785ab9160a7c9c7 = L.marker(
                [25.419079621106548, 49.7119865591977],
                {
}
            ).addTo(map_0860fcb402d77ba7ec3e85e32ba2aa78);
        
    
            var icon_ed08a6ef5375702c306844ad32bea2bf = L.AwesomeMarkers.icon(
                {
  "markerColor": "gray",
  "iconColor": "white",
  "icon": "info-sign",
  "prefix": "glyphicon",
  "extraClasses": "fa-rotate-0",
}
            );
        
    
        var popup_0917d1887957b7681c72860117ce171b = L.popup({
  "maxWidth": 320,
});

        
            
                var html_7d4fda71d9e029dd42cf05f40aa1f300 = $(`<div id="html_7d4fda71d9e029dd42cf05f40aa1f300" style="width: 100.0%; height: 100.0%;">         <div style="direction:rtl;font-size:13px;line-height:1.8;">           <b>شركة كيان جرين التجارية</b><br>           السجل التجاري: 2250063495<br>           المنطقة: العمران<br>           الحارة: العمران الجنوبية<br>           <a href="https://www.google.com/maps?q=25.419079621106548,49.7119865591977" target="_blank">فتح في خرائط جوجل</a>         </div>         </div>`)[0];
                popup_0917d1887957b7681c72860117ce171b.setContent(html_7d4fda71d9e029dd42cf05f40aa1f300);
            
        

        marker_0fb944b1b74b86611785ab9160a7c9c7.bindPopup(popup_0917d1887957b7681c72860117ce171b)
        ;

        
    
    
                marker_0fb944b1b74b86611785ab9160a7c9c7.setIcon(icon_ed08a6ef5375702c306844ad32bea2bf);
            
</script>
</html>