MapComplete: OpenStreetMap viewer and editor

It shows map featu­res on a certain topic, and allows to see, edit and add new featu­res to the map. It can be seen as a webver­sion cros­so­ver of Stre­et­Com­plete and MapCon­trib. It tries to be just as easy to use as Stre­et­Com­plete, but it allows to focus on one single theme per instance (e.g. nature, bicy­cle infras­truc­ture, …)

The design goals of MapCom­plete are to be:

• Easy to use, both on web and on mobile
• Easy to deploy (by not having a backend)
• Easy to set up a custom theme
• Easy to fall down the rabbit hole of OSM

The basic func­ti­o­na­lity is to down­load some map featu­res from Over­pass and then ask certain ques­ti­ons. An answer is sent back to directly to OpenS­tre­et­Map.

Further­more, it shows images present in the image tag or, if a wiki­data or wiki­me­dia_commons-tag is present, it follows those to get these images too.

An expli­cit non-goal of MapCom­plete is to modify geome­tries of ways, espe­ci­ally gene­ric geometry-editing. (Split­ting roads is possi­ble and in some restric­ted themes is geometry-confla­tion possi­ble too)

More about MapCom­plete: Watch Pieter’s talk on the 2021 State Of The Map Confe­rence (YouTube) about the history, vision and future of MapCom­plete.

Crea­ting your own theme

It is possi­ble to quickly make and distri­bute your own theme

• please read the docu­men­ta­tion on how to do this.

Exam­ples

• An over­view of all offi­cial themes.
• Buurt­na­tuur.be, deve­lo­ped for the Belgian Green party. They also funded the initial deve­lop­ment!
• Cyclo­fix, further deve­lop­ment on Open Summer of Code funded by Brus­sels Mobi­lity. Landing page at https://cyclo­fix.osm.be/
• Book­ca­ses cause I like to collect them.
• Map of Maps, after a tweet

There are plenty more. Disco­ver them in the app.

Statis­tics

To see statis­tics, consult OsmCha or the analy­tics page

User jour­ney

MapCom­plete is set up to lure people into OpenS­tre­et­Map and to teach them while they are on the go, step by step.

A typi­cal user jour­ney would be:

0. Oh, this is a cool map of my speci­fic inter­est! There is a lot of data alre­ady…

   • The user might disco­ver the expla­na­tion about OSM in the second tab
   • The user might share the map and/or embed it in the third tab
   • The user might disco­ver the other themes in the last tab

1. The user clicks that big temp­ting button 'login’ in order to answer ques­ti­ons – there’s enough of these login buttons… The user crea­tes an account.

2. The user answers a ques­tion! Hooray! The user trans­for­med into a contri­bu­tor now.

   • When at least one ques­tion is answe­red (aka: having one chan­ge­set on OSM), adding a new point is unloc­ked

3. The user adds a new POI somew­here

   • Note that all messa­ges must be read before being able to add a point.
   • In other words, sending a message to a misbe­ha­ving MapCom­plete user acts as having a zero-day-block. This is added deli­be­ra­tely to make sure new users have to read feed­back from the commu­nity.

4. At 50 chan­ge­sets, the perso­nal layout is adver­ti­sed. The perso­nal theme is a theme where contri­bu­tors can pick layers from all the offi­cial themes. Note that the perso­nal theme is always avai­la­ble.

5. At 200 chan­ge­sets, the tags become visi­ble when answe­ring ques­ti­ons and when adding a new point from a preset. This is to give more control to power users and to teach new users the tagging scheme

6. At 250 chan­ge­sets, the tags get linked to the wiki

7. At 500 chan­ge­sets, I expect contri­bu­tors to be power users and to be comfor­ta­ble with tagging scheme and such. The custom theme gene­ra­tor is unloc­ked.

License

GPLv3.0 + recom­men­ded ping­back.

I love it to see where the project ends up. You are free to reuse the soft­ware (under GPL) but, when you have made your own change and are using it, I would like to know about it. Drop me a line, give a ping­back in the issues, …

Dev

To deve­lop or deploy a version of MapCom­plete, have a look to the guide.

Trans­la­ting MapCom­plete

The core strings and buil­tin themes of MapCom­plete are trans­la­ted on Hosted Weblate. You can easily make an account and start trans­la­ting in their web-envi­ron­ment – no insta­lla­tion requi­red.

You can even jump to the right trans­la­tion string directly from MapCom­plete:

Archi­tec­ture

High-level over­view

The website is purely static. This means that there is no data­base here, nor one is needed as all the data is kept in OpenS­tre­et­Map, Wiki­me­dia (for images), Imgur. Settings are saved in the prefe­ren­ces-space of the OSM-website, amen­ded by some local-storage if the user is not logged-in.

When viewing, the data is loaded from over­pass. The data is then conver­ted (in the brow­ser) to geoj­son, which is rende­red by Leaflet.

When a map feature is clic­ked, a popup shows the infor­ma­tion, images and ques­ti­ons that are rele­vant for that object. The answers given by the user are sent (after a few seconds) to OpenS­tre­et­Map directly – if the user is logged in. If not logged in, the user is promp­ted to do so.

The UI-event-source is a class where the entire system is built upon, it acts as an obser­va­ble object: anot­her object can regis­ter for chan­ges to update when needed.

Sear­ching images

Images are fetched from:

• The OSM image, image:0, image:1, … tags
• The OSM wiki­me­dia_commons tags
• If wiki­data is present, the wiki­data P18 (image) claim and, if a commons link is present, the commons images

Uplo­a­ding images

Images are uplo­a­ded to Imgur, as their API was way easier to handle. The URL is writ­ten into the chan­ges.

The idea is that once in a while, the images are trans­fer­red to wiki­pe­dia or that we hook up wiki­me­dia directly (but I need some help in getting their API working).

Uplo­a­ding chan­ges

In order to avoid lots of small chan­ge­sets, a chan­ge­set is opened and kept open. The chan­ge­set number is saved into the users prefe­ren­ces on OSM.

Whene­ver a change is made -even adding a single tag – the change is uplo­a­ded into this chan­ge­set. If that fails, the chan­ge­set is probably closed and we open a new chan­ge­set.

Note that chan­ge­sets are closed auto­ma­ti­cally after one hour of inac­ti­vity, so we don’t have to worry about closing them.

Docu­men­ta­tion

All docu­men­ta­tion can be found in here

Privacy

Privacy is impor­tant, we try to leak as little infor­ma­tion as possi­ble. All major perso­nal infor­ma­tion is hand­led by OSM. Geolo­ca­tion is avai­la­ble on mobile only through the devi­ce’s GPS loca­tion (so no geolo­ca­tion is sent of to Google).

TODO: erase cookies of third party websi­tes and API’s

Attri­bu­tion and Copy­right

The code is avai­la­ble under GPL; all map data comes from OpenS­tre­et­Map (both fore­ground and back­ground maps).

Back­ground layer selec­tion: cura­ted by https://github.com/osmlab/editor-layer-index

Icons are attri­bu­ted in vari­ous 'license_info.json’-files and can be found in the app.