Spaces:

enzostvs
/

deepsite

Running

App Files Files Community

514

salahAlkaabi commited on 12 days ago

Commit

a2f6ea3

verified ·

1 Parent(s): 6982784

Create Interactive Dubai Sustainability Map.html

Browse files

Files changed (1) hide show

Interactive Dubai Sustainability Map.html +626 -0

Interactive Dubai Sustainability Map.html ADDED Viewed

	@@ -0,0 +1,626 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dubai Sustainability Map</title>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            color: #333;
+            min-height: 100vh;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding: 15px 20px;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .logo-icon {
+            font-size: 28px;
+            color: #0c6b4c;
+        }
+        .logo-text {
+            font-size: 24px;
+            font-weight: 700;
+            color: #0c6b4c;
+        }
+        .logo-text span {
+            color: #ffc107;
+        }
+        .language-toggle {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .lang-btn {
+            background: transparent;
+            border: 1px solid #0c6b4c;
+            color: #0c6b4c;
+            padding: 8px 18px;
+            border-radius: 20px;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-weight: 500;
+        }
+        .lang-btn.active {
+            background: #0c6b4c;
+            color: white;
+        }
+        .map-container {
+            position: relative;
+            height: 650px;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+        }
+        #map {
+            height: 100%;
+            width: 100%;
+        }
+        .map-controls {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            z-index: 1000;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            padding: 15px;
+            width: 240px;
+        }
+        .layer-title {
+            font-weight: 600;
+            margin-bottom: 12px;
+            color: #0c6b4c;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 16px;
+        }
+        .toggle-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+        .toggle-switch {
+            position: relative;
+            display: inline-block;
+            width: 54px;
+            height: 28px;
+        }
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #ccc;
+            transition: .4s;
+            border-radius: 28px;
+        }
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 20px;
+            width: 20px;
+            left: 4px;
+            bottom: 4px;
+            background-color: white;
+            transition: .4s;
+            border-radius: 50%;
+        }
+        input:checked + .slider {
+            background-color: #0c6b4c;
+        }
+        input:checked + .slider:before {
+            transform: translateX(26px);
+        }
+        .legend {
+            margin-top: 15px;
+            padding-top: 15px;
+            border-top: 1px solid #e1e5e9;
+        }
+        .legend-title {
+            font-weight: 600;
+            margin-bottom: 10px;
+            font-size: 14px;
+            color: #0c6b4c;
+        }
+        .legend-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+            font-size: 13px;
+        }
+        .legend-color {
+            width: 22px;
+            height: 12px;
+            margin-right: 10px;
+            border-radius: 3px;
+        }
+        .property-popup {
+            max-width: 280px;
+        }
+        .popup-title {
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: #0c6b4c;
+            font-size: 16px;
+        }
+        .sustainability-score {
+            display: inline-block;
+            padding: 4px 10px;
+            border-radius: 12px;
+            font-size: 13px;
+            font-weight: 600;
+            margin-bottom: 12px;
+        }
+        .high-score {
+            background-color: #0c6b4c;
+            color: white;
+        }
+        .medium-score {
+            background-color: #ffc107;
+            color: #333;
+        }
+        .low-score {
+            background-color: #dc3545;
+            color: white;
+        }
+        .green-badge {
+            display: inline-flex;
+            align-items: center;
+            background-color: #0c6b4c;
+            color: white;
+            padding: 5px 12px;
+            border-radius: 12px;
+            font-size: 13px;
+            font-weight: 600;
+            margin-bottom: 12px;
+            gap: 5px;
+        }
+        .metrics {
+            margin-top: 12px;
+        }
+        .metric {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 6px;
+            font-size: 14px;
+        }
+        .metric-name {
+            color: #666;
+        }
+        .metric-value {
+            font-weight: 600;
+            color: #0c6b4c;
+        }
+        .info-panel {
+            margin-top: 25px;
+            background: white;
+            border-radius: 10px;
+            padding: 20px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        }
+        .info-title {
+            font-weight: 600;
+            margin-bottom: 12px;
+            color: #0c6b4c;
+            font-size: 18px;
+        }
+        .info-text {
+            font-size: 15px;
+            line-height: 1.6;
+            color: #555;
+        }
+        .stats-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-top: 15px;
+        }
+        .stat-card {
+            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+            padding: 15px;
+            border-radius: 8px;
+            text-align: center;
+        }
+        .stat-value {
+            font-size: 24px;
+            font-weight: 700;
+            color: #0c6b4c;
+        }
+        .stat-label {
+            font-size: 13px;
+            color: #666;
+            margin-top: 5px;
+        }
+        @media (max-width: 768px) {
+            .map-container {
+                height: 500px;
+            }
+            .map-controls {
+                width: 200px;
+            }
+            header {
+                flex-direction: column;
+                gap: 15px;
+                align-items: flex-start;
+            }
+            .language-toggle {
+                align-self: flex-end;
+            }
+        }
+        .heatmap-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            opacity: 0.4;
+            z-index: 500;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <div class="logo">
+                <div class="logo-icon">🌍</div>
+                <div class="logo-text">Dubai<span>Sustainability</span>Map</div>
+            </div>
+            <div class="language-toggle">
+                <button class="lang-btn active" id="english-btn">English</button>
+                <button class="lang-btn" id="arabic-btn">العربية</button>
+            </div>
+        </header>
+        <div class="map-container">
+            <div id="map"></div>
+            <div class="map-controls">
+                <div class="layer-title">♻️ Sustainability Layer</div>
+                <div class="toggle-container">
+                    <span id="toggle-label">OFF</span>
+                    <label class="toggle-switch">
+                        <input type="checkbox" id="sustainability-toggle">
+                        <span class="slider"></span>
+                    </label>
+                </div>
+                <div class="legend" id="legend">
+                    <div class="legend-title">Sustainability Score</div>
+                    <div class="legend-item">
+                        <div class="legend-color" style="background-color: #0c6b4c;"></div>
+                        <span>High (8-10)</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color" style="background-color: #ffc107;"></div>
+                        <span>Medium (5-7)</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color" style="background-color: #dc3545;"></div>
+                        <span>Low (0-4)</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="info-panel">
+            <div class="info-title">About the Sustainability Layer</div>
+            <div class="info-text" id="info-text">
+                The Sustainability Layer highlights properties across Dubai based on their environmental sustainability scores.
+                Properties are color-coded according to their scores: dark green for highly sustainable, yellow for medium sustainability,
+                and red for low sustainability. Properties with high scores also display a "🌱 Green Certified" badge.
+                Click on any property to view detailed sustainability metrics.
+            </div>
+            <div class="stats-container">
+                <div class="stat-card">
+                    <div class="stat-value">100</div>
+                    <div class="stat-label">Green Certified Properties</div>
+            </div>
+        </div>
+    </div>
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+    <script>
+        // Initialize the map
+        const map = L.map('map').setView([25.2048, 55.2708], 11);
+        // Add tile layer (using OpenStreetMap as base)
+        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);
+        // Generate 100 sample properties across Dubai with sustainability scores
+        const properties = [];
+        const dubaiAreas = [
+            { name: "Downtown Dubai", lat: 25.1972, lng: 55.2744, density: 15 },
+            { name: "Dubai Marina", lat: 25.0764, lng: 55.1394, density: 20 },
+            { name: "Jumeirah", lat: 25.2000, lng: 55.2400, density: 10 },
+            { name: "Business Bay", lat: 25.1859, lng: 55.2797, density: 12 },
+            { name: "Al Barsha", lat: 25.1189, lng: 55.2028, density: 15 },
+            { name: "Deira", lat: 25.2667, lng: 55.3167, density: 8 },
+            { name: "Bur Dubai", lat: 25.2500, lng: 55.3000, density: 10 },
+            { name: "Jebel Ali", lat: 25.0167, lng: 55.0667, density: 5 },
+            { name: "Mirdif", lat: 25.2200, lng: 55.4100, density: 5 },
+            { name: "The Greens", lat: 25.1250, lng: 55.2000, density: 8 },
+            { name: "Arabian Ranches", lat: 25.0381, lng: 55.2261, density: 7 },
+            { name: "Dubai Hills", lat: 25.0625, lng: 55.2944, density: 10 }
+        ];
+        // Function to generate random sustainability data
+        function generateSustainabilityData() {
+            const energyRatings = ["A++", "A+", "A", "B", "C", "D"];
+            const waterSystems = ["Advanced Smart System", "Smart System", "Standard System"];
+            const materials = [
+                "Recycled Steel & Glass",
+                "Eco-friendly Materials",
+                "Mixed Materials",
+                "Standard Concrete"
+            ];
+            const greenSpaces = [
+                "Abundant Green Spaces",
+                "Nearby Parks",
+                "Limited Green Spaces",
+                "Waterfront Access"
+            ];
+            return {
+                energyEfficiency: energyRatings[Math.floor(Math.random() * energyRatings.length)],
+                waterUse: waterSystems[Math.floor(Math.random() * waterSystems.length)],
+                solarPanels: Math.random() > 0.5 ? "Yes" : "No",
+                materials: materials[Math.floor(Math.random() * materials.length)],
+                greenSpaces: greenSpaces[Math.floor(Math.random() * greenSpaces.length)]
+            };
+        }
+        // Generate 100 properties across Dubai
+        let propertyId = 1;
+        dubaiAreas.forEach(area => {
+            for (let i = 0; i < area.density; i++) {
+                // Generate random coordinates within the area
+                const lat = area.lat + (Math.random() - 0.5) * 0.1;
+                const lng = area.lng + (Math.random() - 0.5) * 0.1;
+                // Generate sustainability score (weighted towards medium/high for realism)
+                let sustainabilityScore;
+                const rand = Math.random();
+                if (rand < 0.2) {
+                    sustainabilityScore = Math.floor(Math.random() * 3) + 8; // 20% high (8-10)
+                } else if (rand < 0.6) {
+                    sustainabilityScore = Math.floor(Math.random() * 3) + 5; // 40% medium (5-7)
+                } else {
+                    sustainabilityScore = Math.floor(Math.random() * 5); // 40% low (0-4)
+                }
+                const sustainabilityData = generateSustainabilityData();
+                properties.push({
+                    id: propertyId++,
+                    name: `${area.name} Property ${i+1}`,
+                    lat: lat,
+                    lng: lng,
+                    sustainabilityScore: sustainabilityScore,
+                    energyEfficiency: sustainabilityData.energyEfficiency,
+                    waterUse: sustainabilityData.waterUse,
+                    solarPanels: sustainabilityData.solarPanels,
+                    materials: sustainabilityData.materials,
+                    greenSpaces: sustainabilityData.greenSpaces
+                });
+            }
+        });
+        // Property markers
+        let propertyMarkers = [];
+        // Function to get color based on sustainability score
+        function getSustainabilityColor(score) {
+            if (score >= 8) return '#0c6b4c'; // Dark Green
+            if (score >= 5) return '#ffc107'; // Yellow
+            return '#dc3545'; // Red
+        }
+        // Function to add property markers to the map
+        function addPropertyMarkers() {
+            // Clear existing markers
+            propertyMarkers.forEach(marker => map.removeLayer(marker));
+            propertyMarkers = [];
+            // Add new markers
+            properties.forEach(property => {
+                const color = getSustainabilityColor(property.sustainabilityScore);
+                // Create marker
+                const marker = L.circleMarker([property.lat, property.lng], {
+                    color: color,
+                    fillColor: color,
+                    fillOpacity: 0.7,
+                    radius: 10
+                }).addTo(map);
+                // Create popup content
+                let popupContent = `<div class="property-popup">`;
+                popupContent += `<div class="popup-title">${property.name}</div>`;
+                // Add sustainability score badge
+                let scoreClass = '';
+                if (property.sustainabilityScore >= 8) scoreClass = 'high-score';
+                else if (property.sustainabilityScore >= 5) scoreClass = 'medium-score';
+                else scoreClass = 'low-score';
+                popupContent += `<div class="sustainability-score ${scoreClass}">Sustainability Score: ${property.sustainabilityScore}/10</div>`;
+                // Add green certified badge for high scores
+                if (property.sustainabilityScore >= 8) {
+                    popupContent += `<div class="green-badge">🌱 Green Certified</div>`;
+                }
+                // Add sustainability metrics
+                popupContent += `<div class="metrics">`;
+                popupContent += `<div class="metric"><span class="metric-name">Energy Efficiency:</span><span class="metric-value">${property.energyEfficiency}</span></div>`;
+                popupContent += `<div class="metric"><span class="metric-name">Water Use:</span><span class="metric-value">${property.waterUse}</span></div>`;
+                popupContent += `<div class="metric"><span class="metric-name">Solar Panels:</span><span class="metric-value">${property.solarPanels}</span></div>`;
+                popupContent += `<div class="metric"><span class="metric-name">Materials:</span><span class="metric-value">${property.materials}</span></div>`;
+                popupContent += `<div class="metric"><span class="metric-name">Green Spaces:</span><span class="metric-value">${property.greenSpaces}</span></div>`;
+                popupContent += `</div></div>`;
+                // Bind popup to marker
+                marker.bindPopup(popupContent);
+                // Add to markers array
+                propertyMarkers.push(marker);
+            });
+        }
+        // Initially add property markers
+        addPropertyMarkers();
+        // Toggle sustainability layer
+        const sustainabilityToggle = document.getElementById('sustainability-toggle');
+        const legend = document.getElementById('legend');
+        const toggleLabel = document.getElementById('toggle-label');
+        sustainabilityToggle.addEventListener('change', function() {
+            if (this.checked) {
+                // Layer is ON - show markers
+                propertyMarkers.forEach(marker => map.addLayer(marker));
+                legend.style.display = 'block';
+                toggleLabel.textContent = 'ON';
+                toggleLabel.style.color = '#0c6b4c';
+            } else {
+                // Layer is OFF - hide markers
+                propertyMarkers.forEach(marker => map.removeLayer(marker));
+                legend.style.display = 'none';
+                toggleLabel.textContent = 'OFF';
+                toggleLabel.style.color = '#666';
+            }
+        });
+        // Language toggle functionality
+        const englishBtn = document.getElementById('english-btn');
+        const arabicBtn = document.getElementById('arabic-btn');
+        const infoText = document.getElementById('info-text');
+        // English content
+        const englishContent = {
+            layerTitle: "♻️ Sustainability Layer",
+            legendTitle: "Sustainability Score",
+            toggleLabel: "ON",
+            infoText: "The Sustainability Layer highlights properties across Dubai based on their environmental sustainability scores. Properties are color-coded according to their scores: dark green for highly sustainable, yellow for medium sustainability, and red for low sustainability. Properties with high scores also display a '🌱 Green Certified' badge. Click on any property to view detailed sustainability metrics."
+        };
+        // Arabic content
+        const arabicContent = {
+            layerTitle: "♻️ طبقة الاستدامة",
+            legendTitle: "درجة الاستدامة",
+            toggleLabel: "تشغيل",
+            infoText: "تسلط طبقة الاستدامة الضوء على العقارات في جميع أنحاء دبي بناءً على درجات الاستدامة البيئية. يتم ترميز العقارات بالألوان وفقًا لدرجاتها: الأخضر الداكن للاستدامة العالية، والأصفر للاستدامة المتوسطة، والأحمر للاستدامة المنخفضة. تعرض العقارات ذات الدرجات العالية أيضًا شارة '🌱 معتمدة باللون الأخضر'. انقر على أي عقار لعرض مقاييس الاستدامة التفصيلية."
+        };
+        englishBtn.addEventListener('click', function() {
+            englishBtn.classList.add('active');
+            arabicBtn.classList.remove('active');
+            // Update text content
+            document.querySelector('.layer-title').textContent = englishContent.layerTitle;
+            document.querySelector('.legend-title').textContent = englishContent.legendTitle;
+            toggleLabel.textContent = sustainabilityToggle.checked ? englishContent.toggleLabel : 'OFF';
+            infoText.textContent = englishContent.infoText;
+        });
+        arabicBtn.addEventListener('click', function() {
+            arabicBtn.classList.add('active');
+            englishBtn.classList.remove('active');
+            // Update text content
+            document.querySelector('.layer-title').textContent = arabicContent.layerTitle;
+            document.querySelector('.legend-title').textContent = arabicContent.legendTitle;
+            toggleLabel.textContent = sustainabilityToggle.checked ? arabicContent.toggleLabel : 'إيقاف';
+            infoText.textContent = arabicContent.infoText;
+        });
+        // Initialize with English
+        englishBtn.click();
+    </script>
+</body>
+</html>