Add a documentation page

This commit is contained in:
Edward Betts 2021-07-14 15:57:21 +02:00
parent 5a42e100c7
commit 7649afa526
6 changed files with 126 additions and 45 deletions

View file

@ -1,47 +1,6 @@
<template>
<div>
<nav id="nav" class="navbar navbar-expand navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/">osm.wikidata.link</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<ul class="navbar-nav">
<template v-if="username">
<li class="nav-item">
<a class="nav-link" href="#">{{ username }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
</template>
<li v-else class="nav-item">
<a class="nav-link" href="/login">Login with OpenStreetMap</a>
</li>
</ul>
</div>
</nav>
<div id="map">
</div>

View file

@ -2,23 +2,25 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
{% block title %}{% endblock %} OSM ↔ Wikidata
</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap4/css/bootstrap.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='fork-awesome/css/fork-awesome.css')}}">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.0.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/fork-awesome@1.1.7/css/fork-awesome.min.css">
{% block style %}
{% endblock %}
</head>
{% from "navbar.html" import navbar with context %}
<body>
<div class="container-fluid p-0">
{% block nav %}{{ navbar() }}{% endblock %}
{% block content %}{% endblock %}
</div>
<script src="https://unpkg.com/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
{% block script %}{% endblock %}
</body>
</html>

View file

@ -0,0 +1,69 @@
{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<div class="container my-2">
<h2>Instructions</h2>
<p>This tool will help you link Wikidata items with the matching object on OpenStreetMap (OSM).</p>
<p>To save changes you need to <a href="/login">login via OpenStreetMap</a>.</p>
<p>Zoom in or search for an area to work on.</p>
<p>The map will show at most 400 items, if there are more then you need to zoom in before you can start editing.</p>
<p>Wikidata items appear on the map as red or green markers. Items not linked for OSM appear in red, those that are linked appear in green. The map shows the location of Wikidata tagged OSM objects with a yellow pin.</p>
<p>There are controls to filter what appears on the map. You have the option to hide Wikidata items that are already tagged on OSM. The type filter allows you to adjust what types of Wikidata item are displayed.</p>
<p>Click on a marker to show details of the Wikidata item and find nearby possible OSM matches.</p>
<h2>Known faults</h2>
<h4>Language selection</h4>
<p>There is no way to change the user interface language or data display language.</p>
<h4>Map filters</h4>
<dd>
<dt>OSM/Wikidata link status numbers don't match current view</dt>
<dd>
<p>The item type counts update to only include items in the current view. The OSM/Wikidata link status should do the same, but don't currently.</p>
</dd>
<dt>It should be possible to hide items with a given item type</dt>
<dd>
<p>Item type filters have two states, <i>on</i> and <i>off</i>. There
should be three states: <i>include</i>, <i>exclude</i> and
<i>neutral</i>.</p>
<p>Some items in Wikidata are for things that no longer exist. If
something doesn't exist it won't be include in OpenStreetMap, so there is
nothing to match with. A good example are cinemas, somebody
has loaded a historical database of cinemas into Wikidata, many of them
no longer exist. On Wikidata they have the item types <i>movie theater
(Q41253)</i> and <i>destroyed building or structure (Q19860854)</i>.
There is no way with the existing filters to say show me cinemas unless
they have the type <i>destroyed building or structure (Q19860854)</i>.
</p>
</dd>
</dl>
<h4>Item detail page</h4>
<p>Image doesn't update until the list of nearby OSM matches has been downloaded.</p>
<h4>List of nearby possible OSM matches</h4>
<ol>
<li>Only OSM objects within the current map view are shown.</li>
<li>The list is only filtered on OSM tags/keys from the Wikidata item. There is no filtering by name, street address or identifier.</li>
<li>Matching linear features, like streets and waterways, could be improved. It should be possible to select a way then automatically select other connected ways with the same name.</li>
<li>The list of OSM objects shows name and street addresses but not identifiers.</li>
<li>Unnamed boundary ways that are part of a relation should be hidden by default.</li>
<li>The code that identifiers OSM object types could be more precise. For example a mosque is labelled as a 'place of worship', it should be labelled as a mosque.</li>
</ol>
</div>
{% endblock %}

View file

@ -9,7 +9,9 @@
<link rel="stylesheet" href="https://unpkg.com/fork-awesome@1.1.7/css/fork-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet-extra-markers@1.2.1/dist/css/leaflet.extra-markers.min.css">
</head>
{% from "navbar.html" import navbar with context %}
<body>
{% block nav %}{{ navbar() }}{% endblock %}
<div id="app"></div>
<script src="https://unpkg.com/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

35
templates/navbar.html Normal file
View file

@ -0,0 +1,35 @@
{% set tabs = [
("map", "Home"),
("documentation", "Documentation"),
] %}
{% macro navbar() %}
<nav id="nav" class="navbar navbar-expand navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/map">osm.wikidata.link</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
{% for page, label in tabs%}
<li class="nav-item">
<a
class="nav-link{% if page == active_tab %} active{% endif %}"
href="/{{ page }}">{{ label }}</a>
</li>
{% endfor %}
</ul>
<ul class="navbar-nav">
{% if username %}
<li class="nav-item">
<a class="nav-link" href="#">{{ username }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
{% else %}
<li v-else class="nav-item">
<a class="nav-link" href="/login">Login with OpenStreetMap</a>
</li>
{% endif %}
</ul>
</div>
</nav>
{% endmacro %}

View file

@ -178,6 +178,18 @@ def map_start_page():
))
@app.route("/documentation")
def documentation_page():
user = flask_login.current_user
username = user.username if user.is_authenticated else None
return render_template(
"documentation.html",
active_tab="documentation",
username=username
)
@app.route("/search")
def search_page():
loc = get_user_location()
@ -188,6 +200,7 @@ def search_page():
return render_template(
"map.html",
active_tab="map",
lat=f'{loc["latitude"]:.5f}',
lon=f'{loc["longitude"]:.5f}',
zoom=16,
@ -204,6 +217,7 @@ def map_location(zoom, lat, lon):
return render_template(
"map.html",
active_tab="map",
zoom=zoom,
lat=lat,
lon=lon,