Render A/B Street's lanes and traffic simulation on top of Mapbox GL #788

dabreegster · 2021-10-25T06:00:23Z

See piggyback/README.md for an overview and goals. Demo:

Main open question

I am totally overwhelmed by the web dev ecosystem. I found a nice plugin to switch Mapbox styles (https://github.com/el/style-switcher), but for the life of me, I can't figure out the "right" way to include it as a dependency.

I tried adding a <script> pointing to a copy on cdnjs, but hit problems where the .js didn't seem to export any symbols. This isn't a "hermetic" way of depending on it anyway; what if that CDN disappears?
I started an NPM package and switched to using Mapbox and this plugin as dependencies. Except... I can't seem to find anywhere that describes how to actually use all of the JS dependencies in the .html. I think the answer is to use webpack, browserify, gulp, or something else to consolidate into one minified .js file. But I lack the context to decide the most reasonable way to wire this all up, and I'm having trouble finding an authoritative-sounding voice on which framework or ecosystem to buy into.

Some next steps

If the long-term intention of this demo is just to render roads and intersections and let Mapbox handle buildings and other stuff, we could get some dramatic speedups in DrawMap by excluding most objects. I don't want to add a bunch of branching logic there, though. Ideally the huge World refactor could make it easy for us to express that we just want a few "layers" from the A/B Street side.
We're in JS land now, so maybe there's some nice easy way to add a progress bar around things like loading the map file?
Figure out a deployment story and publish an initial version of this WASM package on NPM or something else. I want people to be encouraged to build web apps that use bits and pieces of A/B Street, and based on feedback, expand what's in the PiggybackDemo API.

right places...

dodging that

(I think parking lot rendering was trying to read an SVG before I wired that up)

…plugin to work

This reverts commit 9822996.

dabreegster

Hopefully needless to say, just view the full diff, not each commit. Unless you want to watch me really flailing around in the beginning...

dabreegster · 2021-10-25T06:01:35Z

map_gui/src/render/agents.rs

@@ -87,9 +87,11 @@ impl AgentCache {
    pub fn calculate_unzoomed_agents<P: AsRef<Prerender>>(
        &mut self,
        prerender: &mut P,
-        app: &dyn AppLike,


Split up the arguments here to avoid borrow checker annoyingness in the new piggyback crate

dabreegster · 2021-10-25T06:02:31Z

piggyback/README.md

+directory to contain some maps.
+
+Quick development:
+`wasm-pack build --dev --target web -- --features wasm && ./serve_locally.py`


In my branch where I switched to npm, the python script gets replaced with https://www.npmjs.com/package/http-server

dabreegster · 2021-10-25T06:03:49Z

piggyback/index.html

+				`;
+			}
+
+			var lastTime = performance.now();


This is all so unorganized and weird. I'm not used to the typical ways of organizing state like this. Advice / good example projects welcome.

dabreegster · 2021-10-25T06:04:21Z

piggyback/index.html

+
+			traffic_controls_inactive();
+
+			// Let the onclick handlers reach into this scope. Alternatively, grab the buttons here and set onclick handlers.


Here's an example where I'm not sure what the best practice is. Should we just define the bare buttons in HTML, grab the by ID here, and install the onclick?

dabreegster · 2021-10-25T06:05:23Z

piggyback/src/lib.rs

+#[cfg(target_arch = "wasm32")]
+pub use piggyback::*;
+
+#[cfg(not(target_arch = "wasm32"))]


I want to just mark the entire piggyback crate as wasm-only and get rid of the feature flags and everything. But there doesn't seem to be a way to encode that in Cargo.toml. So then if you're building stuff for native and you run cargo check in the workspace, it tries to build things here and blows up.

dabreegster · 2021-10-25T06:06:26Z

piggyback/src/piggyback.rs

+        }
+        None
+    }
+}


The idea is that we could add much, much more to the API. In the extreme case, open up all of Map and Sim. But those public APIs are currently a mess. Based on what we want to make out of this, we could be much more targeted and/or clean up internal APIs as we go.

dabreegster · 2021-10-25T06:07:02Z

widgetry/src/backend_glow.rs

@@ -260,7 +260,7 @@ type WindowAdapter = crate::backend_glow_native::WindowAdapter;

 pub struct PrerenderInnards {
    gl: Rc<glow::Context>,
-    window_adapter: WindowAdapter,
+    window_adapter: Option<WindowAdapter>,


In piggyback mode, there's no window (that widgetry manages). Doesn't affect existing code.

dabreegster · 2021-10-25T06:07:40Z

widgetry/src/backend_glow_wasm.rs

        })
        .unwrap();

-    debug!("built WebGL context");
-
-    fn webgl2_program_context(


I split up these methods into getting the context, then building the shaders for each webgl version

dabreegster · 2021-10-25T06:08:06Z

widgetry/src/backend_glow_wasm.rs

+            webgl1_program(glow::Context::from_webgl1_context(raw_gl), &mut timer).unwrap();
+        let prerender_innards = PrerenderInnards::new(gl, program, None);
+
+        let style = Style::light_bg();


We could certainly be more configurable here

ilyabo · 2021-10-25T17:00:52Z

I think the answer is to use webpack, browserify, gulp, or something else to consolidate into one minified .js

If you want to avoid the pain of configuring webpack etc, I'd recommend going with either Create React App or the more advanced Next.js. React is likely the most popular JS UI library nowadays, but even if you don't use React these frameworks can help to bootstrap a JS app with all the tools for dependency management and building and save a lot of time on the configuration. If you are interested, maybe I could help you with that.

We're in JS land now, so maybe there's some nice easy way to add a progress bar around things like loading the map file?

There are dozens of React UI kits out there now. My personal favorite is Chakra. Here you can find progress bars: https://chakra-ui.com/docs/feedback/progress

dabreegster · 2021-10-25T23:34:27Z

If you want to avoid the pain of configuring webpack etc, I'd recommend going with either Create React App or the more advanced Next.js.

Thank you for the pointers! I might dive into these options myself, but more than likely, hand it off to somebody else starting out on the project and more familiar with web dev. I think for existing as example code, a "vanilla JS" mapbox example without any frameworks could be useful. But I'd also like to see a variation using React and other things. My goals with this were partly to learn a bit of mapbox myself, but also to start fostering more of an ecosystem where people can play around with gluing abst to "normal" web apps.

(And for my own learning, I think I'll try out create-react-app but dig into the config it autogenerates, because I want to understand a bit of how bundling works in practice.)

dabreegster · 2021-10-26T02:40:57Z

I temporarily deployed the demo to http://abstreet.s3-website.us-east-2.amazonaws.com/dev/mapbox_demo/index.html
The static files are also at https://www.dropbox.com/s/85ibgoa5942m71a/mapbox_demo.zip?dl=0

dabreegster · 2021-10-31T20:52:46Z

Going to merge this now. Deployment is still messy and manual, but it's at least a start.

dabreegster added 23 commits October 24, 2021 20:53

Just squish mapbox and widgetry into one page, in separate divs

a1adecd

Make a custom mapbox layer and get the rust/js things called in the

cdc6c2a

right places...

Actually set up the gl context

bdce9ad

Get something drawing, finally. It's just a red rectangle, but hey!

3eb5af0

Move over to a new crate

94d34f0

Get a map file loaded...

6b52406

Create a DrawMap. Seemingly parking lots are crashing, so temporarily

2dc2296

dodging that

So can we draw now? Yes.

1a2fde6

Match the canvas with mapbox

85eda02

Only draw zoomed-in roads

120bbea

Undo DrawMap hacks, now that I have stack traces

2cff87e

(I think parking lot rendering was trying to read an SVG before I wired that up)

Click an object, popup some JSON about it

089e760

Switch to npm, use a more canonical http dev server

00ade5f

Sync camera position with URL

53e820b

Load different maps by URL

91a2cb6

Switch to satellite by default, since I can't get the style switcher …

86a7b83

…plugin to work

Stub out control for traffic sim

b194400

Wire up the traffic sim

3eafab6

Fix build errors in native

a2a5f3f

Revert "Switch to npm, use a more canonical http dev server"

54f0296

This reverts commit 9822996.

Rename the crate. It's not really tied to mapbox at all.

7509104

Slightly adjust page size

b49e1dd

Filling out docs

cc3af7e

dabreegster commented Oct 25, 2021

View reviewed changes

dabreegster requested a review from michaelkirk October 25, 2021 06:08

This was referenced Oct 25, 2021

Increase area of abstreet webviewer for Berlin to include Neukölln #777

Open

Export map renderings to Leaflet #440

Closed

Deploy the demo somewhere (and be able to make .zips easily)

b8dedba

dabreegster merged commit 00df96f into master Oct 31, 2021

dabreegster deleted the mapbox branch October 31, 2021 20:53

natesheehan mentioned this pull request Nov 21, 2021

Redesign front page and user-facing website a-b-street/docs#25

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Render A/B Street's lanes and traffic simulation on top of Mapbox GL #788

Render A/B Street's lanes and traffic simulation on top of Mapbox GL #788

dabreegster commented Oct 25, 2021

dabreegster left a comment

dabreegster Oct 25, 2021

dabreegster Oct 25, 2021

dabreegster Oct 25, 2021

dabreegster Oct 25, 2021

dabreegster Oct 25, 2021

dabreegster Oct 25, 2021

dabreegster Oct 25, 2021

dabreegster Oct 25, 2021

dabreegster Oct 25, 2021

ilyabo commented Oct 25, 2021

dabreegster commented Oct 25, 2021

dabreegster commented Oct 26, 2021

dabreegster commented Oct 31, 2021


		traffic_controls_inactive();

		// Let the onclick handlers reach into this scope. Alternatively, grab the buttons here and set onclick handlers.

Render A/B Street's lanes and traffic simulation on top of Mapbox GL #788

Render A/B Street's lanes and traffic simulation on top of Mapbox GL #788

Conversation

dabreegster commented Oct 25, 2021

Main open question

Some next steps

dabreegster left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ilyabo commented Oct 25, 2021

dabreegster commented Oct 25, 2021

dabreegster commented Oct 26, 2021

dabreegster commented Oct 31, 2021