This repository has been archived by the owner on Aug 26, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (101 loc) · 4.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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Mapbox geocode tracker</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='normalize.css' rel='stylesheet' />
<link href='skeleton.css' rel='stylesheet' />
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
#mainContainer{
max-width:800px;
}
#map {
position:relative;
width:100%;
height:500px;
}
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
@keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.header {
text-transform: uppercase;
font-size: 1.4rem;
letter-spacing: .1rem;
font-weight: 600;
}
.debug{
background-color: rgba(0,0,0,.6);
color: #fff;
padding: 3px;
}
table > tbody>tr:nth-child(odd){
background-color:#efefef;
}
</style>
</head>
<body>
<div id="mainContainer" class="container">
<h1>Hello fellow traveler</h1><hr>
<h6 class="header">Interested in capturing user submitted geo locations?</h6>
<p>This is an example of a mapbox submission application. Here users can enter an address and automatically have it plotted on the map as well as being saved on the server. This whole example runs off 3 main files: index.html (what you're seeing right now), data.json (to hold the saved coordinates), and update.php (to save the coordinates to data.json). Geocoding is handled by Mapbox's built in method. Go ahead and try it!</p>
<div class="row">
<div class="ten columns"><input id="addressValue" class="u-full-width" type="text" placeholder="enter a location" id="locationInput"></div>
<div class="two columns"><button id="searchAddress" class="button-primary">Submit</button></div>
</div>
<div id='map'></div>
<hr>
<h6 class="header debug">Debug info</h6>
<p>This is the info we currently have on the server. Normally the user would not be able to see this. Data can easily be converted to JSON or CSV if we need to wrap it up and send it somewhere.</p>
<table id="tableData" class="u-full-width">
<thead>
<tr>
<th>Address</th>
<th>Latitude</th>
<th>Longitude</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="main.js"></script>
</body>
</html>