Skip to content

Commit

Permalink
deploy: afd7479
Browse files Browse the repository at this point in the history
  • Loading branch information
@ming-suhi
ming-suhi committed Jun 14, 2024
1 parent e106000 commit 312618f
Show file tree
Hide file tree
Showing 4 changed files with 169 additions and 112 deletions.
6 changes: 3 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=0.1">
<title>Map Viewer</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
Expand Down Expand Up @@ -82,12 +82,12 @@ <h2>Generating Map From Data</h2>
<h1>Naikot mo na ba talaga ang UP Diliman?</h1>
<div>
<input type="checkbox" id="agreed">
<text>I have read the <a href="information.html">project information</a> and how it works.</text>
<text>I have read the <a href="information.html" target="_self">project information</a> and how it works.</text>
</div>
<input type="file" id="fileInput" webkitdirectory multiple class="hidden-input">
<label for="fileInput" class="file-label">Generate My Map</label>
<text style="margin-top: 30px">Don't have your own data?</text>
<text><a href="sample.html" target="_blank">Generate map using sample data</a></text>
<div id="generate-sample" style="cursor: pointer;"><a>Generate map using sample data</a></div>
</div>
</div>
</body>
Expand Down
90 changes: 86 additions & 4 deletions index.js
View file

Large diffs are not rendered by default.

85 changes: 80 additions & 5 deletions information.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=0.1">
<title>Map Viewer</title>
<style>
* {
margin: 0;
color: #1b1f23;
font-family: Arial, sans-serif;
text-decoration: none;
overflow-x: hidden;
}
#main {
position: absolute;
Expand Down Expand Up @@ -53,6 +54,29 @@
align-items: center;
}

#content {
h1 {
margin: 50px 0 20px 0;
}
h2 {
font-size: large;
margin-bottom: 60px;
font-weight: lighter;
}
h3 {
margin-bottom: 30px;
}
text {
margin-bottom: 30px;
line-height: 2;
}
ol {
list-style-position: inside;
}
a {
color: #5175f5;
}
}
</style>
</head>
<body>
Expand All @@ -64,11 +88,11 @@
</div>
</div>
<div class="flex row">
<a class="flex center" style="margin-left: 20px;" href="index.html" target="_blank">
<a class="flex center" style="margin-left: 20px;" href="index.html">
<text style="font-size: medium;">Generate Map</text>
<img src="map.png" style="width:25px; height: 24px; margin-left: 5px">
</a>
<a class="flex center" style="margin-left: 20px;" href="https://github.com/ming-suhi" target="_blank">
<a class="flex center" style="margin-left: 20px;" href="https://github.com/ming-suhi/UP.Di-Libot" target="_blank">
<text style="font-size: medium;">Repository</text>
<img src="github.svg" style="width:25px; height: 25px; margin-left: 5px">
</a>
Expand All @@ -77,8 +101,59 @@

</div>
<div id="main">
<div id="content" class="flex row">
<h1>Project Title</h1>
<div id="content" class="flex col" style="align-items: flex-start;">
<h1>UP Di-Libot: Your UP Diliman Lakwatsa Checklist</h1>
<h2>Kyle Joseph Taton • Jose Mari Mangalindan • Last Updated June 14, 2024</h2>
<h3>I. Project Description</h3>
<text>The <a href="index.html" target="_self">web application</a> maps out a UPD student’s “visiting checklist” by gathering the user’s location history data from Google Maps and marking all locations visited within the bounds of UP Diliman. After inputting the history data, the website displays a masked map of UP Diliman presenting all locations that Google Maps has tracked. In addition, another layer displays the names of buildings and institutes the user has already visited; therefore, displaying all the landmarks visited and blurring sites that have not been explored.</text>
<h3>II. How It Works</h3>
<text>
The project hails from low-resolution satellite imagery provided by <a href="https://www.esri.com/en-us/home" target="_blank">ESRI</a>, serving as the orthophoto referenced by the other integrated, makeshift data layers, such as:
<ul>
<li>the borders of UP Diliman and its neighboring sites,</li>
<li>the polygon representations of relevant infrastructures,</li>
<li>and the buffered coordinates to form a conglomerate of circles, showing the sites visited.</li>
</ul>
</text>
<text>
The web application utilizes several spatial querying techniques in order to generate a white mask that blurs unexplored areas
<ul>
<li>Filter</li>
<li>Buffer</li>
<li>Union</li>
<li>Difference</li>
</ul>
</text>
<text>
The project was only made possible because of several open-sources projects that made the development easier.
<ul>
<li><a href="https://leafletjs.com/reference.html" target="_blank">Leaflet</a></li>
<li><a href="https://turfjs.org/" target="_blank">Turf.js</a></li>
</ul>
</text>
<h3>III. Downloading you data from Google</h3>
<text>
<ol>
<li>Go to <a href="https://takeout.google.com/settings/takeout" target="_blank">Google Takeout</a></li>
<li>Under "Select data to include", select ONLY "Location History (Timeline)"</li>
<li>Click "Next Step"</li>
<li>Select the following:<br>Transfer to: Send download link via email<br>Frequency: Export once<br>File type: .zip<br>File size: 2GB</li>
<li>Press "Create Export"</li>
<li>Wait for an email from Google Takeout containing the download link</li>
<li>Download the .zip file/s</li>
<li>Extract the files</li>
<li>If given multiple .zip files, combine the contents of the "Semantic Location History" folders in a single folder</li>
</ol>
</text>
<h3>IV. Using the Web Application</h3>
<text>Using the <a href="index.html" target="_self">web application</a> is easy. Simply tick the required checbox and press the "Generate My Map" button and select the folder named "Semantic Location History". Note that your data is not uploaded to any server and processing is done by your computer, locally.</text>
<h3>V. Considerations</h3>
<text>A. Data Usage</text>
<text>Google Maps requires location access, mobile data usage, and especially, timeline recording permission from the user; the web application relies on recorded coordinates by the application as input to produce the map. If location history is turned off, then the user will not be able to see the mapped version of their visited sites.</text>
<text>B. Temporal Limitations</text>
<text>Since Google Maps tallies coordinates in irregular time intervals because of poor internet connectivity, it may not pinpoint locations that have already been visited due to said circumstance. Thus, a buffer radius is used to account for time-recording differences.</text>
<text>C. Spatial Accuracy</text>
<text>Because the Google Maps cannot accurately pinpoint the locations already visited by the user, the web application uses a normalized buffer to standardize the grace radius of the coordinates marked by Google Maps, forming a circle union. This creates an expected masked map of visited locations, as long as the map history data of the user has records of the visits.</text>
</div>
</div>
</body>
Expand Down
100 changes: 0 additions & 100 deletions sample.html
View file

This file was deleted.

0 comments on commit 312618f

Please sign in to comment.