-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
169 lines (158 loc) · 9.01 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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-114932196-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-114932196-1');
</script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Path drawing tool for google maps</title>
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="layout.css">
</head>
<body>
<nav class="navbar navbar-light bg-light mb-3">
<a class="navbar-brand" href="#">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Map_ballonicon2.png" width="30" height="30" class="d-inline-block align-top" alt=""> Routing for nafplio
</a>
</nav>
<div class="container-fluid">
<div class="d-flex card-group">
<div class="card info">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link disabled">
<svg style="vertical-align:middle" id="i-settings" viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M13 2 L13 6 11 7 8 4 4 8 7 11 6 13 2 13 2 19 6 19 7 21 4 24 8 28 11 25 13 26 13 30 19 30 19 26 21 25 24 28 28 24 25 21 26 19 30 19 30 13 26 13 25 11 28 8 24 4 21 7 19 6 19 2 Z" />
<circle cx="16" cy="16" r="4" />
</svg>
Settings
</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-draw-style="freehand" id="freehand-tab" data-toggle="tab" href="#freehand" role="tab" aria-controls="freehand" aria-selected="true">Hand drawing</a>
</li>
<li class="nav-item">
<a class="nav-link" data-draw-style="marker" id="directions-tab" data-toggle="tab" href="#directions" role="tab" aria-controls="directions" aria-selected="false">Marker based</a>
</li>
</ul>
</div>
<div class="card-body">
<form class="tab-content">
<label>Map center</label>
<div class="input-group input-group-sm mb-3">
<input type="text" placeholder="Lat" id="go-lat" class="form-control" value="37.56569">
<input type="text" placeholder="Lng" id="go-lng" class="form-control" value="22.8">
<div class="input-group-append">
<a href="#" class="btn btn-outline-primary" id="go-to">Go</a>
</div>
</div>
<div class="tab-pane active" id="freehand">
<label for="fidelity">Pathing fidelity <small class="form-text-inline text-muted">(segment length)</small></label>
<div class="input-group input-group-sm mb-3">
<input type="range" value="5" min="0" max="25" step="0.5" class="form-control" id="fidelity">
<div class="input-group-append">
<span class="input-group-text"><span id="fidelity-show">5.0</span> <small class="text-muted">meters</small></span>
</div>
</div>
<label for="path-length">Distance</label>
<div class="input-group input-group-sm mb-3">
<input type="text" readonly disabled class="form-control text-right bg-white" value="0" id="path-length">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2"><small class="text-muted">meters</small></span>
</div>
</div>
</div>
<div class="tab-pane" id="directions">
<div class="card">
<div class="card-header">
Markers
</div>
<div class="card-body">
<div id="marker-list" class="card-body list-group"></div>
</div>
<div class="card-body">
<div class="border p-3 clearfix">
<div class="input-group input-group-sm mb-2 mr-sm-2">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Latitude</span>
</div>
<input type="text" class="form-control" id="manual-latitude">
</div>
<div class="input-group input-group-sm mb-2 mr-sm-2">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Longitude</span>
</div>
<input type="text" class="form-control" id="manual-longitude">
</div>
<button class="btn btn-outline-primary btn-sm float-right" id="manual-marker">add marker</button>
</div>
</div>
<div class="card-footer">
<button id="get-directions" type="button" class="btn btn-outline-primary btn-sm">get directions</button>
</div>
</div>
</div>
<hr>
<div class="form-group">
<label for="path-results">Path data</label>
<textarea class="form-control form-control-sm" readonly id="path-results" rows="8"></textarea>
<small class="form-text text-muted">
Copy this for use in your app.
</small>
</div>
</form>
</div>
</div>
<div class="card map">
<div class="card-header">
Map
<div class="btn-group float-right">
<button id="map-status" class="btn btn-outline-secondary btn-sm active" disabled title="Drawing status">
<svg id="i-compose" viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M27 15 L27 30 2 30 2 5 17 5 M30 6 L26 2 9 19 7 25 13 23 Z M22 6 L26 10 Z M9 19 L13 23 Z" />
</svg>
</button>
<button id="save" type="button" class="btn btn-outline-primary btn-sm" title="Export/show path data">
<svg id="i-download" viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30" />
</svg>
</button>
<button id="clear" type="button" class="btn btn-outline-primary btn-sm" title="Delete path">
<svg id="i-trash" viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M28 6 L6 6 8 30 24 30 26 6 4 6 M16 12 L16 24 M21 12 L20 24 M11 12 L12 24 M12 6 L13 2 19 2 20 6" />
</svg>
</button>
</div>
</div>
<div class="card-body">
<div id="map"></div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid text-right">
<small class="text-muted font-italic">developed by g.petrioli</small>
</div>
</footer>
<!--
i would suggest you use an GOOGLE MAPS API KEY of your own to avoid limitations
as this is a key used by this app (and since it is being public it could reach its quota)
https://developers.google.com/maps/documentation/javascript/get-api-key
-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBnsMTT8NkoFDwKteKUSvHYzzGDoLi8H3g&sensor=false"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.4/lib/sortable.js"></script>
<script src="scripts.js"></script>
</body>
</html>