Spaces:
Sleeping
Sleeping
| from flask import Flask, render_template_string | |
| app = Flask(__name__) | |
| # HTML template with Google Hybrid as the default layer | |
| html_template = """ | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GPS Location Map</title> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" /> | |
| <style> | |
| #map { height: 600px; width: 100%; } | |
| </style> | |
| <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script> | |
| </head> | |
| <body onload="initMap()"> | |
| <h1>Your Location on the Map</h1> | |
| <div id="map">Loading map...</div> | |
| <script> | |
| let map; | |
| let marker; | |
| let path = []; // Array to store the trajectory points | |
| let polyline; // Polyline to show the trajectory | |
| function initMap() { | |
| // Initialize map with default coordinates | |
| map = L.map('map').setView([23.2136165, 72.6873751], 15); | |
| // Basemap layers | |
| const googleHybridLayer = L.tileLayer('https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}', { | |
| maxZoom: 20, | |
| attribution: '© Google' | |
| }).addTo(map); // Set Google Hybrid as default | |
| const osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| maxZoom: 19, | |
| attribution: '© OpenStreetMap contributors' | |
| }); | |
| const cartoDBLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', { | |
| maxZoom: 19, | |
| attribution: '© CartoDB' | |
| }); | |
| // Layer control | |
| const baseLayers = { | |
| "Google Hybrid": googleHybridLayer, | |
| "OpenStreetMap": osmLayer, | |
| "CartoDB Voyager": cartoDBLayer | |
| }; | |
| L.control.layers(baseLayers).addTo(map); | |
| // Start watching the user's location | |
| if (navigator.geolocation) { | |
| navigator.geolocation.watchPosition(showPosition, showError); | |
| } else { | |
| alert("Geolocation is not supported by this browser."); | |
| } | |
| } | |
| function showPosition(position) { | |
| const lat = position.coords.latitude; | |
| const lng = position.coords.longitude; | |
| // Update marker position or create a new marker | |
| if (marker) { | |
| marker.setLatLng([lat, lng]).update(); // Update existing marker position | |
| } else { | |
| marker = L.marker([lat, lng]).addTo(map) | |
| .bindPopup("<b>Your Location</b>") | |
| .openPopup(); // Create new marker | |
| } | |
| // Center the map on the user's location | |
| map.setView([lat, lng], 15); | |
| // Store the current position in the path array | |
| path.push([lat, lng]); | |
| // If the polyline doesn't exist, create it | |
| if (!polyline) { | |
| polyline = L.polyline(path, { color: 'blue' }).addTo(map); | |
| } else { | |
| polyline.setLatLngs(path); // Update polyline with new path | |
| } | |
| } | |
| function showError(error) { | |
| alert("Unable to retrieve your location due to " + error.message); | |
| } | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| def index(): | |
| return render_template_string(html_template) | |
| if __name__ == "__main__": | |
| app.run(debug=True) | |