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

[tordans]

Right now, the webviewer allows to see the city center http://play.abstreet.org/0.2.61/osm_viewer.html?system/de/berlin/maps/center.bin&--cam=14.94/52.50353/13.40353

It would be great to be able to compare the the AB Street Rendering with the Map Supaplex030 made for Berlin-Neukölln, which is about this area [[52.4557, 13.3985], [52.5005, 13.4863]].

It would allow to easily see which tagging is visualized differently with the two viewers.

---

Follow up question: Would you be interested in collecting possible issues here in a collective issue?

---

Follow up question, out of curiosity: Would it be possible to create a map viewer that shows both maps side by side and moves them at the same time (Example)? From a quick look at the source, it does not look like OSMViewer can be controlled from the outside (set center, onmoveend-callback and such).

[dabreegster]

about this area [[52.4557, 13.3985], [52.5005, 13.4863]].

I've imported this and I'll post web links in a few hours when the new release is done. It's a large 64MB map. I guessed at the boundaries because geojson.io doesn't seem to have an easy way to just type in that bbox. If you draw a more specific boundary, it's easier for me to swap it out.

Would it be possible to create a map viewer that shows both maps side by side and moves them at the same time

Not today. The web version assumes it occupies the entire web page. We could make it much more flexible and give it a proper API for controlling the camera both directions. I'm interested in experimenting with the story map format, where you scroll a webpage and reveal different layers / areas on a map. I'll eventually go this direction, but it could take a while. If you have more JS/web experience and are interested in helping here, probably a good first test case could be this synchronized canvas.

Would you be interested in collecting possible issues here in a collective issue?

Yes! Off-hand, two ideas for possible collaborations:

• The color scheme in Supaplex's map is fantastic; the textured grass and representation of pedestrian paths has gotten even better since I looked last time. We could try adapting some of these ideas.
• The tagging in the area is very rich: https://www.openstreetmap.org/way/28496023. A/B Street can represent exact lane widths now; it'd be cool to add support for things like cycleway:right:buffer:right = 0.6. The code that transforms OSM tags into a left-to-right description of lanes is very self-contained, and I think there are potentially other pieces of software that could benefit from figuring out all of the lanes. OSM Derived Shared-ROW Data d-wasserman/shared-row#11 (comment) is an idea to share some kind of common library, or at least a set of test cases.

[dabreegster]

Here we go: http://play.abstreet.org/0.2.62/abstreet.html?--ungap&system/de/berlin/maps/neukolln.bin
That's in a new tool we just launched (bike.abstreet.org). Just the OSM viewer: http://play.abstreet.org/0.2.62/osm_viewer.html?system/de/berlin/maps/neukolln.bin

[tordans]

Thanks a lot!

Would it be possible to create a map viewer that shows both maps side by side and moves them at the same time

Not today. The web version assumes it occupies the entire web page. …

I went ahead and tried it anyways ;-) https://supaplexosm.github.io/strassenraumkarte-neukoelln/ab-street-compare.html#18/52.48150/13.43571 — Even without syncing the maps, having them side by side would be great. However, there is a CORS issue, which I don't know enough about to really know if it is easy to fix.
For now, I will just have two browser windows side by side :-).

[dabreegster]

there is a CORS issue

Hmm, play.abstreet.org is a CloudFront CDN layer, and probably CORS is configured there. You could also try the S3 bucket directly, which I think happily serves files to anywhere: http://abstreet.s3-website.us-east-2.amazonaws.com/0.2.62/

A much heavier approach is to build the web version and grab the Berlin map yourself, and host locally on your server. https://github.com/a-b-street/abstreet/blob/master/release/deploy_actdev.sh is an example of creating a standalone deployment for lots of UK maps. But I wouldn't recommend this just to quickly prototype. Let me know if the S3 doesn't work.

[tordans]

Thanks! Unfortunately, now there is a httpS issue: https://abstreet.s3-website.us-east-2.amazonaws.com/0.2.62/osm_viewer/osm_viewer.bundle.js does not load. And the jekyll page does not allow for https-http mix. — Well, it was worth a try, thank for the help.

[dabreegster]

#788 might help. It lets you add A/B Street rendering on top of a regular Mapbox GL map. I haven't figured out an easy deployment story yet, and you'd likely still hit the CORS or HTTPS issues.

Edit: You could host the static files yourself to avoid problems. Grab https://www.dropbox.com/s/85ibgoa5942m71a/mapbox_demo.zip?dl=0. If you run the python script to serve locally, then http://localhost:8000/?map=data/system/de/berlin/maps/neukolln.bin#17.96/52.480413/13.446856 should work. It takes a while to initially setup, because it first fetches and parses the 68MB file of Neukolln