diff --git a/img/how-to.jpg b/img/how-to.jpg new file mode 100644 index 0000000..9d40b71 Binary files /dev/null and b/img/how-to.jpg differ diff --git a/index.html b/index.html index b808164..6b66af8 100644 --- a/index.html +++ b/index.html @@ -41,32 +41,19 @@

Introduction

This tool aims to empower editors of Wikivoyage to intuitively create district overview maps (e.g. for Berlin).

Video

- +

Workflow

    -
  1. Query all needed district polygons with help of Overpass Turbo. See below for a best practice.
    2. -
  2. Paste them into this tool an click on Load.
    3. -
  3. Add and name districts on the right hand side and add polygons to them by selecting elements on the map.
    4. -
  4. Once done copy code at the bottom and paste it to the appropriate Wikivoyage page.
    5. -
-

Best practice to define a query in overpass

-

The example query below will download all districts of Prague

- - [out:json][timeout:60];
- area[admin_level=8][name="Praha"]->.search;
- (rel(area.search)[admin_level=10][wikidata=""];
- );
- out body;
- >;
- out skel qt; - - -
    -
  1. Define JSON as the output format. Define a timeout to cancel the query after a certain amount of time (optional).
    2. -
  2. Define an area, within which to search for districts This area could be a city, municipality or country. The correct name of this area as stated in the OSM relation is very important. Thus go to OSM and enter the Name into the search field. Click on the result (e.g. result for Prague) and copy the value of "name" into your overpass query ("Praha" in the example above). Then search for "admin_level" in the same result and copy this one as well (optional. In the example above it is "8").
    3. -
  3. In the next line we define for what to search within the city of Prague. We are looking for subdistricts. Thus by trial-and-error we have to enter an "admin_level" larger than the one defined in the search field (in the example above results will show up with "admin_level=10"). To get the right admin_level without trial-and-error check the sub-districts in OSM and copy the value of "admin_level" (e.g. Vyšehrad has "admin_level=10". Thus you enter "10" in your query).
    4. -
  4. Click on Run. After a while the district polygons show up on the map. Click on Export --> Copy as GeoJSON and paste it on the input text area on this website.
    5. +
  5. Go to the location on the map, that you want to districtify and click on Load Boundaries.
    6. +
  6. Remove all the administrative levels, which are not relevant for you.
    7. +
  7. Define districts:
    8. +
      +
    1. By adding removing and naming them.
      2. +
    2. Add polygons to each district by clicking on the map.
      3. +
    +
  8. Once satisfied click in the textbox below the map, copy the output and paste it to Wikivoyage.
+ Workflow picture

Improve

If you have ideas on how to make this tool better please head over to the github page and participate or leave a comment down below.

diff --git a/main.css b/main.css index 3ae7504..438f23a 100644 --- a/main.css +++ b/main.css @@ -244,6 +244,13 @@ img { width: auto; } +#how-to-image { + width:100%; + max-width:1600px; + height:auto; + border: 3px solid red; +} + iframe { max-width: 100%; }