-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (151 loc) · 5.31 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
<meta
name="viewport"
content="initial-scale=1.0,
width=device-width"
/>
<script
src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
type="text/javascript"
charset="utf-8"
></script>
<script
src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
type="text/javascript"
charset="utf-8"
></script>
<script
src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"
type="text/javascript"
charset="utf-8"
></script>
<script
type="text/javascript"
src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"
></script>
<script>
window.ENV_VARIABLE = "developer.here.com";
</script>
<link
rel="stylesheet"
type="text/css"
href="https://js.api.here.com/v3/3.1/mapsjs-ui.css"
/>
<link rel="stylesheet" type="text/css" href="/stylesheet.css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-col xl:flex-row sm:flex-col xl:gap-4 xl:h-full">
<div
class="place-items-center shadow-md place-content-center mx-6 mt-6 xl:m-auto bg-sky-900 rounded-lg mb-6 xl:w-4/12 sm:w-full"
id="header"
>
<h1 class="text-center py-4 text-xl text-slate-50 font-semibold">
Nearus v2.1
</h1>
<div class="px-16 pb-8 text-slate-50">
<p class="text-base text-l">Instructions:</p>
<ol class="list-decimal text-xs tracking-wide">
<li>Type your place of interest (ex:restaurant)</li>
<li>Define the search radius (ex:2000)</li>
<li>Type the address of the origins</li>
<li>
Press "submit". You might have to press it several times until the
map markers are properly shown. Sorry for this inconvenience
</li>
</ol>
</div>
<div class="place-items-center rounded-t-lg">
<form class="bg-white shadow-md px-8 pt-6 pb-8 mb-4">
<div class="mb-4">
<label
class="block text-gray-700 text-sm font-bold mb-2"
for="username"
>
Place of Interest
</label>
<div class="inline-flex">
<input
class="text-sm shadow appearance-none border rounded-l-lg w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
type="text"
id="addressInput"
placeholder="ex: restaurant"
/>
<input
class="text-sm shadow appearance-none border w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
type="number"
id="searchRadiusInput"
placeholder="Search radius. ex:5000"
/>
<p
class="shadow bg-slate-800 appearance-none border rounded-r-lg w-full py-2 px-3 text-slate-50 leading-tight focus:outline-none focus:shadow-outline max-w-fit"
>
m
</p>
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2">
Address
</label>
<div id="inputContainer"></div>
</div>
</form>
</div>
<div
class="flex flex-col sm:flex-row xl:gap-12 mb-4 w-full place-content-center place-items-center"
>
<div class="pr-8 inline-flex">
<button
class="bg-rose-500 hover:bg-rose-700 text-slate-50 font-semibold py-2 px-4 rounded-l text-sm"
id="removeInput"
>
Remove address
</button>
<button
class="bg-emerald-500 hover:bg-emerald-700 text-slate-50 font-semibold py-2 px-4 rounded-r text-sm"
id="addInput"
>
Add address
</button>
</div>
<button
class="bg-cyan-600 hover:bg-cyan-800 text-slate-50 font-semibold hover:text-white rounded py-2 px-5 text-sm"
id="submitButton"
type="submit"
>
Submit
</button>
</div>
</div>
<div class="xl:flex-initial sm:flex-col xl:w-8/12 sm:w-full mx-6">
<div
class="bg-border rounded shadow-md min-w-640 h-64 xl:min-h-screen"
id="mapContainer"
></div>
<div class="flex mt-2 max-h-fit" id="gmapsContainer">
<!-- <a
class="bg-yellow-400 hover:bg-yellow-500 text-slate-50 font-semibold hover:text-white rounded py-2 px-5 text-sm"
href=""
id="linkContainer"
>Search in Google Maps</a
> -->
</div>
</div>
</div>
<div class="px-8 text-xs">
<br />
<p>Note:</p>
<br />
<p>
Since v2.0, Nearus migrated to HEREmaps from Google Maps due to pricing
reason. However, the geocoding feature are somewhat worse than Google
Maps. Due to this, we added "Search in google maps" button that directs
you to google maps using the same query for better results.
</p>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>