Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <title>Geographical Interface</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> | |
| <style> | |
| #map { | |
| width: 100%; | |
| height: 100vh; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| #data-entry-panel { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| width: 300px; | |
| background-color: #f8f8f8; | |
| padding: 15px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| z-index: 1000; | |
| } | |
| #data-entry-panel label, | |
| #data-entry-panel select, | |
| #data-entry-panel textarea { | |
| display: block; | |
| margin-bottom: 10px; | |
| width: 100%; | |
| } | |
| #data-entry-form button { | |
| display: block; | |
| margin: 0 auto; | |
| padding: 10px 20px; | |
| background-color: orange; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| #data-entry-form button:hover { | |
| background-color: darkorange; | |
| } | |
| /* Additional styles for multi-mode transport options */ | |
| #multi-mode-options { | |
| display: none; | |
| margin-top: 10px; | |
| margin-bottom: 10px; | |
| } | |
| /* Point Type Selector styles */ | |
| #point-selector { | |
| position: absolute; | |
| top: 10px; | |
| left: 75px; | |
| background-color: #f8f8f8; | |
| padding: 10px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| z-index: 1000; | |
| font-size: 16px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <!-- Point Type Selector on the Left --> | |
| <div id="point-selector"> | |
| <p>Select Point Type:</p> | |
| <label style="display: inline-block; margin-right: 10px;"> | |
| <input type="radio" name="pointType" value="start" checked> | |
| <span style="color: red;">●</span> Start Point | |
| </label> | |
| <label style="display: inline-block; margin-right: 10px;"> | |
| <input type="radio" name="pointType" value="lost"> | |
| <span style="color: yellow;">●</span> Getting Lost Point | |
| </label> | |
| <label style="display: inline-block;"> | |
| <input type="radio" name="pointType" value="end"> | |
| <span style="color: blue;">●</span> End Point | |
| </label> | |
| </div> | |
| <!-- Side Panel --> | |
| <div id="data-entry-panel"> | |
| <h3>Enter Data</h3> | |
| <form id="data-entry-form"> | |
| <label for="age">Age:</label> | |
| <select id="age"> | |
| <option value="0-10">0-10</option> | |
| <option value="11-20">11-20</option> | |
| <option value="21-30">21-30</option> | |
| <option value="31-40">31-40</option> | |
| <option value="41-50">41-50</option> | |
| <option value="51-60">51-60</option> | |
| <option value="61+">61+</option> | |
| </select> | |
| <label for="gender">Gender:</label> | |
| <select id="gender"> | |
| <option value="F">Female</option> | |
| <option value="M">Male</option> | |
| <option value="O">Other</option> | |
| <option value="PNTS">Prefer Not To Say</option> | |
| </select> | |
| <label for="transport">Mode of Transport:</label> | |
| <select id="transport" onchange="checkTransportMode()"> | |
| <option value="Walk">Walk</option> | |
| <option value="Car">Car</option> | |
| <option value="Bike">Bike</option> | |
| <option value="Train">Train</option> | |
| <option value="Subway">Subway</option> | |
| <option value="Other">Other</option> | |
| <option value="Multi">Multi</option> | |
| </select> | |
| <div id="multi-mode-options"> | |
| <p>Select modes used:</p> | |
| <input type="checkbox" id="walk" name="mode" value="Walk"> | |
| <label for="walk">Walk</label><br> | |
| <input type="checkbox" id="Train" name="mode" value="Train"> | |
| <label for="walk">Train</label><br> | |
| <input type="checkbox" id="Bike" name="mode" value="Bike"> | |
| <label for="Bike">Bike</label><br> | |
| <input type="checkbox" id="Subway" name="mode" value="Subway"> | |
| <label for="Subway">Subway</label><br> | |
| </div> | |
| <label for="timeOfDay">Time Of Day:</label> | |
| <select id="timeOfDay"> | |
| <option value="Morning">Morning</option> | |
| <option value="Afternoon">Afternoon</option> | |
| <option value="Evening">Evening</option> | |
| <option value="Night">Night</option> | |
| </select> | |
| <label for="dayOfWeek">Date (Day of the week):</label> | |
| <select id="dayOfWeek"> | |
| <option value="Monday">Monday</option> | |
| <option value="Tuesday">Tuesday</option> | |
| <option value="Wednesday">Wednesday</option> | |
| <option value="Thursday">Thursday</option> | |
| <option value="Friday">Friday</option> | |
| <option value="Saturday">Saturday</option> | |
| <option value="Sunday">Sunday</option> | |
| </select> | |
| <label for="description">Why did you get lost?</label> | |
| <textarea id="description" rows="4"></textarea> | |
| <button type="button" onclick="submitData()">Save</button> | |
| <hr style="margin-top: 15px;"> | |
| <p>For a more detailed survey, click the link or scan the QR code:</p> | |
| <a href="https://arcg.is/1GK5jP0" target="_blank">https://arcg.is/1GK5jP0</a> | |
| <br> | |
| <img src="/static/Getting Lost Survey.png" alt="QR Code for Survey" style="margin-top: 10px; width: 50%;"> | |
| </div> | |
| </form> | |
| </div> | |
| <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> | |
| <script> | |
| var openStreetMapLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© OpenStreetMap contributors' | |
| }); | |
| var openTopoMapLayer = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { | |
| attribution: '© OpenTopoMap contributors' | |
| }); | |
| var map = L.map('map', { | |
| center: [51.505, -0.09], | |
| zoom: 13, | |
| layers: [openStreetMapLayer] | |
| }); | |
| var baseMaps = { | |
| "OpenStreetMap": openStreetMapLayer, | |
| "OpenTopoMap": openTopoMapLayer | |
| }; | |
| L.control.layers(baseMaps, null, { position: 'topleft' }).addTo(map); | |
| var clickedLat = null; | |
| var clickedLon = null; | |
| map.on('click', function (e) { | |
| clickedLat = e.latlng.lat; | |
| clickedLon = e.latlng.lng; | |
| var pointType = document.querySelector('input[name="pointType"]:checked').value; | |
| var color; | |
| switch (pointType) { | |
| case 'start': | |
| color = 'red'; | |
| break; | |
| case 'lost': | |
| color = 'yellow'; | |
| break; | |
| case 'end': | |
| color = 'blue'; | |
| break; | |
| } | |
| L.circleMarker([clickedLat, clickedLon], { | |
| color: color, | |
| radius: 5 | |
| }).addTo(map); | |
| }); | |
| function checkTransportMode() { | |
| var transport = document.getElementById('transport').value; | |
| var multiOptions = document.getElementById('multi-mode-options'); | |
| if (transport === 'Multi') { | |
| multiOptions.style.display = 'block'; | |
| } else { | |
| multiOptions.style.display = 'none'; | |
| } | |
| } | |
| function submitData() { | |
| var age = document.getElementById('age').value; | |
| var gender = document.getElementById('gender').value; | |
| var transport = document.getElementById('transport').value; | |
| var timeOfDay = document.getElementById('timeOfDay').value; | |
| var dayOfWeek = document.getElementById('dayOfWeek').value; | |
| var description = document.getElementById('description').value; | |
| var pointType = document.getElementById('pointType').value; | |
| fetch('/record_data', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ | |
| age: age, | |
| gender: gender, | |
| transport: transport, | |
| timeOfDay: timeOfDay, | |
| dayOfWeek: dayOfWeek, | |
| description: description, | |
| lat: clickedLat, | |
| lon: clickedLon, | |
| pointType: pointType | |
| }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.error) { | |
| alert('Failed to record data: ' + data.error); | |
| } else { | |
| alert(data.message); | |
| } | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |