DhakaMetroFare-v2.0

Sleeping

App Files Files Community

shukdevdatta123 commited on Dec 21, 2024

Commit

3270969

verified ·

1 Parent(s): 55de6c1

Update app.py

Browse files

Files changed (1) hide show

app.py +170 -137

app.py CHANGED Viewed

@@ -122,155 +122,188 @@ If you encounter any issues or need assistance, feel free to [Contact Support on
     st.write("### Interactive Map of Dhaka Metro Stations")
     map_html = """
     <!DOCTYPE html>
-    <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Interactive Map</title>
-        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
-        <style>
             #map {
-                height: 90vh;
-                width: 100%;
             }
             #controls {
-                height: 10vh;
-                padding: 10px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                gap: 10px;
-                background-color: #D8C4B6;
             }
-        </style>
-    </head>
-    <body>
-        <div id="controls">
-            <select id="source">
-                <option value="">Select Source</option>
-            </select>
-            <select id="destination">
-                <option value="">Select Destination</option>
-            </select>
-            <button onclick="startRouteAnimation()">Animate Route</button>
-            <button onclick="animateAllLocations()">Animate All Locations</button>
-            <button onclick="stopAnimation()">Stop Animation</button>
-        </div>
-        <div id="map"></div>
-        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
-        <script>
-            const coordinates = {
-                "Uttara North": [23.869066, 90.367445],
-                "Uttara Center": [23.860118, 90.365106],
-                "Uttara South": [23.845934, 90.363175],
-                "Pallabi": [23.82619516961383, 90.36481554252525],
-                "Mirpur 11": [23.819438208310213, 90.36528532902963],
-                "Mirpur 10": [23.808582994847285, 90.36821595330717],
-                "Kazipara": [23.800017952100532, 90.37178261495391],
-                "Shewrapara": [23.79070140857881, 90.37564622631841],
-                "Agargaon": [23.778385546736345, 90.3800557456356],
-                "Bijoy Sarani": [23.766638127271825, 90.38307537134754],
-                "Farmgate": [23.75923604938459, 90.38694218434738],
-                "Kawran Bazar": [23.751392319539104, 90.39275707447003],
-                "Shahbagh": [23.740324209546923, 90.39600784811131],
-                "Dhaka University": [23.732091083122114, 90.39659408796354],
-                "Bangladesh Secretariat": [23.73004754106779, 90.40764881366906],
-                "Motijheel": [23.72816566933198, 90.41923497972823],
-                "Kamalapur": [23.732367758919807, 90.42547378971085]
-            };
-            const map = L.map('map').setView([23.8103, 90.4125], 12); // Centered on Dhaka
-            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                maxZoom: 19,
-                attribution: '© OpenStreetMap contributors'
-            }).addTo(map);
-            // Populate source and destination dropdowns
-            const sourceSelect = document.getElementById('source');
-            const destinationSelect = document.getElementById('destination');
-            for (const location in coordinates) {
-                const option = document.createElement('option');
-                option.value = location;
-                option.textContent = location;
-                sourceSelect.appendChild(option);
-                destinationSelect.appendChild(option.cloneNode(true));
-            }
-            const markers = {};
-            for (const [name, coord] of Object.entries(coordinates)) {
-                const marker = L.marker(coord).addTo(map).bindPopup(`<b>${name}</b>`);
-                markers[name] = marker;
             }
-            let currentIndex = 0;
-            const markerArray = Object.values(markers);
-            let animationTimeout; // Store the timeout ID to cancel animation
-            function getIntermediateNodes(source, destination) {
-                const allLocations = Object.keys(coordinates);
-                const sourceIndex = allLocations.indexOf(source);
-                const destinationIndex = allLocations.indexOf(destination);
-                const route = [];
-                if (sourceIndex < destinationIndex) {
-                    // Forward direction (source to destination)
-                    route.push(...allLocations.slice(sourceIndex, destinationIndex + 1));
-                } else {
-                    // Reverse direction (destination to source)
-                    route.push(...allLocations.slice(destinationIndex, sourceIndex + 1).reverse());
-                }
-                return route;
             }
-            function startRouteAnimation() {
-                const source = sourceSelect.value;
-                const destination = destinationSelect.value;
-                if (!source || !destination) {
-                    alert('Please select both source and destination locations.');
-                    return;
-                }
-                const route = getIntermediateNodes(source, destination);
-                let routeIndex = 0;
-                function animateRoute() {
-                    if (routeIndex >= route.length) {
-                        return; // Animation completed
-                    }
-                    const currentLocation = route[routeIndex];
-                    const marker = markers[currentLocation];
-                    if (routeIndex === 0) {
-                        map.flyTo(marker.getLatLng(), 14, { duration: 2 });
-                        marker.openPopup();
-                    } else {
-                        setTimeout(() => {
-                            map.flyTo(marker.getLatLng(), 14, { duration: 2 });
-                            marker.openPopup();
-                        }, 3000);
-                    }
-                    routeIndex++;
-                    animationTimeout = setTimeout(animateRoute, 3000); // Wait before moving to the next
-                }
-                animateRoute();
             }
-            function animateAllLocations() {
-                if (currentIndex > 0) {
-                    markerArray[currentIndex - 1].closePopup();
                 }
-                if (currentIndex < markerArray.length) {
-                    const marker = markerArray[currentIndex];
                     map.flyTo(marker.getLatLng(), 14, { duration: 2 });
                     marker.openPopup();
-                    currentIndex++;
-                    animationTimeout = setTimeout(animateAllLocations, 3000); // Wait 3 seconds before next
                 } else {
-                    currentIndex = 0; // Restart animation
                 }
             }
-            // Stop animation and reset everything
-            function stopAnimation() {
-                clearTimeout(animationTimeout); // Stop the timeout for animation
-                currentIndex = 0; // Reset index
-                for (const marker of markerArray) {
-                    marker.closePopup(); // Close all popups
-                }
-                map.setView([23.8103, 90.4125], 12); // Reset map to initial view
-                sourceSelect.value = ''; // Clear source dropdown
-                destinationSelect.value = ''; // Clear destination dropdown
             }
-        </script>
-    </body>
-    </html>
-    """
     components.html(map_html, height=600)

     st.write("### Interactive Map of Dhaka Metro Stations")
     map_html = """
     <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive Map</title>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+    <style>
+        /* Make map container responsive */
+        #map {
+            height: 70vh; /* Default height is 70% of the viewport height */
+            width: 100%;  /* Full width */
+        }
+        /* Controls container: Flex layout for larger screens, column layout for smaller screens */
+        #controls {
+            padding: 10px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+            background-color: #D8C4B6;
+            flex-wrap: wrap; /* Allows wrapping of elements on small screens */
+        }
+        #controls select, #controls button {
+            margin: 5px;
+            font-size: 14px;
+        }
+        @media (max-width: 600px) {
             #map {
+                height: 50vh; /* For mobile screens, reduce map height */
             }
             #controls {
+                flex-direction: column; /* Stack controls vertically on smaller screens */
             }
+            #controls select, #controls button {
+                width: 100%; /* Make controls fill the available width */
+                margin: 8px 0; /* Add vertical margin for better spacing */
             }
+        }
+    </style>
+</head>
+<body>
+    <div id="controls">
+        <select id="source">
+            <option value="">Select Source</option>
+        </select>
+        <select id="destination">
+            <option value="">Select Destination</option>
+        </select>
+        <button onclick="startRouteAnimation()">Animate Route</button>
+        <button onclick="animateAllLocations()">Animate All Locations</button>
+        <button onclick="stopAnimation()">Stop Animation</button>
+    </div>
+    <div id="map"></div>
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+    <script>
+        const coordinates = {
+            "Uttara North": [23.869066, 90.367445],
+            "Uttara Center": [23.860118, 90.365106],
+            "Uttara South": [23.845934, 90.363175],
+            "Pallabi": [23.82619516961383, 90.36481554252525],
+            "Mirpur 11": [23.819438208310213, 90.36528532902963],
+            "Mirpur 10": [23.808582994847285, 90.36821595330717],
+            "Kazipara": [23.800017952100532, 90.37178261495391],
+            "Shewrapara": [23.79070140857881, 90.37564622631841],
+            "Agargaon": [23.778385546736345, 90.3800557456356],
+            "Bijoy Sarani": [23.766638127271825, 90.38307537134754],
+            "Farmgate": [23.75923604938459, 90.38694218434738],
+            "Kawran Bazar": [23.751392319539104, 90.39275707447003],
+            "Shahbagh": [23.740324209546923, 90.39600784811131],
+            "Dhaka University": [23.732091083122114, 90.39659408796354],
+            "Bangladesh Secretariat": [23.73004754106779, 90.40764881366906],
+            "Motijheel": [23.72816566933198, 90.41923497972823],
+            "Kamalapur": [23.732367758919807, 90.42547378971085]
+        };
+        const map = L.map('map').setView([23.8103, 90.4125], 12); // Centered on Dhaka
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: '© OpenStreetMap contributors'
+        }).addTo(map);
+        // Populate source and destination dropdowns
+        const sourceSelect = document.getElementById('source');
+        const destinationSelect = document.getElementById('destination');
+        for (const location in coordinates) {
+            const option = document.createElement('option');
+            option.value = location;
+            option.textContent = location;
+            sourceSelect.appendChild(option);
+            destinationSelect.appendChild(option.cloneNode(true));
+        }
+        const markers = {};
+        for (const [name, coord] of Object.entries(coordinates)) {
+            const marker = L.marker(coord).addTo(map).bindPopup(`<b>${name}</b>`);
+            markers[name] = marker;
+        }
+        let currentIndex = 0;
+        const markerArray = Object.values(markers);
+        let animationTimeout; // Store the timeout ID to cancel animation
+        function getIntermediateNodes(source, destination) {
+            const allLocations = Object.keys(coordinates);
+            const sourceIndex = allLocations.indexOf(source);
+            const destinationIndex = allLocations.indexOf(destination);
+            const route = [];
+            if (sourceIndex < destinationIndex) {
+                // Forward direction (source to destination)
+                route.push(...allLocations.slice(sourceIndex, destinationIndex + 1));
+            } else {
+                // Reverse direction (destination to source)
+                route.push(...allLocations.slice(destinationIndex, sourceIndex + 1).reverse());
             }
+            return route;
+        }
+        function startRouteAnimation() {
+            const source = sourceSelect.value;
+            const destination = destinationSelect.value;
+            if (!source || !destination) {
+                alert('Please select both source and destination locations.');
+                return;
             }
+            const route = getIntermediateNodes(source, destination);
+            let routeIndex = 0;
+            function animateRoute() {
+                if (routeIndex >= route.length) {
+                    return; // Animation completed
                 }
+                const currentLocation = route[routeIndex];
+                const marker = markers[currentLocation];
+                if (routeIndex === 0) {
                     map.flyTo(marker.getLatLng(), 14, { duration: 2 });
                     marker.openPopup();
                 } else {
+                    setTimeout(() => {
+                        map.flyTo(marker.getLatLng(), 14, { duration: 2 });
+                        marker.openPopup();
+                    }, 3000);
                 }
+                routeIndex++;
+                animationTimeout = setTimeout(animateRoute, 3000); // Wait before moving to the next
             }
+            animateRoute();
+        }
+        function animateAllLocations() {
+            if (currentIndex > 0) {
+                markerArray[currentIndex - 1].closePopup();
+            }
+            if (currentIndex < markerArray.length) {
+                const marker = markerArray[currentIndex];
+                map.flyTo(marker.getLatLng(), 14, { duration: 2 });
+                marker.openPopup();
+                currentIndex++;
+                animationTimeout = setTimeout(animateAllLocations, 3000); // Wait 3 seconds before next
+            } else {
+                currentIndex = 0; // Restart animation
+            }
+        }
+        function stopAnimation() {
+            clearTimeout(animationTimeout); // Stop the timeout for animation
+            currentIndex = 0; // Reset index
+            for (const marker of markerArray) {
+                marker.closePopup(); // Close all popups
             }
+            map.setView([23.8103, 90.4125], 12); // Reset map to initial view
+            sourceSelect.value = ''; // Clear source dropdown
+            destinationSelect.value = ''; // Clear destination dropdown
+        }
+    </script>
+</body>
+</html>
+"""
     components.html(map_html, height=600)