From 8636a1a11f1071a623e5545410871ae84f73f386 Mon Sep 17 00:00:00 2001
From: jshjelse <jshjelse@stud.ntnu.no>
Date: Fri, 8 Sep 2023 18:55:46 +0200
Subject: [PATCH] Ferdigstille mye av designet
---
ProgGIS.html | 98 +++++++++++++++++++++++++++++++++++++++++-----------
1 file changed, 77 insertions(+), 21 deletions(-)
diff --git a/ProgGIS.html b/ProgGIS.html
index 8c37d7b..cb74572 100644
--- a/ProgGIS.html
+++ b/ProgGIS.html
@@ -1,40 +1,96 @@
<!DOCTYPE html>
<html>
<head>
+ <meta charset="UTF-8">
<title>ProgGIS</title>
<style>
- .h1 {
- text-align: center;
- font-weight: bold;
- font-family: monospace;
- }
.button {
font-family: monospace;
- background-color: lightgreen;
+ font-weight: bolder;
+ background-color: orangered;
color: white;
- border-color: lightgreen;
+ border: 0;
cursor: pointer;
+ padding-left: 2vw;
+ padding-right: 2vw;
+ margin-left: 2vw;
+ margin-right: 2vw;
+ margin-top: 0.5vh;
+ margin-bottom: 0.5vh;
}
- #box1 {
- font-family: monospace;
- height: 6vh;
+ .box1 {
display: flex;
- flex-grow: 4;
+ flex-grow: 6;
flex-direction: row;
- align-items: center;
}
</style>
</head>
- <body>
- <div style="height: 20vh; width: 100vw; background-color: orange; align-items: center;">
- <h1 style="height: 14vh; color: white; font-size: 12vh;">ProgGIS</h1>
- <div id="box1">
- <button style="padding-left: 2vw; padding-right: 2vw;">Buffer</button>
- <button style="padding-left: 2vw; padding-right: 2vw;">Union</button>
- <button style="padding-left: 2vw; padding-right: 2vw;">Intersection</button>
- <button style="padding-left: 2vw; padding-right: 2vw;">Difference</button>
+
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+ <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+
+ <body style="margin: 0;">
+ <div style="display: flex; flex-grow: 3; flex-direction: row;
+ height: 20vh; background-color: orange; color: white; font-family: monospace;">
+ <div style="padding-left: 2vh; padding-top: 2vh;">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16vh" height="16vh" fill="currentColor" class="bi bi-globe-europe-africa" viewBox="0 0 16 16">
+ <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM3.668 2.501l-.288.646a.847.847 0 0 0 1.479.815l.245-.368a.809.809 0 0 1 1.034-.275.809.809 0 0 0 .724 0l.261-.13a1 1 0 0 1 .775-.05l.984.34c.078.028.16.044.243.054.784.093.855.377.694.801-.155.41-.616.617-1.035.487l-.01-.003C8.274 4.663 7.748 4.5 6 4.5 4.8 4.5 3.5 5.62 3.5 7c0 1.96.826 2.166 1.696 2.382.46.115.935.233 1.304.618.449.467.393 1.181.339 1.877C6.755 12.96 6.674 14 8.5 14c1.75 0 3-3.5 3-4.5 0-.262.208-.468.444-.7.396-.392.87-.86.556-1.8-.097-.291-.396-.568-.641-.756-.174-.133-.207-.396-.052-.551a.333.333 0 0 1 .42-.042l1.085.724c.11.072.255.058.348-.035.15-.15.415-.083.489.117.16.43.445 1.05.849 1.357L15 8A7 7 0 1 1 3.668 2.501Z"/>
+ </svg>
+ </div>
+ <div style="display: flex; flex-grow: 2; flex-direction: column;">
+ <h1 style="margin: 0; padding: 0; text-align: center; font-size: 12vh;">ProgGIS</h1>
+ <div class="box1">
+ <p style="width: 17vw;"></p>
+ <button class="button">Buffer</button>
+ <button class="button">Intersection</button>
+ <button class="button">Union</button>
+ <button class="button">Difference</button>
+ <p></p>
+ </div>
+ </div>
+ <div style="padding-right: 2vh; padding-top: 2vh;">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16vh" height="16vh" fill="currentColor" class="bi bi-globe-asia-australia" viewBox="0 0 16 16">
+ <path d="m10.495 6.92 1.278-.619a.483.483 0 0 0 .126-.782c-.252-.244-.682-.139-.932.107-.23.226-.513.373-.816.53l-.102.054c-.338.178-.264.626.1.736a.476.476 0 0 0 .346-.027ZM7.741 9.808V9.78a.413.413 0 1 1 .783.183l-.22.443a.602.602 0 0 1-.12.167l-.193.185a.36.36 0 1 1-.5-.516l.112-.108a.453.453 0 0 0 .138-.326ZM5.672 12.5l.482.233A.386.386 0 1 0 6.32 12h-.416a.702.702 0 0 1-.419-.139l-.277-.206a.302.302 0 1 0-.298.52l.761.325Z"/>
+ <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM1.612 10.867l.756-1.288a1 1 0 0 1 1.545-.225l1.074 1.005a.986.986 0 0 0 1.36-.011l.038-.037a.882.882 0 0 0 .26-.755c-.075-.548.37-1.033.92-1.099.728-.086 1.587-.324 1.728-.957.086-.386-.114-.83-.361-1.2-.207-.312 0-.8.374-.8.123 0 .24-.055.318-.15l.393-.474c.196-.237.491-.368.797-.403.554-.064 1.407-.277 1.583-.973.098-.391-.192-.634-.484-.88-.254-.212-.51-.426-.515-.741a6.998 6.998 0 0 1 3.425 7.692 1.015 1.015 0 0 0-.087-.063l-.316-.204a1 1 0 0 0-.977-.06l-.169.082a1 1 0 0 1-.741.051l-1.021-.329A1 1 0 0 0 11.205 9h-.165a1 1 0 0 0-.945.674l-.172.499a1 1 0 0 1-.404.514l-.802.518a1 1 0 0 0-.458.84v.455a1 1 0 0 0 1 1h.257a1 1 0 0 1 .542.16l.762.49a.998.998 0 0 0 .283.126 7.001 7.001 0 0 1-9.49-3.409Z"/>
+ </svg>
+ </div>
+ </div>
+ <div id="map" style="position: relative; z-index: 1; height: 80vh;">
+ <div style="display: flex; flex-grow: 2; flex-direction: column;">
+ <div style="height: 72vh;"></div>
+ <div style="display: flex; flex-grow: 3; flex-direction: row;">
+ <div style="padding-left: 2vw;">
+ <svg style="cursor: pointer; border: none; position: absolute; color: orangered; z-index: 999;"
+ xmlns="http://www.w3.org/2000/svg" width="6vh" height="6vh" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
+ <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
+ </svg>
+ </div>
+ <div style="width: 95vw;"></div>
+ <div style="padding-right: 2vw;">
+ <svg style="cursor: pointer; border: none; position: relative; color: orangered; z-index: 999;"
+ xmlns="http://www.w3.org/2000/svg" width="6vh" height="6v" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
+ <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
+ </svg>
+ </div>
+ </div>
</div>
</div>
- <div style="height: 80vh; width: 100vw;"></div>
</body>
</html>
+
+<script type="text/javascript">
+
+ // Bestemme URL til basiskartet:
+ var osm_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="https://www.openstreetmap.org/copyright"<OpenStreetMap</a> contributors'
+ });
+
+ // Initialiserer kartet:
+ var map = L.map('map', {
+ layers: [osm_map], // Default basiskart
+ maxZoom: 18, // Justerer zoom-nivået
+ minZoom: 6,
+ zoomControl: false // Fjerner defaul zoom-knapper
+ }).setView([63.418529, 10.40284], 13)
+
+</script>
\ No newline at end of file
--
GitLab