forked from G-Anjanappa/Photogrammetry-Website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwebmapping.html
146 lines (134 loc) · 7.71 KB
/
webmapping.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<!--include the OpenLayers CSS : -->
<link rel="stylesheet" href="https://gisedu.itc.utwente.nl/exercise/libraries/openlayers/v4.6.4/ol.css"
type="text/css" />
<title>GFM - Group Project</title>
<link rel="icon" type="image/x-icon" href="img/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<a class="navbar-brand js-scroll-trigger"
href="https://gisedu.itc.utwente.nl/student/s2578956/Photogrammetry-Website/index.html#about">Go Back</a>
<button class="navbar-toggler navbar-toggler-right previous btn-black" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="container">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item" style="font-size:x-large"><a class="nav-link js-scroll-trigger"
href="#page-top">Home</a></li>
<li class="nav-item" style="font-size:x-large"><a class="nav-link js-scroll-trigger"
href="#home">Description</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead"
style="background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 75%, #000000 100%), url(img/Web_mapping_cover.jpg);background-size: cover; background-repeat:no-repeat">
<div class="container d-flex h-100 align-items-center">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase text-white">Web Mapping Process</h1>
</div>
</div>
</header>
<section class="projects-section bg-light" id="home">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto" style="font-size: 20px;">
<p class="mb-0 text-black-60 text-justify">
According to wikipedia, <strong>Web Mapping</strong> is the process of using the maps delivered
by geographic information systems (GIS) on the Internet, more specifically in the World Wide Web
(WWW). It includes the process of designing, implementing, generating, and delivering maps<sup
id="cite_ref-1" class="reference"><a
href="http://michaelminn.net/tutorials/web-mapping/">[1]</a></sup>.The figure below
shows a basic workflow of web mapping.</p>
<div class="row justify-content-center no-gutters">
<div class="col-xl-8 col-lg-7"><img class="img-fluid mb-3 mb-lg-0" src="img/Web_mapping.png"
alt="" />
</div>
</div>
<br>
<br>
<h3><strong>Web Page/ Web Browser</strong></h3>
<p>The content in our web page is specified with three different languages:</p>
<ul>
<li><b>HTML</b> (Hypertext Markup Language) specifies the content of the web page.</li>
<li><b>CSS</b> (Cascading Style Sheets) specifies the style and presentation of the content.
</li>
<li><b>JavaScript</b> is a programming language that defines how that content interacts with
users.</li>
<li><b>OpenLayers</b> is an open-source JavaScript library for displaying map data in web
browsers as slippy maps.</li>
<li><b>Common Gateway Interface(CGI) application</b> is a standard for interfacing external
applications with web servers.</li>
</ul>
<div class="row justify-content-center no-gutters">
<div class="col-xl-8 col-lg-7"><img class="img-fluid mb-3 mb-lg-0" src="img/web_technology.png"
alt="" />
</div>
</div>
<br>
<p>For web mapping, the HTML, CSS and JavaScript code in a web page often
bring other image content into the web page and make requests to servers
as users interact with those web pages.</p>
<p>CGI application is executed on request, so that the web
server is able to
provide dynamic/ real time information (lets the world
run a program on your system). OpenLayers makes it easy to put a dynamic map in any web page. It
can display map tiles, vector data and markers loaded from any source. </p>
<br>
<br>
<h3><strong>Mapserver</strong></h3>
<p>MapServer is an Open Source geographic data rendering engine. Service instance for this server is
configured by a map file, a
configuration which defines the contents (data, layers, extent, attributes, etc...). The figure
below
shows the setup of Mapserver used in this website.</p>
<div class="row justify-content-center no-gutters">
<div class="col-xl-8 col-lg-7"><img class="img-fluid mb-3 mb-lg-0" src="img/mapserver.png"
alt="" />
</div>
</div>
<p>Our website uses a multiple layer mapfile structure, by objects, which looks like:</p>
<div class="row justify-content-center no-gutters">
<div class="col-xl-8 col-lg-7"><img class="img-fluid mb-3 mb-lg-0" src="img/layers.PNG"
alt="" />
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="footer bg-black small text-center text-white-50">
<div class="container">Copyright © All rights reserved. | GFM 2020-2022 - Extract/Analysis & Dissemination
GeoData - Working Group 2</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>