midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
No description
6 commits 3 branches 0 tags 1.1 GiB
TypeScript 97.9%
CSS 1.4%
HTML 0.6%
Find a file
Pieter Vander Vennet bcdbf6a2dd Add geolocation button which uses device GPS
2020-06-28 02:42:36 +02:00
assets Add geolocation button which uses device GPS 2020-06-28 02:42:36 +02:00
Layers Lots of styling, mobile friendliness, better UI flows 2020-06-28 00:06:23 +02:00
Logic Add geolocation button which uses device GPS 2020-06-28 02:42:22 +02:00
UI Lots of styling, mobile friendliness, better UI flows 2020-06-28 00:06:23 +02:00
vendor Add geolocation button which uses device GPS 2020-06-28 02:42:22 +02:00
.gitignore Further work on infobox, styling everything, removing clutter 2020-06-27 03:06:51 +02:00
Helpers.ts Further work on infobox, styling everything, removing clutter 2020-06-27 03:06:51 +02:00
index.css Add geolocation button which uses device GPS 2020-06-28 02:42:22 +02:00
index.html Add geolocation button which uses device GPS 2020-06-28 02:42:22 +02:00
index.ts Add geolocation button which uses device GPS 2020-06-28 02:42:22 +02:00
land.html Add MapComplete 2020-06-24 00:35:19 +02:00
LayerDefinition.ts Further work on infobox, styling everything, removing clutter 2020-06-27 03:06:51 +02:00
package-lock.json Add image upload functionality with imgur 2020-06-25 03:39:31 +02:00
package.json Add image upload functionality with imgur 2020-06-25 03:39:31 +02:00
Quests.ts Lots of styling, mobile friendliness, better UI flows 2020-06-28 00:06:23 +02:00
README.md Lots of styling, mobile friendliness, better UI flows 2020-06-28 00:06:23 +02:00
test.html Lots of styling, mobile friendliness, better UI flows 2020-06-28 00:06:23 +02:00
test.ts Lots of styling, mobile friendliness, better UI flows 2020-06-28 00:06:23 +02:00

README.md

MapComplete

MapComplete attempts to be a webversion of StreetComplete.

The design goals of MapComplete are to be:

  • Easy to use
  • Easy to deploy
  • Easy to modify

The basic functionality is to download some map features with overpass and then ask certain questions. An answer is sent back to OpenStreetMap.

Furthermore, it shows images present in the image tag or, if a wikidata or wikimedia_commons-tag is present, it follows those to get these images too

License

GPL + pingback.

I love it to see where the project ends up. You are free to reuse the software (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 pingback in the issues, ...

Dev

To develop:

  1. Install npm.
  2. Run npm install to install the dependencies
  3. Run npm run start to build and host a local testversion

To deploy:

  1. rm -rf dist/ to remove the local build
  2. npm run build
  3. copy the entire dist folder to where you host your website. Visiting index.html gives you the website

Architecture

High-level overview

The website is purely static. This means that there is no database here, nor one is needed as all the data is kept in OpenStreetMap or Wikimedia (for images).

When viewing, the data is loaded from overpass. The data is then converted (in the browser) to geojson, which is rendered by Leaflet.

When a map feature is clicked, a popup shows the information, images and questions that are relevant for that object. The answers given by the user are sent (after a few seconds) to OpenStreetMap directly - if the user is logged in. If not logged in, the user is prompted to do so.

Searching images

Images are fetched from:

  • The OSM image, image:0, image:1, ... tags
  • The OSM wikimedia_commons tags
  • If wikidata is present, the wikidata P18 (image) claim and, if a commons link is present, the commons images

Uploading images

Images are uplaoded to imgur, as their API was way easier to handle. The URL is written into the changes

The idea is that one in a while, the images are transfered to wikipedia

Attributions:

Data from OpenStreetMap Images from Wikipedia/Wikimedia

https://commons.wikimedia.org/wiki/File:Camera_font_awesome.svg