Giter Club home page Giter Club logo

website-old's Introduction

MapSwipe

The badges refer to the dev branch

Syntax & Linting Android build iOS build

Welcome to the MapSwipe app. This is the app that is distributed through mapswipe.org as well as through the Google Play and Apple stores. It was initially developed by Doctors without Borders as part of the Missing Maps project.

Main Overview

In a nutshell, here is how MapSwipe works:

  1. Humanitarian organisations set the parameters for projects through a web-based admin interface.
  2. Our backend workers process those projects and place them on Firebase. It imports them into groups that are safe for the user to cache locally on their phone (ideally 200 tiles). This image shows an example of how that grouping algorithm works.
  3. The app fetches the projects from the /projects reference in Firebase through the JavaScript SDK (don't use http requests to Firebase) and displays them to the user.
  4. The user searches those tiles and classifies them. The results are then synced back to Firebase.
  5. When a user chooses to map an area, he or she is distributed groups of the project. On completion, the user then gets badges for the distance they've mapped.

:)

Project Diagram

The following is an outline of how data typically flows and makes it into the mobile application. Most of the action happens in one of the three areas, namely the backend scripts, Firebase database, and clients.

Main overview

This application encompasses only the mobile Android & iOS clients. The role of the clients are to retrieve project information (metadata and tile information) so that volunteers can swipe through and tag them. Then, this tagging information is synchronized back to Firebase. The backend scripts (in a separate repository) are responsible for populating and processing the project information in Firebase.

Developing, Building, and Contributing to MapSwipe

If you'd like to modify and improve MapSwipe, read through the following to get familiar with the project. Please also read CONTRIBUTING.

Technology Used

  1. The app is written entirely in React Native
  2. Firebase provides the backend database. It is protected with security rules so that users and contributors to this open source project can not cause damage.
  3. The workers on the backend are running on Google Cloud and handle pre-processing and post-processing the data.

State of the project

The app was rebuilt at the end of 2018 on a recent version of react-native, and expanded to support multiple types of tasks, as well as a variety of languages.

website-old's People

Contributors

arsea avatar ayako-t avatar cimm avatar ericboucher avatar f1kuni avatar hagellach37 avatar jhenshall avatar laurents avatar macdermott avatar mamiy1002 avatar mapconcierge avatar mathcass avatar matthias-schaub avatar maxputa avatar mina46 avatar pimdewitte avatar sadokx avatar transifex-integration[bot] avatar traviscibot avatar yoshidasuzuka avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

website-old's Issues

Add download option for area of interest for a project

Is it possible to download somehow the original AoI of a task again? I was looking at this task: https://mapswipe.org/project.html?projectId=-M6VE1Zwm2yQ_NPKb3HL I think it is just the admin boundary in this case. But it would be easy to download the original AoI somewhere so I can get in my Qgis an overview of what area has been swiped exactly.

Simple answer: yes it is and the link is: https://apps.mapswipe.org/api/project_geometries/project_geom_-M6VE1Zwm2yQ_NPKb3HL.geojson

We should add this link to the website directly.

CNAME settings in gulp

Change gulp to copy CNAME to docs folder. Link of how to do.

Possibly:
let copiedFiles = gulp.src(['CNAME']) .pipe(gulp.dest('docs/'));

and then add copiedFiles to the merge line at the end.

Maybe also delete CNAME from the top level folder? Only needed in docs?

Canonical tags

Currently the canonical tags all point to the homepage. Either remove or change each page to point at that page.

Add current projects active in app

Can we dynamically draw in key information from the current projects active in the app, such as title, image, % complete?

To be added to home page? Or new impact page? Or data page?

Clean up folders

Delete folders no longer needed:

  • Double check .idea folder can now be deleted
  • There is a 'to be deleted' folder with some old css and js

Feature request link to GitHub

We get lots of emails for feature requests, often for issues already on the backlog.

On the 'Get involved' page, add a section for requesting features or reporting bugs. Have a more prominent link to GitHub (maybe straight to issues page) - so users can see the backlog and add to it. Email address can still be a backup for those not comfortable with GitHub.

Add MapSwipe description

Update the readme from this repo to:

  • add a description of MapSwipe and explain what this project is about
  • invite contributors to fill in issues for the app for bugs and requests for improvements

Translate various dynamic strings (eg. map legend)

@jhenshall Here are a couple of ideas we could use for things like the legend on the map:

  • Create one version of the script per language, the same way we do for the page content. Pros: structure of the build code is ready, just add more pages. Cons: this prevents user browsers from caching the files and we end up with N copies of almost the same file, which is a bit of a waste. Also, the i18n code probably relies on html tags to work, so it may not actually work in the js content.
  • Have the code load the translated strings from a specific translations file. Efficient, but you need to figure out the deployment logic to generate that translation file, and ideally limit it to the useful content, to avoid having everything loaded twice in the browser.
  • Hard code the strings in a hidden part of the page during the gulp build and then have the dynamic code pull it at run time (with something like a jquery selector). My guess is that this is the easiest, you just add a hidden div at the bottom of the relevant page(s) with an html tag for each string to translate like the rest of the code (so no new deployment logic to invent), then just change the js code above to pull the relevant string from the hidden part of the page.

dynamic stats on landing page

More than 30,000 volunteers engaged.
With over 1,000,000 sq km swiped.
Across 29 countries.

Can we replace the static numbers currently used with an API call for current number(s)?
Noting that the sq km total doesn't accurately include the new project types.

change download links to gzipped filed

the links to some of the files for download changed due to some changes in the backend. This needs to be accounted for on the website.

  • tasks
  • results
  • agg_results
  • groups

update website text

  • Text in several places on the site needs to be adapted to better represent the expanding scope of the project and additional project type(s).
  • Language should be updated to be more inclusive of a global community. Text such as "Help humanitarians find and help vulnerable people" removes agency/dignity from the communities we seek to support.

Related:

Add a contributors section

Like on the old website, it would be good to acknowledge everyone who works on the app.

Thinking a more lowkey design - e.g. a small photo, name (maybe as a tooltip), and a link to page of persons choice.

To be added to about page. Needs designs!

website translation workflow

  • need to choose the site-builder/CMS first.
  • it should be easier to translate the website and faster to publish new language version
  • review alternatives to Transifex. the app is translated through Transifex, so we probably don't want to switch but is there reason to move to something else like Weblate?

Related:

Currently we have things sit for extended periods because the flow is not well understood. Such as:

And there's no way of knowing which versions are live (e.g. https://mapswipe.org/cs/) and no way of easily switching between them.

Multi-language support

Setup the site to be able to translate into multiple languages:

  • Design for language selector
  • Integrate the solution - probably Transifex
  • Workflow for translating and updating

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.