187 lines
7.0 KiB
HTML
187 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OpenStreetMap with GTFS Toolbar</title>
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Leaflet CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" />
|
|
|
|
{% load static %}
|
|
|
|
<style>
|
|
body, html {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
#map {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.sidebar {
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 250px;
|
|
background-color: #f8f9fa;
|
|
border-right: 1px solid #dee2e6;
|
|
padding-top: 20px;
|
|
}
|
|
.content {
|
|
margin-left: 250px;
|
|
height: 100%;
|
|
}
|
|
.modal-body {
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
}
|
|
.route-list {
|
|
max-height: 400px;
|
|
overflow-y: scroll;
|
|
}
|
|
</style>
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sidebar">
|
|
<div class="container">
|
|
<h5 class="mt-4">Options</h5>
|
|
<div class="list-group">
|
|
<input type="file" id="fileInput" class="d-none" webkitdirectory mozdirectory>
|
|
<button class="list-group-item list-group-item-action" onclick="document.getElementById('fileInput').click();">Load GTFS from computer</button>
|
|
<button class="list-group-item list-group-item-action" onclick="importGTFS()">Import existing GTFS</button>
|
|
</div>
|
|
<h5 id="currentGTFS">
|
|
Current GTFS
|
|
<h6 id="newShape">
|
|
<button class="list-group-item list-group-item-action" onclick="drawNewShape()">Draw New Shape</button>
|
|
<button class="list-group-item list-group-item-action" onclick="addNewShape()">Add New Shape</button>
|
|
</h6>
|
|
<h6 id="chosenShape">
|
|
Chosen Shape
|
|
<!-- Shape options will be inserted here -->
|
|
</h6>
|
|
<h6 id="currentRoutes">
|
|
Current GTFS
|
|
<!-- Route IDs will be inserted here -->
|
|
</h6>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div id="map"></div>
|
|
</div>
|
|
|
|
<!-- Modal for displaying trips -->
|
|
<div class="modal fade" id="tripsModal" tabindex="-1" aria-labelledby="tripsModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="tripsModalLabel">Trips</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table table-bordered" id="tripsTable">
|
|
<!-- Trips data will be inserted here -->
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS, Popper.js, and jQuery -->
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
|
<!-- Leaflet JS -->
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
<script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
|
|
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
|
|
<script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
|
|
<!-- Scripts with helper functions -->
|
|
|
|
<!-- <script src="sidebar.js"></script>
|
|
<script src="shapes_on_map.js"></script>
|
|
<script src="parsing_files.js"></script> -->
|
|
|
|
<script src="{%static 'pt_map/sidebar.js'%}"></script>
|
|
<script src="{%static 'pt_map/shapes_on_map.js'%}"></script>
|
|
<script src="{%static 'pt_map/parsing_files.js'"%}></script>
|
|
|
|
<script>
|
|
// Initialize the map centered on Toruń, Poland
|
|
var map = L.map('map').setView([53.0138, 18.5984], 13);
|
|
|
|
// Load OpenStreetMap tiles
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
}).addTo(map);
|
|
|
|
// Holder for data imported from the server.
|
|
let imported_data = null;
|
|
let routesData = [];
|
|
let tripsData = [];
|
|
let stopsData = [];
|
|
let stopTimesData = [];
|
|
// Holder of currently inspected shape ID value
|
|
let currentShapeIDs = {};
|
|
currentShapeIDs["routes"] = [];
|
|
currentShapeIDs["stops"] = [];
|
|
// Create empty dictionary for shapes to be displayed on the map.
|
|
let shapes = {};
|
|
shapes["routes"] = {};
|
|
shapes["stops"] = {};
|
|
// Total number of newly defined Shapes
|
|
// In a mature version the indexing has to be changed.
|
|
let numNewShapes = 0;
|
|
// Current layer that can be saved or discarded
|
|
let currentLayer = null;
|
|
|
|
// Setting up the drawing control
|
|
|
|
// FeatureGroup to store layers created by drawing
|
|
var drawnItems = new L.FeatureGroup();
|
|
map.addLayer(drawnItems);
|
|
|
|
// Set up the drawing control
|
|
var drawControl = new L.Control.Draw({
|
|
position: 'topright', // Adds the drawing control on the right
|
|
edit: {
|
|
featureGroup: drawnItems
|
|
},
|
|
draw: false
|
|
});
|
|
|
|
// Polyline drawer that will be used for drawing on the map
|
|
let polylineDrawer = new L.Draw.Polyline(map, drawControl.options.polyline);
|
|
|
|
document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
|
|
|
|
// Add the map click event listener
|
|
map.on('click', onMapClick);
|
|
|
|
// Function to write "Hello World!" to the console when the map is clicked
|
|
function onMapClick(event) {
|
|
// Check if the click event is not on a shape
|
|
if (!event.originalEvent.target.closest('.leaflet-interactive')) {
|
|
cancelShapeEdit();
|
|
}
|
|
}
|
|
|
|
function importGTFS() {
|
|
//imported_data = JSON.parse('{{ data }}');
|
|
alert("Import existing GTFS clicked");
|
|
// Logic to import existing GTFS would go here
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|