-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (114 loc) · 4.16 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="stylesheet" href="/src/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Area Map</title>
</head>
<body
class="bg-neutral-100 dark:bg-neutral-800 text-neutral-800 dark:text-neutral-100 py-12 px-5"
>
<h1 class="text-4xl font-bold text-center">Area Map</h1>
<div class="mt-8 mx-auto max-w-3xl grid gap-5">
<p>
Create a map of your A.A. General Service area that you can embed on
your website. The more areas that participate, the more complete the map
becomes.
</p>
<div
id="map"
class="h-[600px] xl:h-[700px] max-h-screen rounded xl:-mx-36 2xl:-mx-48 mt-5 overflow-hidden"
></div>
<h2 class="font-bold text-xl mt-5">Features</h2>
<ul class="list-disc pl-5">
<li>
Free and
<a
class="text-blue-600 dark:text-blue-400 underline"
href="https://github.com/code4recovery/area-map"
target="_blank"
>open source</a
>
</li>
<li>No tracking</li>
<li>English, French, and Spanish</li>
<li>
Tiny js bundle
<span class="text-neutral-400">5kb</span>
</li>
</ul>
<h2 class="font-bold text-xl mt-5">Add your district boundaries</h2>
<p>
The map gets its data from a crowdsourced list of Google My Maps links
on the
<a
class="text-blue-600 dark:text-blue-400 underline"
target="_blank"
href="https://docs.google.com/spreadsheets/d/1nr0ebftSgTADpGcNQCf95shiEtKuE4l-Td-BAIHzSyM/edit?gid=0#gid=0"
>Area Maps Google Sheet</a
>. To start, edit, or take over an area map, leave a comment on the
sheet.
</p>
<p>
When making your map, please
<a
class="text-blue-600 dark:text-blue-400 underline"
target="_blank"
href="https://docs.google.com/document/d/1nImP4ksUdR68UpV0W0pcaAuKRVl_OlILLvsMxYkUik8/edit"
>read these instructions</a
>.
</p>
<h2 class="font-bold text-xl mt-5">Embed the map on your site</h2>
<p>
You can embed the map on your website by adding the following code to
your HTML. Feel free to modify the CSS.
</p>
<!-- prettier ignore -->
<pre
class="bg-neutral-200 dark:bg-black p-5 font-mono rounded text-sm overflow-x-auto"
></pre>
<p>
If you wish, you can add a <code>data-area</code> parameter to
pre-select an area when the page loads. See an example for
<a href="/?area=1" class="text-blue-600 dark:text-blue-400 underline"
>Area 01</a
>.
</p>
<p>
If you run into trouble, or want to request a feature, please
<a
class="text-blue-600 dark:text-blue-400 underline"
target="_blank"
href="https://github.com/code4recovery/area-map/issues"
>open an issue</a
>.
</p>
</div>
<a
href="https://code4recovery.org"
class="block size-36 mx-auto my-16 p-4"
target="_blank"
>
<img src="/code-for-recovery.svg" alt="Code for Recovery Logo" />
</a>
<script>
const area = parseInt(new URLSearchParams(location.search).get("area"));
if (area) {
// update title and embed code
document.getElementById("map").setAttribute("data-area", area);
const titleText = `Area ${area.toString().padStart(2, "0")} Example`;
document.title = titleText;
document.querySelector("h1").textContent = titleText;
}
document.querySelector("pre").textContent = [
`<script src="https://area-map.netlify.app/app.js" type="module" async><\/script>`,
`<link rel="stylesheet" href="https://area-map.netlify.app/app.css" />`,
`<style type="text/css">#map { height: 600px; }</style>`,
`<div id="map"${area ? ` data-area="${area}"` : ""}></div>`,
].join("\n");
</script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>