CicloMapa

An open platform to democratize access to bike maps of brazilian cities, combining the collaborative power of OpenStreetMap with web technologies and easy-to-use design.

Today in Brazil we face a big challenge of not having data on the cycling infrastructure available in our cities. This makes it very hard to paint a clear picture of our reality and calculate the relevant metrics to measure the opportunities and impacts to society of improving urban mobility. The most common problems are data not being standardized, making it hard to compare between localities, data not being available publicly or sometimes it not existing at all.

UCB (Brazil Cyclists Union) and ITDP (Transport and Development Policy Institute) are two civil society organizations that have joined forces to solve once and for all the problem of access to data on Brazil's cycling infrastructure.

We've developed the first cycling maps platform encompassing all Brazilian cities, leveraging the data and collaborativity of OpenStreetMap (OSM), the biggest initiative of this kind. We've created an open-source web application, free and accessible from any computer or smartphone, aimed at both the average citizen who wants to know more about their city, and researchers, who will have easy access to data without needing OSM knowledge.

📕 Full case study

🎓 UCB website with more useful links and tutorials on OSM

Main features

• Easily visualize the different kinds of cycling structure of any brazilian city. We simplified all the technical details of OSM so everyone can understand it.
• Learn about what are the main types of cycling structures you can find around. Semantic colors help you remember that some are better than others.
• Download the GeoJSON data with a single button click so you can import in your favorite GIS application and power up your research analysis.
• Found something wrong? A direct link will take you to the OSM web editor so you can fix it and contribute.

Architecture

The basic premise is that the OSM Overpass API is very slow and we couldn't hit it directly without damaging a lot the user experience. However, differently than other similar projects, we didn't want to have data stuck in time, since we want contributors to be continually improving the data.

We store a mirror of the OSM data in a Firebase Database. Any user (possibly an OSM contributor) can manually update this data, which will automatically update the Database.

Getting started

Requirements: Node 22.x (see engines in package.json).

This project was bootstrapped with Create React App, so if you're familiar with the tool you already know all these commands.

Environment variables

Create a .env file in the project root (or set these in your environment) for the app to work fully:

• REACT_APP_MAPBOX_ACCESS_TOKEN — Mapbox map tiles and geocoding
• REACT_APP_OPENROUTESERVICE_API_KEY — Route calculations (OpenRouteService)
• REACT_APP_GOOGLE_PLACES_API_KEY — Place autocomplete in the directions panel (optional)

To clone the repository and install everything:

git clone git@github.com:cmdalbem/ciclomapa.git
cd ciclomapa
yarn install

Using

To start the local server:

yarn start

To deploy to production server:

yarn run deploy

Contributing

We're using GitHub Issues for our backlog. Feel free to take a look around and choose the task you want. Use the tags at your advantage:

• complexity tags tell you how difficult a task probably is.
• good first issue is the perfect place to start if you're new to the project, or to coding itself.
• help wanted are issues where external help is currently more needed.

Run yarn test before committing to ensure you don't introduce regressions.

Design & UI

For styling conventions, design tokens, and the BEM pilot, see docs/styling.md. The source layout is described in docs/structure.md.

Contact

contato@ciclomapa.org.br

License

The source code is available under a GPLv3 license.

Data is directly imported from OpenStreetMap® and thus is open data, licensed under the Open Data Commons Open Database License (ODbL) by the OpenStreetMap Foundation (OSMF).