OpenStreetMap logo OpenStreetMap

If you’ve ever wanted to help build the OpenStreetMap website but found our codebase intimidating, you’re in luck. With the recent addition of Jamie Alessio’s Docker support in pull request #2409, it’s now easier to contribute well-tested changes to the OSM site. I’ve never been comfortable with Rails, Chef, or other Ruby code like the kind we use to build OSM.org. Many helpful changes to the site can be made with small front-end tweaks in just HTML or CSS. The new support for Docker provides a quick way to install a working version of the OSM site on your local computer and preview changes before you contribute.

Here’s a recent change I made to implement Andy Allan’s suggestion for improved inbox/outbox navigation, using Bootstrap navigation tabs in place of plain links. This small design tweak is now live on OSM.org My Messages:

new Inbox image

Contrast this with the old look, with simple HTML links in the page header that don’t quite look like usable navigation:

old Inbox image

This change took just a few minutes, but I would not have been able to test and contribute without a way to easily run OSM.org locally.

Follow Along

Follow the directions in DOCKER.md to set up a running local version of OSM.org on your computer. It takes about 5-10min to get everything working on my Macbook Pro laptop. When you’re done you can navigate to http://0.0.0.0:3000 to see your local version running (give it about 30 seconds on first load; Rails seems to require some boot time to be ready).

To test features that require a logged-in user, navigate to http://0.0.0.0:3000/user/new and create your account:

New account page

The next screen mentions a confirmation email, which you will not receive because you don’t have email configured. Fortunately, there’s a workaround:

Confirmation email

The link that would be in the email is also printed to your docker-compose logs -f terminal output. Copy the part starting with “/user” after “openstreetmap.example.com”, add it after “http://0.0.0.0:3000” in your browser, and you’ll have a working user account:

Terminal log

That’s it! When you submit your contribution as a pull request, you can include screen shots showing the results of your work so it’s easier for community members and site maintainers to understand your proposal. A full code test suite will be run automatically as you update Github with your changes, so you’ll know ahead of time if your changes are safe.

Location: Downtown, Downtown Oakland, Oakland, Alameda County, California, 94612, United States
Email icon Bluesky Icon Facebook Icon LinkedIn Icon Mastodon Icon Telegram Icon X Icon

Discussion

Comment from benoitdd on 22 March 2021 at 11:25

Looks nice and much more user friendly!

There is probably a bug in the localisation (my settings are in french, I don’t know if it happens for other non-english languages):

  • When in osm.org/messages/inbox the two buttons are labelled “Ma boîte de réception” and “My Outbox”
  • When in osm.org/messages/outbox the are labelled “My Inbox” and “My Outbox”
  • In both cases they should be “Ma boîte de réception” and “Ma boîte d’envoi”

Comment from Richard on 22 March 2021 at 13:04

That’s outstanding. 🎉

Comment from benoitdd on 23 March 2021 at 10:24

@mmd: good news, I didn’t realize it wasn’t translated before and thought it was because of the change @migurski made that something bugged. sorry that I raised a non-existent problem.

Comment from mmd on 23 March 2021 at 10:33

In fact, Michal introduced a few new text labels in English. As always, those labels need to be translated to different languages in a separate step, which happens in an external application “transifex”. This might take a bit, depending on how fast translators complete their work on new text labels. As long as the translated texts are not yet available, you will see the English text instead.

Comment from mmd on 23 March 2021 at 10:35

(translation tool should be translatewiki.net rather than transifex)

Comment from migurski on 23 March 2021 at 15:28

Thanks for the explanation @mmd. I learned from the site maintainers that contributors to the site codebase should touch only the English translation, with Translatewiki contributors picking up the other supported languages:

https://github.com/openstreetmap/openstreetmap-website/pull/2740

Log in to leave a comment