johannes/transport-accessibility
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Development of the drawing mechanism, displaying stops with the data imported from the database.

Browse Source
This commit is contained in:
Jan Kiljanski
2024-06-11 23:04:22 +02:00
parent 1dd906a87f
commit b90acfcebe
4 changed files with 68 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
transport_accessibility/pt_map/static/pt_map/shapes_on_map.js
View File

@@ -33,8 +33,19 @@ function addClickablePoint(latlng, point_id) {
// Add click event listener to marker
marker.on('click', function (e) {
let point_ids = [point_id];
highlightShapes(point_ids, "stops");
if (addingNewShape == true) {
currentShapeIDs["stops"].push(point_id);
if (currentShapeIDs["stops"].length>1) {
const latlngs = currentShapeIDs["stops"].map(stopId => {
const stop = shapes["stops"][stopId];
return [stop.stop_lat, stop.stop_lon];
});
currentlyAddedPolyline.remove();
currentlyAddedPolyline = L.polyline(latlngs, { color: 'blue', weight: 5 }).addTo(map);
}
}
shape_ids = [point_id];
highlightShapes(shape_ids, "stops");
console.log('Point clicked:', point_id);
});
}
@@ -57,15 +68,21 @@ function highlightShapes(shape_ids, type) {
}
}
if (currentShapeIDs["stops"].length > 0) {
for (const id of currentShapeIDs["stops"]) {
console.log("stop id: ", id);
console.log("shapes[id]: ", shapes[id]);
if (shapes["stops"][id] && shapes["stops"][id]["marker"]) {
shapes["stops"][id]["marker"].setStyle({ color: 'blue' });
console.log("addingNewShape: ", addingNewShape);
console.log("currentShapeIDs['stops'] ", currentShapeIDs["stops"]);
if (addingNewShape == false) {
if (currentShapeIDs["stops"].length > 0) {
console.log("Shapes to mark blue:");
for (const id of currentShapeIDs["stops"]) {
console.log("stop id: ", id);
//console.log("shapes['stops'][id]['marker']: ", shapes["stops"][id]['marker']);
if (shapes["stops"][id] && shapes["stops"][id]["marker"]) {
shapes["stops"][id]["marker"].setStyle({ color: 'blue' });
}
}
}
}
if (type == "routes") {
for (const id of shape_ids) {
@@ -98,4 +115,14 @@ function makeShapesBlue() {
}
}
}
// Reset previous polylines to blue
if (currentShapeIDs["stops"].length > 0) {
for (const id of currentShapeIDs["stops"]) {
if (shapes["stops"][id] && shapes["stops"][id]["marker"]) {
shapes["stops"][id]["marker"].setStyle({ color: 'blue' });
}
}
}
currentShapeIDs = {routes: [], stops: []};
}

35
transport_accessibility/pt_map/static/pt_map/sidebar.js
View File

@@ -170,6 +170,7 @@ function addNewStop() {
function addNewShape() {
shapeStops = [];
cancelShapeEdit();
addingNewShape = true;
// Create a container div for the buttons
const buttonContainer = document.createElement('div');
@@ -240,33 +241,6 @@ function addNewShape() {
// Append the button container to the chosenShape element
chosenShape.appendChild(buttonContainer);
polylineDrawer.enable();
// Add created polylines to the map
map.on(L.Draw.Event.CREATED, function (event) {
var layer = event.layer;
currentLayer = layer;
drawnItems.addLayer(layer);
});
// Add created shapes to the map and handle the polyline
map.on(L.Draw.Event.CREATED, function (event) {
var layer = event.layer;
// Check if the drawn shape is a polyline
if (layer instanceof L.Polyline && !(layer instanceof L.Polygon)) {
// Disable the drawing control
map.removeControl(drawControl);
saveButton.style.backgroundColor = 'green';
saveButton.style.color = 'white'; // Ensure the text is readable
saveButton.setAttribute('ready-to-save', 'true');
} else {
// Add the drawn layer to the map if it's not a polyline
drawnItems.addLayer(layer);
}
});
}
function displayShapeOptions(shapeId, shapes) {
@@ -480,6 +454,13 @@ function displayShapeOptions(shapeId, shapes) {
function cancelShapeEdit () {
// Define reference to the chosenShape field
const chosenShape = document.getElementById('chosenShape');
addingNewShape = false;
console.log("currentlyAddedPolyline: ", currentlyAddedPolyline);
if (currentlyAddedPolyline !== null) {
currentlyAddedPolyline.remove();
currentlyAddedPolyline = null;
}
console.log("currentlyAddedPolyline: ", currentlyAddedPolyline);
// Remove any existing routing control (if needed)
if (window.routingControl) {

25
transport_accessibility/pt_map/templates/map.html
View File

@@ -132,6 +132,9 @@
let tripsData = [];
let stopsData = [];
let stopTimesData = [];
// Variable set to true if a new shape is being added.
let addingNewShape = false;
let currentlyAddedPolyline = null;
// Holder of currently inspected shape ID value
let currentShapeIDs = {};
currentShapeIDs["routes"] = [];
@@ -178,12 +181,28 @@
}
function importGTFS() {
stops = JSON.parse('{{ stops|safe }}');
// Import stops
shapes["stops"] = JSON.parse('{{ stops|safe }}');
for (const id in shapes["stops"]) {
//console.log("id: ", id);
let stop_lat = shapes["stops"][id]["stop_lat"];
let stop_lon = shapes["stops"][id]["stop_lon"];
if (stop_lat == undefined || stop_lon == undefined) {
continue;
}
else {
//console.log("stop_lat: ", stop_lat);
//console.log("stop_lon: ", stop_lon);
//console.log(shapes["stops"][stop["stop_id"]]);
addClickablePoint([stop_lat, stop_lon], id);
}
}
routes = JSON.parse('{{ routes|safe }}');
console.log("routes: ", routes);
timetable = JSON.parse('{{ timetable|safe }}');
console.log("timetable: ", timetable);
alert("Import existing GTFS clicked");
// Logic to import existing GTFS would go here
}
</script>
</body>