DhakaMetroFare-v2.0

Running

App Files Files Community

shukdevdatta123 commited on Dec 20, 2024

Commit

4b581f6

verified ·

1 Parent(s): 3ed15d0

Update app.py

Browse files

Files changed (1) hide show

app.py +160 -0

app.py CHANGED Viewed

@@ -1,5 +1,6 @@
 import streamlit as st
 import pandas as pd
 # Load the Excel file
 file_path = 'Dhaka Metro Rail Fare 2.XLSX'  # Ensure the correct file path
@@ -101,3 +102,162 @@ else:
             st.write("No fare data available for the selected origin and destinations.")
     else:
         st.write("Please select both an origin and at least one destination.")

 import streamlit as st
 import pandas as pd
+import streamlit.components.v1 as components
 # Load the Excel file
 file_path = 'Dhaka Metro Rail Fare 2.XLSX'  # Ensure the correct file path
             st.write("No fare data available for the selected origin and destinations.")
     else:
         st.write("Please select both an origin and at least one destination.")
+    # Embedding the interactive map
+    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: #f0f0f0;
+            }
+        </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)