-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
130 lines (124 loc) · 6.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>Wikivoyage Districtifier</title>
<meta name="description"
content="An app, which empowers editors of Wikivoyage to intuitively create district overview maps">
<link rel="Shortcut Icon" href="img/favicon.ico">
<link rel="canonical" href="https://wikivoyage-districtifier.renek.cc/">
<!--Tell Google to index this url and not the GitHub one-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-23EW31J3HM"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-23EW31J3HM');
</script>
</head>
<body>
<div w3-include-html="navbar.html"></div>
<div id="content">
<div id="item_0" class="item">
<div class=checkmark><input type="radio" name="selected" checked="checked"
title="Activate district to add/remove polygons"></div>
<div class=title><input type="text" class="dname" placeholder="Please enter district name" value="District 0"
title="Enter name of district" onfocus="selectCheckmarkAndName(this)" oninput="createOutput()"></div>
<div class=delete onclick="removeDistrict(this)" title="Click to delete district"><svg class="dustbin">
<use xlink:href="img/icons.svg#dustbin-logo"></use>
</svg>
</div>
</div>
<div id="item_1" class="item">
<div class=checkmark><input type="radio" name="selected" title="Activate district to add/remove polygons"></div>
<div class=title><input type="text" class="dname" placeholder="Please enter district name" value="District 1"
title="Enter name of district" onfocus="selectCheckmarkAndName(this)" oninput="createOutput()"></div>
<div class=delete onclick="removeDistrict(this)" title="Click to delete district"><svg class="dustbin">
<use xlink:href="img/icons.svg#dustbin-logo"></use>
</svg>
</div>
</div>
<div id="add-district" onclick="addDistrict()" title="Add a new district"><svg class="add-district-button">
<use xlink:href="img/icons.svg#add-button"></use>
</svg>
</div>
<div id="map-container">
<div id="map"></div>
<div id="zoom-in" class="hide">Zoom in to load boundaries</div>
<input type="button" id="load-button" title="Load boundaries from OpenStreetMap" value="Load Boundaries"
onclick="fetchExternalGeojson()">
<div id="region-info"></div>
<div id="loading-animation" class="hide"></div>
</div>
<div id="output-text-area">
<textarea id="textareabox"
placeholder="The Wikivoyage code will show up here once you added some elements to a district."
readonly></textarea>
<div class="copy-button" onclick="copyText()">
<div aria-label="Copy" id="graphic"><svg preserveAspectRatio="xMidYMid meet" height="1em" width="1em"
fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" stroke="currentColor" class="icon-7f6730be--text-3f89f380">
<g>
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</g>
</svg>
</div>
<span class="tooltiptext">Copy to clipboard</span>
</div>
</div>
</div>
<details>
<summary id="help-begin" onclick="scrollDown()">Help</summary>
<h3>Introduction</h3>
<p>This tool aims to empower editors of Wikivoyage to intuitively create district overview maps (e.g. for <a
href="https://en.wikivoyage.org/wiki/Berlin#/map/0">Berlin</a>).</p>
<h3>Video</h3>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Ut61apV4FMY" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<h3>Workflow</h3>
<ol>
<li>Go to the location on the map, that you want to districtify and click on <strong>Load Boundaries</strong>.
</li>
<li><strong>Hide</strong> all the <strong>administrative levels</strong>, which are not relevant to you.</li>
<li><strong>Define districts:</strong></li>
<ol type="a">
<li>By adding, removing and naming them.</li>
<li>Add polygons to each district by clicking on the map.</li>
</ol>
<li>Once satisfied click in the textbox below the map, <strong>copy the output and paste it to
Wikivoyage</strong>.</li>
</ol>
<img id="how-to-image" src="img/how-to.jpg" alt="Workflow picture">
<h3>FAQ</h3>
<h4>I get no or very few boundaries in my region</h4>
<p>Most probably the boundaries have not been added to OpenStreetMap yet. You can either wait and hope that somebody
will add them for you or get active yourself, head over to OSM and draw the district
boundaries and add Wikidata tags to them. Just be aware that those boundaries have to be
<strong>official</strong> districts!
</p>
<h4>Can I improve this web app?</h4>
<p>If you have ideas on how to make this tool better please head over to the <a
href="https://github.com/rene78/Wikivoyage-Districtifier">GitHub repository</a> and participate.</p>
<h4>Can I send you a donation?</h4>
<p>Sure, thank you! You can send me some Satoshis via the Lightning network. Here is my <a
href="https://tallyco.in/s/6dfzf2/">Tallycoin Fundraiser Page</a>.</p>
</details>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<link rel="stylesheet" href="//unpkg.com/leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css"
type="text/css">
<script src="//unpkg.com/leaflet-gesture-handling"></script>
<script src="exampleGeoJSON.js"></script>
<script src='osmtogeojson.js'></script>
<script src="main.js"></script>
</body>
</html>