-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
94 lines (93 loc) · 2.7 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>OpenLandmarks</title>
<style>
html,
body,
#map,
iframe {
display: flex;
border: none;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<iframe></iframe>
<script>
let geojson = "https://maprva.github.io/open-landmarks/landmarks.geojson";
if (window.location.host.startsWith("localhost:")) {
geojson = `${window.location.origin}/landmarks.geojson`;
} else {
geojson = `${window.location.origin}/open-landmarks/landmarks.geojson`;
}
const query = `
---
type: geojson
options:
zoom: 12
center: [-77.45262, 37.55813]
style:
extends: https://styles.trailsta.sh/osm-bright.json
layers:
- type: symbol
icon-image:
- concat
- /icons/
- [get, maki_temaki]
- .png
icon-color: '#444'
text-color: '#333'
icon-halo-color: white
text-halo-color: white
icon-halo-width: 1.2
text-halo-width: 1.2
text-field:
- case
- - all
- [has, 'name:en']
- ['!=', [get, name], [get, 'name:en']]
- - format
- [get, 'name:en']
- {text-font: [literal, [Noto Sans Bold]]}
- "\\n"
- {}
- [get, name]
- {text-font: [literal, [Noto Sans Regular]]}
- - format
- [get, name]
- {text-font: [literal, [Noto Sans Bold]]}
text-anchor: top
text-radial-offset: 1.25
text-size: 14
popupTemplate: >
<img src="https://hub.toolforge.org/{{ tags.wikidata }}?p=image&w=200&h=150">
<hr>
{%- for tag in tags %}
{%- if tag[0] contains "website" %}
<code>{{ tag[0] }} = <a href="{{ tag[1] }}" target="_blank">{{ tag[1] }}</a></code>
{%- elsif tag[0] contains "wikidata" %}
<code>{{ tag[0] }} = <a href="https://wikidata.org/wiki/{{ tag[1] }}" target="_blank">{{ tag[1] }}</a></code>
{%- elsif tag[0] contains "wikipedia" %}
{% assign lang = tag[1] | split: ":" | first %}
<code>{{ tag[0] }} = <a href="https://{{ lang }}.wikipedia.org/wiki/{{ tag[1] | replace_first: lang, "" | replace_first: ":", "" }}" target="_blank">{{ tag[1] }}</a></code>
{%- else %}
<code>{{ tag[0] }} = {{ tag[1] }}</code>
{%- endif %}
<br>
{%- endfor %}
---
${geojson}
`;
document.querySelector("iframe").src =
`https://overpass-ultra.us/#map&query=${encodeURIComponent(query.trim())}`;
</script>
</body>
</html>