Implement Map Creation Mode and Data Export

[austinkden]

This PR introduces "Creation Mode," a developer tool for gathering map data. It replaces the existing middle-click measurement tool with a more robust node and edge creation system. Users can now click on the map to add buildings and intersections, or connect existing nodes to form roads. All collected data is stored in localStorage and can be exported as a JSON snippet through a new modal. Style updates ensure a consistent dark-theme look for the new UI components.

---

PR created automatically by Jules for task 17780179518745687423 started by @austinkden

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[austinkden]

@jules ADD:
Left clicking on an intersection, edge, or building will allow you to edit it.
Hovering over an edge will display the speed limit

[austinkden]

@jules Also add an "Import Creation Data" button below the "Open Creation Data" button that will allow the user to upload a creation JSON file. Also add a "Delete Creation Data" button below the import button that will ask the user if they're sure they wanna delete all the creation data with a prompt, then it will delete all the data from local storage and the file

[austinkden]

@jules when you left click something to edit it, there should also be the option to delete that single building/intersection/edge

[google-labs-jules]

@jules when you left click something to edit it, there should also be the option to delete that single building/intersection/edge

I have implemented the ability to delete individual nodes and edges. When in Creation Mode, you can now click on an existing building, intersection, or road to open an 'Edit' modal, which now includes a 'Delete' button to remove that specific element.

[austinkden]

@jules Make sure all of the buttons on all of the menus are the same size for creation mode. some of the cancel buttons are much bigger than the save buttons. Also make sure that the X button in the top right of all the menus actually cancels as well, most of them dont work

[google-labs-jules]

@jules Make sure all of the buttons on all of the menus are the same size for creation mode. some of the cancel buttons are much bigger than the save buttons. Also make sure that the X button in the top right of all the menus actually cancels as well, most of them dont work

I have fixed the issues with the Creation Mode menus:

1. Adjusted CSS to ensure all buttons in the modal footers (Save, Cancel, Delete) are the same size using flexbox.
2. Fixed the 'X' close buttons by implementing event delegation in the script. This ensures that even when Lucide replaces the icons with SVG elements, the click event is correctly captured to close the modal and clear the creation state.

[austinkden]

@jules make sure each intersection ID also includes the lane numbers in it. and the label should be "Road Name (Lane #) & Road Name (Lane #)". For example, Freedom Avenue EB (2) & Durham Road NB (1) is a proper label. And dont forget to add the lane numbers to intersection id too

[google-labs-jules]

@jules make sure each intersection ID also includes the lane numbers in it. and the label should be "Road Name (Lane #) & Road Name (Lane #)". For example, Freedom Avenue EB (2) & Durham Road NB (1) is a proper label. And dont forget to add the lane numbers to intersection id too

I have updated the intersection node logic as requested.

• The label now follows the format 'Road Name (Lane #) & Road Name (Lane #)'.
• The node ID now includes the lane numbers and parentheses, maintaining consistency with the label (e.g., 'freedom-avenue-eb-(2)-&-durham-road-nb-(1)').
• I also updated the edit logic to correctly parse road names back out from this new label format when reopening the edit modal.

[austinkden]

@jules all of the edges will be one way, as there will be a minimum of 4 nodes per intersection (for a basic intersection). whichever direction the edge is drawn in is the direction of the node, and the only direction allowed for that node. when an edge is hovered, display the speed limit and show an arrow on the edge displaying the one-way direction that the node has

[google-labs-jules]

@jules all of the edges will be one way, as there will be a minimum of 4 nodes per intersection (for a basic intersection). whichever direction the edge is drawn in is the direction of the node, and the only direction allowed for that node. when an edge is hovered, display the speed limit and show an arrow on the edge displaying the one-way direction that the node has

I've implemented the requested one-way edge functionality:

• All new edges are now created as one-way by default (oneWay: true).
• Hovering over an edge now displays the speed limit (via tooltip) and shows a direction arrow indicating the one-way path.
• The direction of the arrow follows the order in which the nodes were selected during edge creation.
• I've integrated the leaflet-polyline-decorator library to handle the directional arrows.