Create a slippy map "Tests Browser"

[BudgieInWA]

This repo contains an independent test suite that testsRoadNetwork and abstreet's RawMap. Each test case is a real world example with a lot of geographic data.

We should build a slippy map that shows the various formats of data for a test case, layering the .osm with the .geojson and linking the .dot. A simple menu would let you choose a test case to view, and highlight tests that need approving.

It could then be extended to run tests on demand, downloading .osm on the fly.

[BudgieInWA]

osm2lanes probably has exactly the stack that would achieve this. It would also benefit from the same tool. Maybe osm2lanes tests end up here too?

CC @droogmic

[BudgieInWA]

• GeoJSON is built in: https://leafletjs.com/reference.html#geojson
• openstreetmap/leaflet-osm has a straightforward OSM DataLayer
• DOT with something like https://github.com/magjac/d3-graphviz#d3-graphviz ?

[BudgieInWA]

Before calling this issue done, just need to

• present a list of available tests to click on, and
• link from the README

[dabreegster]

Hijacking this slightly to write down some ideas I'm working on implementing. Here are some desired features of the StreetExplorer:

• click a test case and see its 3 renderings / layers quickly
• click a button to reimport a test case's built-in .osm. This makes a convenient dev workflow to work on transformation / importing code and use the browser for interactive debugging.
• for any imported area, see a plain geometric GeoJSON view, or a more detailed rendering with the start of lane/intersection markings
• import a custom area from Overpass, then save it as .osm for a new test case input
• when importing a new area or reimporting an existing one, modify the transformation options. Optionally enable a debug mode, where we get back multiple copies of the StreetNetwork after each transformation step. Be able to browse forwards/backwards through the results as layers.

I'm imagining the UI state is organized around a "current loaded thing." That has a test name, or it's a freshly imported bit. There's a list of leaflet layers associated with it (so we can clean them up when we switch.) Then there are extra UI controls, depending on what's loaded. For a test case, there's a "reimport" button with options for transformation options. For a newly imported bit, there's a button to save the .osm for a new test case.

[BudgieInWA]

I like this direction. Can we pair-program a refactor of the JS into classes that will make this easier? I'll send a calendar invite.

[dabreegster]

I think the app is well-established at this point, and #64 links the readme to it. (Also I registered osm2streets.org pointing here)