streetmix / streetmix

Streetmix makes it easy for people to design public spaces together.

Streetmix is a collaborative process for communities and city planners to improve public spaces.
Design, remix, and share your neighborhood street at streetmix.net.

👫 🌴 🚘 🚍 🌴 💃

Join our community on Discord!

We welcome contributions!
Please see our contributor guidelines.

---

About

What are street sections?

A "section" is shortened way of saying "cross-section view", a type of 2D non-perspectival drawing commonly used in engineering and architecture to show what something looks like when you take a slice of it and look at it head-on. Similarly, a street section is a cross section view of a street, showing the widths and placement of vehicle lanes, bike lanes, sidewalks, trees, street furniture or accessories (like benches or street lamps), as well as engineering information like how the road is sloped to facilitate drainage, or the locations of underground utilities. Although sections can be simplified line drawings, urban designers and landscape architects have created very colorful illustrative street sections, removing most of the engineering particulars to communicate how a street could be designed to feel safe, walkable or habitable.

Why does Streetmix exist?

When city planners seek input from community meetings from the public on streetscape improvements, one common engagement activity is to create paper cut-outs depicting different street components (like bike lanes, sidewalks, trees, and so on) and allow attendees to reassemble them into their desired streetscape. Planners and city officials can then take this feedback to determine a course of action for future plans. By creating an web-based version of this activity, planners can reach a wider audience than they could at meetings alone, and allow community members to share and remix each other's creations.

The goal is to promote two-way communication between planners and the public, as well. Streetmix intends to communicate not just feedback to planners but also information and consequences of actions to the users that are creating streets. Kind of like SimCity did with its in-game advisors!

Streetmix can be used as a tool to promote and engage citizens around streetscape and placemaking issues, such as Complete Streets or the Project for Public Spaces' Rightsizing Streets Guide.

Why the name "Streetmix"?

"Streets" + "remix" :-)

How did this project start?

Streetmix started as a Code for America hackathon project in January 2013, inspired by community meetings like the one described above.

How do I install / set up Streetmix myself?

Streetmix is a Node.js based project. Set up your own by following these instructions!

Sponsors

Copyright

Copyright (c) 2013-2018 Code for America and contributors.
Copyright (c) 2019-2024 Streetmix LLC.
See LICENSE for details.

Streetmix is maintained by Bad Idea Factory with the support of many contributors.

streetmix's Issues

Don’t allow to select things in the toolbox/footer.

Love it! Some general thoughts

Allow the section to 'shrink' in scale to preserve the total section width as each new element is added and/or allow the user to pan or zoom in/out to see the full section or close-ups of various elements. The pan zone could be in the clouds above the elements and you could limit zooming to plus/minus buttons.

Include a "Total Right-of-Way" measurement below the entire section that adjusts to added/removed elements.

Similarly, include the ability to add a static "Existing Right-of-Way" measurement either above or below the adjustable total to see how much more/less a proposed section varies from what might actually be there today.

Allow the building heights to grow/shrink based on an entry of number of stories and/or number of feet for real context to adjacent zoning height limits.

Allow customization of the widths of each element: say a local jurisdiction allows 11-foot drive lanes and 4-foot bike lanes. Of course, the possibilities are endless, but it would be amazing if they could be customized by the user.

Additional elements could include one-way and two-way buffered cycle tracks, light rail/streetcar lanes and a sidewalk seating zone

App should have touch UI

With all this clicking and dragging, a touch-based UI feels pretty natural. Wouldn't it be cool to hand out iPads at community design meetings instead of paper cutouts?

Support for elements larger than the canvas (e.g. tree sticking out).

Add proper horizontal resizing so that the site fits in every browser.

Import (“OCR”) a street into Streetmix from a map.

The user should be able to navigate to a street they are thinking about via a Google Maps API and use the measure tool to generate the existing roadway width. If possible nearby buildings could be imported from Google Earth to give a site specific context/feel.

Tthis could be used to create print out results with street name and roadway width below the proposed design.

Better animations when deleting/dropping/moving around.

Better keyboard UI.

Esc to cancel drag, consider arrow keys and modifier keys… Not a priority, but would be good.

Graphic themes

Alternative graphics/themes should be available. Pixel art, anyone?

Cross-slope/cant: convexity for drainage

Streets curve for drainage (called cant - I used to think it was called camber).
http://en.wikipedia.org/wiki/Cant_(road/rail)#Roads
http://en.wikipedia.org/wiki/Geometric_design_of_roads#Cross_slope

I think this would be a pain in the ass to do realtime, but perhaps there could be an export option with a modal dialog in which you can choose this option. The road surface cross slope is commonly 1-2%.

Note that planting strips and sidewalks would have their own gutters, and so might terminate a convex curve. e.g. a boulevard with a planting strip in the middle might have two curved streets each side; or it might have one big curve sidewalk to sidewalk.

Add more information about the segment as you select/drag it.

E.g. explanation of what it is, considerations, etc.

Add some thoughtful hover states.

We don’t want to rely on them since we want the app to be touch-friendly – but we should support them on mouse-driven computers.

Add a “total right of way” measurement.

Streets should be shareable

Users should be able to share with one click to:

• Twitter
• Facebook
• Email
• Image file (png?)

Toggle Imperial feet / metric metres

For your friends north of the 49th.

Our dimensions tend to increment in tenths of meters (10cm), if you're making segments width-flexy.

Streets should be persistable

Once users create a street they like, they should be able to share them through a persistent link.

Segment types should have info

Each segment (road, bike lane, sidewalk, etc.) should have background information available, since most users won't have experience in urban design.

Add ambient animations.

E.g.
· sky changing colour
· clouds moving around
· birds flying
· cars spewing (procedurally generated) smoke

Add better initial loading experience.

Better animation for changing the width of the street.

Remove wonkiness when dragging within an adaptive street.

Implement horizontal scrolling if necessary in the toolbox.

Streets should be forkable/remixable

If a street is created and saved by one user, another user should be able to "fork" the street and "remix" or change the street themselves. There should be links between the original and remixed streets. (This would be similar to forks on gist or GitHub)

Add support for streets of different widths.

Presets (perhaps named after popular streets in S.F. or N.Y.C.?) and custom value as well.

Add a confirmation bar.

For transient error messages (e.g. “you can’t drop this because there is no room”), confirmations, etc.

Add more segment types

Brainstormed in this google doc

Analyze current street to show preferred transit modes

Given a street, the app should give the user insight into the street they have created. It is optimized for cars, transit, bikes, or pedestrians? Why? This would be a great opportunity to educate users about the tradeoffs in street planning.

Add vertical scrollbar if the browser window is not tall enough.

Add a disclaimer/info bubble.

Similar to what you see here when you visit for the first time:
http://cfa-louisville.herokuapp.com/neighborhood-crime-data/

Segments should have recommended sizes

Users should be warned if they add segments outside of expected tolerances. For example, adding a bike lane only 2 ft wide should explain why that is probably too small. Or, adding a 12 ft car lane could warn the user that it may cause very high speed traffic.

Don’t allow to drop an item if it exceeds the width of the street.

Set up a more proper deployment routine?

· staging server
· compiling JS
· compiling CSS
· compacting PNGs

&c.

Coloured cycle paths

Amsterdam has terracotta red. Copenhagen has bright blue. Vancouver has lurid green.

Provide information about the cost of the current street.

Not sure how to measure it, but this idea keeps coming back.

Users should be able to comment on streets

If viewing a persisted/saved street, users should be able to comment on them.

Add a way to save as a screenshot.

Request from one of the users: “It would be an easy way to include the results of your tool into a report.”

The way this could be done would be to create an off-screen Canvas element, draw on it, make a PNG from the pixels, and then trigger a download dialog using some of the newfangled HTML5 features. This could be pretty smooth.

(We might actually at some point need to switch to drawing to Canvas anyway, so that’ll make it even easier.)

A nicer visual summarizing width totals, etc.

Add Google Analytics to github pages deployment

Add a “quick feedback” form.

Add a toggle to reset the street to default?

Drawings should be to scale

i.e. busses shouldn't be bigger than buildings!

Facilitate user/municipality communication

Something like: "Want more bike lanes on your street? Contact your city's planning commission here!"

Three segment heights for sidewalks and cycle paths

High, medium and low. (Perhaps 6, 3 and 0 inches above the roadway: I don't know what the curbing standard is, but that feels about right.)

Sidewalks should be higher than the road (unless they're part of shared space). They might be at high or medium.

Cycle paths might be at high sidewalk height, low car-height or intermediate height, medium between the two.

This might be most easily implemented by simply adding new segments (high sidewalk, intermediate sidewalk, etc.)

Add a favicon.

Should be able to change building type/height

Dragging up issue.

For some elements on the right (but not too far), dragging up and then dropping – it hides as if it’s destroyed, but shows.

Show Plan perspective

Currently, we're showing just the section view of streets.

We could also show a top-down ("plan") perspective.

Segments should be resizable

Users should be able to designate the width of each segment (i.e. 10-foot street, 6-ft bike lane).

Add some heuristics to “judge” your street as you’re playing with it.

E.g. you get a better score if your street is more walkable/bikeable?

Please add ideas here.

Add some prompts/instructions when you start building for the first time.