-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
134 lines (127 loc) · 5.77 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Openlayers CSS -->
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<!-- Openlayers JS -->
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<!-- Custom CSS -->
<link rel="stylesheet" href="custom/css/style.css">
<!-- Fontawesome Icons -->
<link href="assets/fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
<!-- Jquery -->
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<!-- OL-ext CSS -->
<link rel="stylesheet" href="assets/css/ol-ext.css">
<!-- OL-ext JS -->
<script src="assets/js/ol-ext.js"></script>
<title>Survey App</title>
</head>
<body>
<i id='currentLocation' class="fas fa-street-view fa-2x"></i>
<!-- Navbar -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<i class="fas fa-house-user fa-2x"></i> surveyor Application
</a>
</nav>
<!-- Map Div -->
<div class="map" id="mymap"></div>
<!--begin: Start draw Modal -->
<div class="modal fade" id="startdrawModal" tabindex="-1" role="dialog" aria-labelledby="startdrawModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="startdrawModalLabel">Select Draw type</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style='text-align: center;'>
<!-- Cards -->
<div class="row">
<div class="col-4">
<div class="card" >
<div class="card-body">
<h5 class="card-title">Point</h5>
<h6 class="card-subtitle mb-2 text-muted">ATM, Tree, Pole, Bus Stop, etc.</h6>
<p class="card-text"><i class="fas fa-map-marker-alt fa-2x"></i></p>
<a onclick="startDraw('Point')" class="card-link">Add Point</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card" >
<div class="card-body">
<h5 class="card-title">Line</h5>
<h6 class="card-subtitle mb-2 text-muted">Road, River, Telephone Wire, etc.</h6>
<p class="card-text"><i class="fas fa-road fa-2x"></i></p>
<a onclick="startDraw('LineString')" class="card-link">Add Line</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card" >
<div class="card-body">
<h5 class="card-title">Polygon</h5>
<h6 class="card-subtitle mb-2 text-muted">Building, Garden, Ground, etc.</h6>
<p class="card-text"><i class="fas fa-draw-polygon fa-2x"></i></p>
<a onclick="startDraw('Polygon')" class="card-link">Add Polygon</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--end: Start draw Modal -->
<!--begin: enter information Modal -->
<div class="modal fade" id="enterInformationModal" tabindex="-1" role="dialog" aria-labelledby="enterInformationModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="enterInformationModalLabel">Enter Feature's Detail</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style='text-align: center;'>
<!-- begin: Input -->
<div class="form-group">
<label for="typeofFeatures">Type of Feature</label>
<select class="form-control" id="typeofFeatures">
</select>
</div>
<div class="form-group">
<label for="exampleInputtext1">Name</label>
<input type="text" class="form-control" id="exampleInputtext1" aria-describedby="textHelp">
<small id="textHelp" class="form-text text-muted">Address, Name, etc.</small>
</div>
<!-- end: Input -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="clearDrawSource()">Close</button>
<button type="button" class="btn btn-primary" onclick="savetodb()">Save Featues</button>
</div>
</div>
</div>
</div>
<!--end: enter information Modal -->
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Custom JS -->
<script src="custom/js/main.js"></script>
</body>
</html>