From 611a769c2574eb00fc2b3fce3c6e83023b7f9c33 Mon Sep 17 00:00:00 2001
From: jshjelse <jshjelse@stud.ntnu.no>
Date: Thu, 4 Jan 2024 11:44:25 +0100
Subject: [PATCH] Ferdigstille
---
README.md | 47 +++++----
css/style.css | 41 +++++---
index.html | 161 +++++++++++++++++-------------
javascript/buffer.js | 3 +-
javascript/colors.js | 51 +++++++---
javascript/extract.js | 8 +-
javascript/heatmap.js | 28 ++++--
javascript/leafletLayerControl.js | 36 ++++---
javascript/mapChange.js | 16 ++-
javascript/openFileExplorer.js | 2 +-
javascript/pointMap.js | 106 +++++++++++++-------
javascript/sidebar&boxes.js | 14 ++-
javascript/suitability.js | 72 +++++++------
javascript/tutorial.js | 34 ++++---
javascript/voronoi.js | 5 +-
15 files changed, 383 insertions(+), 241 deletions(-)
diff --git a/README.md b/README.md
index aab1472..8356048 100644
--- a/README.md
+++ b/README.md
@@ -1,48 +1,57 @@
# ProgGis
-## Hva er ProgGIS?
+## What is ProgGIS?
-ProgGIS er resultatet av en arbeidsprosess med faget TBA4251 Programmering i Geomatikk med den hensikt å utvikle en webapplikasjon som benytter kart og geografisk informasjon.
+ProgGIS is the result from the project in subject TBA4251 Programming in Geomatics with the purpose of developing a webapplication that uses map and geographic information.
-ProgGIS er en enkel GIS-plattform egnet for å lære om hva et GIS er for noe og hvordan det fungerer. Plattformen er nettbasert og trenger ingen forhåndsinnstallasjoner om en bare skal lære seg hvordan GIS fungerer - altså egnet for hvem som helst med kartinteresser!
+ProgGIS is a basic GIS-platform suitable for learning what a GIS is and how it works. The platform is web-based and does not need any pre-installations if you only want to learn how GIS works - therefor suitable for anyone with map interests!
-## Hvordan fungerer det?
+## How does it work?
-Plattformen nås via lenken: https://jshjelse.pages.stud.idi.ntnu.no/proggis/
+The platform is reached through the link: https://jshjelse.pages.stud.idi.ntnu.no/proggis/
-Nettsiden består av en header med diverse knapper og et større kart som dekker det meste av siden. Rundt om på siden finnes en rekke knapper med ulik funksjonalitet, inkludert en tutorial som beskriver all funksjonalitet på siden. GIS-funksjonene tilrettelagt på nettsiden er som følger:
+The webpage consists of a header with several buttons and a large map covering almost the whole page. Around the page do there exist a lot of buttons with different functionality, including a tutorial that describes all functionality of the page. The GIS functions arranged on the webpage is as follow:
- Buffer
- Difference
- Dissolve
- Extract
- Intersection
+- Suitability
- Union
-Alt av navigasjon og filhåndtering på siden fungerer via knapper og trykk fra brukeren. Data lagres i egne knapper, select- eller input-tagger, noe som gjør siden veldig forutsigbar og enkel å bruke.
+The webpage has also an user interface intended for point analyzes. This part of the application is reached via the pin at bottom left and it reorganizes the webpage. On this page can you either import some pre-defined points, upload your own point files, or add your own points manually. In addition, the following analysis tools are provided:
+
+- TIN
+- Voronoi-diagram
+- Heatmap
+
+Further instructions are described in a separate tutorial box.
+
+Everything of navigation and file management on the webpage works via buttons and click events from the user. Data is saved in own buttons, select- or input-tags, something that makes the page very predictable and easy to use. There are no database or server connected to the webpage, so you cannot save something to further work - everything are reset if you refresh the page.
### Data
-Det er en del tilrettelagt data i applikasjonen allerede som er tilpasset riktig format for sida. Det vil si at den geografiske dataen er på geojson-format med lengde- og breddegradssystemet som koordinatsystem. Denne dataen kan enkelt åpnes via en knapp i sidebaren.
+It is some pre-defined / arranged data in the applications that are customized the correct format to the page. This means that the geographic data is on geojson-format with latitude and longditude as coordinate system. This data can easily be opened via a button in the sidebar.
-Ellers er det mulig å legge til egne geojson-filer til nettsida via en annen knapp i sidebaren som åpner filutforskeren til brukeren. Det forutsetter da at en har filer på rett format. Dette kan skaffes via følgende fremgangsmåte:
+Else is it possible to add your own geojson files to the webpage via a button in the sidebar that opens the file explorer for the user. This presupposes that the user has files in the correct format. This could be obtained through the following procedure for data from Norway:
-- Last ned ønskede datasett fra geonorge.no på SOSI-format
-- Benytt SOSI2Shape for å konvertere SOSI-filer til shape-filer
-- Ã…pne shape-filene i QGIS og sett koordinatsystemet til kartet til samme som datalagene (UTM 32N, 33N eller 35N for Norge)
-- Klipp ut et utsnitt av datasettene om ønskelig
-- Eksporter datalagene som geojson og CRS: 4326 - globalt lengde- og breddegradssystem
+- Download desired data sets from geonorge.no in SOSI-format
+- Use SOSI2Shape to convert SOSI files to shape files
+- Open the shape files in QGIS and define the coordinate system to the map to the same as the data sets (UTM 32N, 33N or 35N in Norway)
+- Clip out a section of the data if desired
+- Export the data layers to geojson with CRS: 4326 - global latitude and longditude system
-Filen du nå får kan legges inn i ProgGIS via legg til-knappene i sidebaren.
+The file you now obtaine can be uploaded to ProgGIS via a button in the sidebar.
-## Eventuelt
+## Possible errors
-Ved store eller komplekse datasett kan enkelte operasjoner ta en del tid, eventuelt ikke fungere i det hele tatt. Nettsidens funksjoner har en rekke sjekker for å sørge for at all dataen til enhver tid er gyldig i hele applikasjonen. Disse testene skal ta for seg de fleste tilfeller, men muligens ikke alle.
+With large or complex data sets can some operations take some time, or maybe do not work at all. The functions of the webpage have a lot of checks to provide that all the data always are valid in the whole application. These tests should take care of most of the cases, but possibly not all.
-Enkelte verdier på parametre i noen av funksjonene nevnt under 'Hvordan fungerer det?' kan føre til feilmeldinger eller ingen respons i systemet, men dette forekommer svært sjeldent.
+Some values on parametres in some of the functions mentioned under 'How does it work?' can result in error messages or no response in the system, but this occurs very rarely.
##
-Så da ønsker jeg bare god fornøyelse, og lykke til!
+Then I only wish you good fun, and good luck!
Jakob S. S. Hjelseth
diff --git a/css/style.css b/css/style.css
index ac526df..7ddd099 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2,15 +2,6 @@
Justere utseende til nettsiden
*/
-.standard {
- font-family: monospace;
- margin: 0;
-}
-
-p {
- font-size: 18px;
-}
-
.box {
font-family: monospace;
background-color: orange;
@@ -52,12 +43,18 @@ p {
flex-direction: row;
}
+.boxContent {
+ height: 24vh;
+ overflow-y: scroll;
+}
+
.button {
font-family: monospace;
font-weight: bolder;
background-color: orangered;
color: white;
border: 0;
+ border-radius: 10px;
cursor: pointer;
padding-left: 2vw;
padding-right: 2vw;
@@ -67,6 +64,16 @@ p {
margin-bottom: 0.5vh;
}
+#fileInput {
+ display: none;
+}
+
+.input_standard {
+ border-color: orangered;
+ border-radius: 20px;
+ border-width: 2px;
+}
+
.onClick {
font-family: monospace;
font-size: larger;
@@ -83,6 +90,10 @@ p {
cursor: pointer;
}
+p {
+ font-size: 18px;
+}
+
.sidebar {
font-family: monospace;
background-color: orangered;
@@ -95,10 +106,6 @@ p {
transition: 0.5s;
}
-#fileInput {
- display: none;
-}
-
.sidebarButton {
font-family: monospace;
background-color: black;
@@ -114,11 +121,17 @@ p {
cursor: pointer;
}
+.standard {
+ font-family: monospace;
+ margin: 0;
+}
+
.tutorial {
margin: 5px;
padding: 5px;
color: white;
- height: 26vh;
+ height: 23.5vh;
width: 39vw;
text-align: center;
+ overflow-y: scroll;
}
diff --git a/index.html b/index.html
index 48443b0..0fe6526 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
<head>
<title>ProgGIS</title>
- <!-- My css -->
+ <!-- Min css -->
<link rel="stylesheet" href="css/style.css"/>
<!-- Leaflet css -->
@@ -12,15 +12,17 @@
<!-- Turfjs -->
<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
- <!-- Coloring the map layers -->
+ <!-- Fargelegger de ulike kartlagene -->
<script src="javascript/colors.js"></script>
</head>
<body class="standard">
+ <!-- Header -->
+
<div class="box2" style="height: 20vh; background-color: orange; color: white;">
- <svg style="padding-left: 2vh; padding-top: 2vh;"
+ <svg style="padding-left: 2vh; padding-top: 2vh; color: green;"
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>
@@ -45,13 +47,15 @@
</div>
</div>
- <svg style="padding-right: 2vh; padding-top: 2vh;"
+ <svg style="padding-right: 2vh; padding-top: 2vh; color: green;"
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>
+ <!-- Sidebar -->
+
<div id="dataLayers" class="sidebar">
<div class="box3" style="margin-left: 1vw;">
<h1 style="width: 18.5vw; font-size: 2vw;">Data layers</h1>
@@ -80,9 +84,11 @@
<div id="layers" style="font-family: monospace; margin-left: 1vw; margin-top: 2vh; font-size: 18px; height: 52vh; overflow-y: scroll;"></div>
</div>
+ <!-- Kartet med alle funksjonene -->
+
<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 style="height: 72vh;"> <!-- Bokser -->
<div id="bufferBox" class="box">
<div class="box3">
<h1 style="font-size: 4vh; text-align: center; width: 36vw;">Buffer</h1>
@@ -93,16 +99,18 @@
</svg>
</div>
- <p>Choose a layer to create a buffer around:</p>
- <select id="bufferSelect"></select>
-
- <p>Write the distance you want for the buffer (in meter):</p>
- <input id="bufferDistance">
-
- <p>Choose a name for the new buffer:</p>
- <input id="bufferName"><br>
+ <div class="boxContent">
+ <p>Choose a layer to create a buffer around:</p>
+ <select id="bufferSelect" class="input_standard"></select>
+
+ <p>Write the distance you want for the buffer (in meter):</p>
+ <input id="bufferDistance" class="input_standard">
+
+ <p>Choose a name for the new buffer:</p>
+ <input id="bufferName" class="input_standard"><br>
- <p>Do you want to dissolve the buffers? <input type="checkbox" id="bufferCheck"></p>
+ <p>Do you want to dissolve the buffers? <input type="checkbox" id="bufferCheck"></p>
+ </div>
<button class="button" style="font-size: 25px;" onclick="makeBuffer()">Make buffer</button>
</div>
@@ -117,14 +125,16 @@
</svg>
</div>
- <p>Which layer do you want to remove areas from:</p>
- <select id="differenceSelect_1"></select>
+ <div class="boxContent">
+ <p>Which layer do you want to remove areas from:</p>
+ <select id="differenceSelect_1" class="input_standard"></select>
- <p>Which layer do you want to remove from the first one:</p>
- <select id="differenceSelect_2"></select>
+ <p>Which layer do you want to remove from the first one:</p>
+ <select id="differenceSelect_2" class="input_standard"></select>
- <p>Choose a name for the new layer:</p>
- <input id="differenceName"><br>
+ <p>Choose a name for the new layer:</p>
+ <input id="differenceName" class="input_standard"><br>
+ </div>
<button class="button" style="font-size: 25px;" onclick="makeDifference()">Make difference</button>
</div>
@@ -140,10 +150,10 @@
</div>
<p>Choose a layer to dissolve:</p>
- <select id="dissolveSelect"></select>
+ <select id="dissolveSelect" class="input_standard"></select>
<p>Choose a name for the new dissolved layer:</p>
- <input id="dissolveName"><br>
+ <input id="dissolveName" class="input_standard"><br>
<button class="button" style="font-size: 25px;" onclick="doDissolve()">Dissolve</button>
</div>
@@ -158,17 +168,19 @@
</svg>
</div>
- <p>Choose a layer to extract features from:</p>
- <select id="extractSelect"></select>
+ <div class="boxContent">
+ <p>Choose a layer to extract features from:</p>
+ <select id="extractSelect" class="input_standard"></select>
- <p>Which attribute will you extract to a new layer:</p>
- <select id="featureSelect"></select>
+ <p>Which attribute will you extract to a new layer:</p>
+ <select id="featureSelect" class="input_standard"></select>
- <p>Which value will you sort out:</p>
- <select id="valueSelect"></select>
+ <p>Which value will you sort out:</p>
+ <select id="valueSelect" class="input_standard"></select>
- <p>Choose a name for the new layer:</p>
- <input id="extractName"><br>
+ <p>Choose a name for the new layer:</p>
+ <input id="extractName" class="input_standard"><br>
+ </div>
<button class="button" style="font-size: 25px;" onclick="doExtract()">Extract</button>
</div>
@@ -183,14 +195,16 @@
</svg>
</div>
- <p>Choose the first layer to intersect:</p>
- <select id="intersectionSelect_1"></select>
+ <div class="boxContent">
+ <p>Choose the first layer to intersect:</p>
+ <select id="intersectionSelect_1" class="input_standard"></select>
- <p>Choose the second layer:</p>
- <select id="intersectionSelect_2"></select>
+ <p>Choose the second layer:</p>
+ <select id="intersectionSelect_2" class="input_standard"></select>
- <p>Choose a name for the intersection:</p>
- <input id="intersectionName"><br>
+ <p>Choose a name for the intersection:</p>
+ <input id="intersectionName" class="input_standard"><br>
+ </div>
<button class="button" style="font-size: 25px;" onclick="makeIntersection()">Intersect</button>
</div>
@@ -205,24 +219,26 @@
</svg>
</div>
- <p>Choose map layers in prioritised order:</p>
-
- <div id="priorityDiv">
- <div style="display: flex; justify-content: center;">
- <select id="priority1"></select>
-
- <svg onclick="addPrioritizedLayer()" style="cursor: pointer; margin-left: 1vw;" xmlns="http://www.w3.org/2000/svg"
- width="3vh" height="3vh" 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 class="boxContent">
+ <p>Choose map layers in prioritised order:</p>
+
+ <div id="priorityDiv">
+ <div style="display: flex; justify-content: center;">
+ <select id="priority1" class="input_standard"></select>
+
+ <svg onclick="addPrioritizedLayer()" style="cursor: pointer; margin-left: 1vw;" xmlns="http://www.w3.org/2000/svg"
+ width="3vh" height="3vh" 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>
- </div>
- <p>Give this suitability analyse a cathegory name:</p>
+ <p>Give this suitability analyse a cathegory name:</p>
- <input id="suitabilityName"><br>
+ <input id="suitabilityName" class="input_standard"><br>
+ </div>
- <button class="button" style="font-size: 25px; margin-top: 4vh;" onclick="suitability()">Calculate suitable areas</button>
+ <button class="button" style="font-size: 25px;" onclick="suitability()">Calculate suitable areas</button>
</div>
<div id="unionBox" class="box">
@@ -235,14 +251,16 @@
</svg>
</div>
- <p>Choose the first layer to union:</p>
- <select id="unionSelect_1"></select>
+ <div class="boxContent">
+ <p>Choose the first layer to union:</p>
+ <select id="unionSelect_1" class="input_standard"></select>
- <p>Choose the second layer:</p>
- <select id="unionSelect_2"></select>
+ <p>Choose the second layer:</p>
+ <select id="unionSelect_2" class="input_standard"></select>
- <p>Choose a name for the union:</p>
- <input id="unionName"><br>
+ <p>Choose a name for the union:</p>
+ <input id="unionName" class="input_standard"><br>
+ </div>
<button class="button" style="font-size: 25px;" onclick="makeUnion()">Make union</button>
</div>
@@ -270,6 +288,7 @@
</div>
<p id="tutorial" class="tutorial"></p>
+ <p id="page" style="margin: 0; padding: 0;"></p>
</div>
<div id="loadPointsBox" class="box">
@@ -288,7 +307,7 @@
<button id="loadPoints" class="onClick" style="margin-top: 2vh; line-height: 10vh;" onclick="loadPoints()">Load points from file</button>
<p id="savePoints" style="display: none; margin-top: 2vh;">Save points to file</p><br>
- <input id="fileName" style="display: none;"><br>
+ <input id="fileName" style="display: none;" class="input_standard"><br>
<button id="save" class="onClick" style="display: none; margin-top: 2vh;" onclick="saveToFile()">Save</button>
<button id="removePoints" class="onClick" style="margin-top: 2vh; line-height: 10vh; display: none;" onclick="handleDefaultPoints()">Remove current points</button>
@@ -304,11 +323,11 @@
</svg>
</div>
- <p>Lengdegrader: <input id="lengdegrader" readonly></p> <!-- 10.xxx -->
- <p>Breddegrader: <input id="breddegrader" readonly></p> <!-- 6x.xxx -->
+ <p>Lengdegrader: <input id="lengdegrader" readonly class="input_standard"></p> <!-- 10.xxx -->
+ <p>Breddegrader: <input id="breddegrader" readonly class="input_standard"></p> <!-- 6x.xxx -->
- <p>Set category: <input id="pointCategory"></p>
- <p>Set name: <input id="pointName"></p>
+ <p>Set category: <input id="pointCategory" class="input_standard"></p>
+ <p>Set name: <input id="pointName" class="input_standard"></p>
<button id="savePoint" class="onClick" style="margin-top: 2vh;" onclick="savePoint()">Save point</button>
</div>
@@ -323,28 +342,28 @@
</svg>
</div>
- <p>Map layer: <input id="layerNameColor" readonly></p>
+ <p>Map layer: <input id="layerNameColor" readonly class="input_standard"></p>
<label for="R">R</label>
<input type="range" id="R" name="R" min="0" max="255" step="1" onchange="updateValue('R')">
- <input type="text" id="RText" readonly>
+ <input type="text" id="RText" readonly class="input_standard">
<br>
<label for="G">G</label>
<input type="range" id="G" name="G" min="0" max="255" step="1" onchange="updateValue('G')">
- <input type="text" id="GText" readonly>
+ <input type="text" id="GText" readonly class="input_standard">
<br>
<label for="B">B</label>
<input type="range" id="B" name="B" min="0" max="255" step="1" onchange="updateValue('B')">
- <input type="text" id="BText" readonly>
+ <input type="text" id="BText" readonly class="input_standard">
<br>
<button id="paintLayer" class="onClick" style="margin-top: 5vh;" onclick="paint()">Paint</button>
</div>
</div>
- <div class="box2">
+ <div class="box2"> <!-- Knapper -->
<div style="padding-left: 2vw;">
<svg id="sidebarOpener" style="cursor: pointer; border: none; position: absolute; color: orangered; z-index: 999;" onclick="openNav()"
xmlns="http://www.w3.org/2000/svg" width="6vh" height="6vh" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
@@ -395,15 +414,15 @@
<!-- Leaflet js -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
- <!-- Saving files -->
+ <!-- Lagre filer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
<!-- Heatmap -->
<script src="javascript/leaflet-heat.js"></script>
- <!-- My js -->
+ <!-- Min js -->
- <!-- General -->
+ <!-- Generelt -->
<script src="javascript/map.js"></script>
<script src="javascript/sidebar&boxes.js"></script>
@@ -414,7 +433,7 @@
<script src="javascript/tutorial.js"></script>
<script src="javascript/fileHandler.js"></script>
- <!-- Map functions -->
+ <!-- Funksjonalitet for kartet -->
<script src="javascript/buffer.js"></script>
<script src="javascript/dissolve.js"></script>
@@ -424,7 +443,7 @@
<script src="javascript/extract.js"></script>
<script src="javascript/suitability.js"></script>
- <!-- Map change -->
+ <!-- Kartbytte -->
<script src="javascript/mapChange.js"></script>
<script src="javascript/pointMap.js"></script>
diff --git a/javascript/buffer.js b/javascript/buffer.js
index 8521b39..683dae0 100644
--- a/javascript/buffer.js
+++ b/javascript/buffer.js
@@ -51,7 +51,8 @@ function makeBuffer() {
updateSidebar(); // Oppdaterer sidebaren
handleLayer(name); // Viser laget i kartet
- document.getElementById("bufferDistance").value = ""; // Tilbakestiller input-feltene fra brukeren
+ // Tilbakestiller input-feltene fra brukeren:
+ document.getElementById("bufferDistance").value = "";
document.getElementById("bufferName").value = "";
fillSelect("bufferSelect");
} catch(failure) { // Hvis det ikke går å lage buffer, sendes det en feilmelding
diff --git a/javascript/colors.js b/javascript/colors.js
index 5753951..a78ded4 100644
--- a/javascript/colors.js
+++ b/javascript/colors.js
@@ -1,60 +1,79 @@
// Her farges alle lagene i kartet
+// Variabler som holder kontroll på RGB-fargeverdiene:
var a = 0;
var b = 0;
var c = 0;
-function RandomInt() {
+function RandomInt() { // Returnerer et tilfeldig tall mellom 0 og 255
return Math.floor(Math.random() * 256)
}
-function getStyle() {
+function getStyle() { // Returnerer ny, tilfeldig fargestil
+ // Verdiene oppdateres (tilfeldig):
a += RandomInt();
b += RandomInt();
c += RandomInt();
+ // RGB går kun til 255, så ved høyere verdier, må de justeres:
if (a > 255) {
a = 0;
- } else if (b > 255) {
+ }
+ if (b > 255) {
b = 0;
- } else if (c > 255) {
+ }
+ if (c > 255) {
c = 0;
}
- var myStyle = {
+ var myStyle = { // Lager ny stil
"color": "rgb(" + a.toString() + "," + b.toString() + "," + c.toString() + ")"
};
return myStyle
}
-function changeColor(name) {
+function changeColor(name) { // Funksjon som åpner fargeboksen
+ // Henter fargen på aktuelt lag:
+ var array = overlayMaps[name].options.style["color"].split(',');
+ array[0] = array[0].slice(4);
+ array[2] = array[2].slice(0, -1);
+
+ // Oppdaterer alle parametrene i boksen:
document.getElementById("layerNameColor").value = name;
- document.getElementById("R").value = a;
- document.getElementById("G").value = b;
- document.getElementById("B").value = c;
- document.getElementById("RText").value = a;
- document.getElementById("GText").value = b;
- document.getElementById("BText").value = c;
+ document.getElementById("R").value = parseInt(array[0]);
+ document.getElementById("G").value = parseInt(array[1]);
+ document.getElementById("B").value = parseInt(array[2]);
+ document.getElementById("RText").value = parseInt(array[0]);
+ document.getElementById("GText").value = parseInt(array[1]);
+ document.getElementById("BText").value = parseInt(array[2]);
+ // Justerer fargen på 'paint'-knappen til å være lik fargen på aktuelt lag:
document.getElementById("paintLayer").style.backgroundColor = "rgb(" + document.getElementById("R").value + "," + document.getElementById("G").value + "," + document.getElementById("B").value + ")";
+ // Ã…pner den faktiske boksen:
openBox("colorBox");
}
function updateValue(element) {
+ /*
+ Sørger for at feltene ved siden av dra-enhetene (range input) viser oppdatert verdi
+ og farger 'paint'-knappen til riktig farge dynamisk
+ */
var text = element + "Text";
document.getElementById(text).value = document.getElementById(element).value;
document.getElementById("paintLayer").style.backgroundColor = "rgb(" + document.getElementById("R").value + "," + document.getElementById("G").value + "," + document.getElementById("B").value + ")";
}
-function paint() {
+function paint() { // Funksjon som endrer farge på kartlaget
+ // Henter fargeverdiene:
a = document.getElementById("R").value;
b = document.getElementById("G").value;
c = document.getElementById("B").value;
- var newStyle = {
+ var newStyle = { // Lager ny stil
"color": "rgb(" + a.toString() + "," + b.toString() + "," + c.toString() + ")"
};
- overlayMaps[document.getElementById("layerNameColor").value].setStyle(newStyle);
- closeBox("colorBox");
+
+ overlayMaps[document.getElementById("layerNameColor").value].setStyle(newStyle); // Farger laget
+ closeBox("colorBox"); // Lukker boksen
}
diff --git a/javascript/extract.js b/javascript/extract.js
index b42077b..afdcd61 100644
--- a/javascript/extract.js
+++ b/javascript/extract.js
@@ -11,22 +11,24 @@ document.getElementById("extractSelect").addEventListener("change", () => {
select.innerHTML = "";
select.add(new Option(text="- - -"));
} else { // Er det valgt noe, fylles neste med tilhørende verdier
- var layer = overlayMaps[input].toGeoJSON();
+ var layer = overlayMaps[input].toGeoJSON(); // Henter valgt kartlag
- var features = [];
+ var features = []; // Liste med features
for (element in layer["features"]) {
for (key in layer["features"][element]["properties"]) {
if (!features.includes(key)) {
- features.push(key);
+ features.push(key); // Legger til alle features som ikke er i lista allerede
}
}
}
+ // Setter opp select-objektet:
var select = document.getElementById("featureSelect");
select.innerHTML = "";
select.add(new Option(text="- - -"));
+ // Fyller select-objektet med features fra features-lista:
for (var i = 0; i < features.length; i++) {
select.add(new Option(text = features[i], value = features[i]));
}
diff --git a/javascript/heatmap.js b/javascript/heatmap.js
index 4fec200..3d796ee 100644
--- a/javascript/heatmap.js
+++ b/javascript/heatmap.js
@@ -1,23 +1,29 @@
-var isHeat = false;
+// Variabler:
-var intensity = 100;
-var heat = null;
+var isHeat = false; // Parameter som sier om heatmap er på eller ikke
-function heatmap() {
- if (points != null) {
- if (isHeat && heat != null) {
- map.removeLayer(heat);
+var intensity = 100; // Intensiteten til hvert punkt i heatmap-laget
+var heat = null; // Selve laget
+
+function heatmap() { // Lager heatmap
+ if (points != null) { // MÃ¥ ha punkt
+ if (isHeat && heat != null) { // Hvis det eksisterer et heatmap ...
+ map.removeLayer(heat); // ... fjernes det
isHeat = false;
- } else {
- var data = getPoints();
- heat = L.heatLayer(data);
+ } else { // Ellers lages det et nytt
+ var data = getPoints(); // Punktene hentes på riktig format
+ heat = L.heatLayer(data); // Heatmap lages ...
isHeat = true;
- heat.addTo(map);
+ heat.addTo(map); // ... og legges til kartet
}
}
}
function getPoints() {
+ /*
+ Returnerer ny liste med punktene på formatet
+ [[breddegrad, lengdegrad, intensitet], [lat, lon, int], ...]
+ */
var data = points.toGeoJSON().features;
var heatData = [];
for (point in data) {
diff --git a/javascript/leafletLayerControl.js b/javascript/leafletLayerControl.js
index aed3966..5b8ddd5 100644
--- a/javascript/leafletLayerControl.js
+++ b/javascript/leafletLayerControl.js
@@ -1,6 +1,6 @@
// Layer control:
-var baselayers = {
+var baselayers = { // Dictionary med basiskartene (bakgrunnskart)
"OpenStreetMap": osm_map,
"Satellite": googleSat
}
@@ -38,8 +38,9 @@ function updateSidebar() {
*/
for (key in overlayMaps) {
if (!addedLayers.includes(key)) {
- addedLayers.push(key);
+ addedLayers.push(key); // Legger til kartet i oversikten
+ // Lager aktuelle knapper for funksjonalitet koblet til kartlaget:
var layerDiv = document.createElement("div");
var start = `<div id=${key + '_1'} style="position: flex; flex-grow: 3; flex-direction: row;">`;
var button = `<button id=${key} class='sidebarButton' onclick='handleLayer("${key}")'>${key}</button>`;
@@ -48,26 +49,28 @@ function updateSidebar() {
var end = '</div>';
layerDiv.innerHTML = start + button + paintB + deleteB + end;
+ // Kobler HTML-elementene sammen:
container = document.getElementById("layers");
container.appendChild(layerDiv);
}
}
}
-function deleteMapLayer(name) {
- map.removeLayer(overlayMaps[name]);
- delete overlayMaps[name];
+function deleteMapLayer(name) { // Sletter kartlaget
+ map.removeLayer(overlayMaps[name]); // Fjerner kartlaget fra kartet
+ delete overlayMaps[name]; // Fjerner kartlaget fra dictionaryen
+ // Henter og fjerner HTML-objektet fra sida:
addedLayers.splice(addedLayers.indexOf(name), 1);
var div = document.getElementById(name + '_1');
if (div) {
div.parentNode.removeChild(div);
}
- checkExampleData();
+ checkExampleData(); // Sjekker om noe av eksempeldataen fremdeles er lastet inn
}
-function checkExampleData() {
+function checkExampleData() { // Sjekker om noe av eksempeldataen er lastet inn i kartet
var count = 0;
- for (key in overlayMaps) {
+ for (key in overlayMaps) { // Sjekker alle nøklene til kartlagene med eksempeldataen
if (key == "Arealdekke") {
count += 1;
} else if (key == "Bygg_f") {
@@ -78,13 +81,14 @@ function checkExampleData() {
count += 1;
}
- if (count > 0) {
+ if (count > 0) { // Hvis ett (eller flere) lag er lastet inn gjøres det ikke noe
return;
}
}
+ // Ellers må en si ifra om at all eksempeldata er slettet ...
exampleLoaded = false;
- document.getElementById("exampleData").style.display = "block";
+ document.getElementById("exampleData").style.display = "block"; // ... og vise knappen som gjør det mulig å laste de inn på nytt
document.getElementById("layers").style.height = "52vh";
}
@@ -93,7 +97,7 @@ function handleLayer(name) { // Funksjon som viser og skjuler kartlag i kartet o
for (key in overlayMaps) {
if (key == name) {
- layer = overlayMaps[key];
+ layer = overlayMaps[key]; // Henter aktuelt kartlag
break;
}
}
@@ -102,12 +106,12 @@ function handleLayer(name) { // Funksjon som viser og skjuler kartlag i kartet o
return;
}
- if (map.hasLayer(layer)) {
- map.removeLayer(layer);
- document.getElementById(name).style.backgroundColor = "black";
+ if (map.hasLayer(layer)) { // Hvis kartlaget vises i kartet...
+ map.removeLayer(layer); // ... fjern det
+ document.getElementById(name).style.backgroundColor = "black"; // ... og endre fargen på knappen til 'Sort' = 'Ikke synlig'
} else {
- map.addLayer(layer);
- document.getElementById(name).style.backgroundColor = "green";
+ map.addLayer(layer); // Ellers, legg til kartlaget
+ document.getElementById(name).style.backgroundColor = "green"; // ... og endre fargen på knappen til 'Grønn' = 'Synlig'
}
}
diff --git a/javascript/mapChange.js b/javascript/mapChange.js
index bcb7ab1..619569d 100644
--- a/javascript/mapChange.js
+++ b/javascript/mapChange.js
@@ -22,7 +22,7 @@ function changeMap() {
document.getElementById("buttons1").style.display = "none";
document.getElementById("buttons2").style.display = "flex";
- // Endrer knappene nedrest til høyre i kartet:
+ // Endrer knappene nederst til venstre i kartet:
document.getElementById("sidebarOpener").style.display = "none";
document.getElementById("pointOpener").style.display = "block";
document.getElementById("addPointButton").style.display = "block";
@@ -32,7 +32,7 @@ function changeMap() {
var layer = overlayMaps[key];
if (map.hasLayer(layer)) {
handleLayer(key);
- layersOnMap.push(key);
+ layersOnMap.push(key); // ... og lagrer dem til senere
}
}
} else if (m == "m2") {
@@ -49,7 +49,7 @@ function changeMap() {
document.getElementById("showPoints").style.display = "none";
document.getElementById("hidePoints").style.display = "none";
- // Fjerner punkt-markørene og eventuelle voronoi- og TIN-diagram fra kartet:
+ // Fjerner punkt-markørene og eventuelle andre kartlag fra kartet:
if (isVoronoi) {
voronoi();
}
@@ -66,12 +66,10 @@ function changeMap() {
}
if (points != null) {
- if (points != null) {
- if (!map.hasLayer(points)) {
- points.addTo(map);
- }
- handleDefaultPoints();
- }
+ if (!map.hasLayer(points)) {
+ points.addTo(map);
+ }
+ handleDefaultPoints();
}
// Legger til kartlagene som lå i kartet før en byttet kartmodus:
diff --git a/javascript/openFileExplorer.js b/javascript/openFileExplorer.js
index 7b20633..a9dbe2f 100644
--- a/javascript/openFileExplorer.js
+++ b/javascript/openFileExplorer.js
@@ -7,6 +7,6 @@ function clickMe() { // Funksjonen som åpner filutforskeren
}
dialog.addEventListener('change', () => {
- // EventListner som endrer farge på html-knappen når en fil er valgt
+ // EventListner som endrer farge på HTML-knappen når en fil er valgt
document.getElementById("loadButton").style.backgroundColor = "green";
})
diff --git a/javascript/pointMap.js b/javascript/pointMap.js
index a74fc5b..04c0b82 100644
--- a/javascript/pointMap.js
+++ b/javascript/pointMap.js
@@ -1,7 +1,7 @@
// Punktene brukt i visningen av "kart 2":
-var NTNU_points = L.geoJSON(null);
+var NTNU_points = L.geoJSON(null); // Default-punkt
-fetch("javascript/exampleData/NTNU_points.geojson").then(function(response) {
+fetch("javascript/exampleData/NTNU_points.geojson").then(function(response) { // Leser default-punktene fra fil
return response.json();
}).then(function(data) {
NTNU_points.addData(data).bindPopup(function(point) {return `<b>${point.feature.properties.category}</b><br>${point.feature.properties.name}`});
@@ -14,20 +14,25 @@ var newPoint = false;
map.addEventListener('click', (event) => {
if (newPoint) {
+ /*
+ Hvis en har trykket at en vil lage et nytt punkt (newPoint = true),
+ aktiveres det funksjonalitet for å trykke i og interagere med kartet
+ */
onMapClick(event);
}
})
-function addPoint() {
- document.getElementById("addPointButton").style.color = "green";
+function addPoint() { // Legge til nye punkt
+ document.getElementById("addPointButton").style.color = "green"; // Endrer farge på knappen for å vise at det er klart
newPoint = true;
if (points != null) {
if (!map.hasLayer(points)) {
- showPoints();
+ showPoints(); // Må vise punktene som er lagd (hvis det er noen) når en skal lage et nytt
}
}
+ // Skal ikke vise andre kartlag:
if (isTIN) {
TIN();
}
@@ -39,19 +44,23 @@ function addPoint() {
}
}
-function onMapClick(e) {
- openBox("makeNewPointBox");
+function onMapClick(e) { // Håndterer interaksjon i kartet for å lage nye punkt på spesifisert sted
+ openBox("makeNewPointBox"); // Ã…pner boks for lagring av nytt punkt
document.getElementById("lengdegrader").value = e.latlng.lng;
document.getElementById("breddegrader").value = e.latlng.lat;
+ // Resetter muligheten for å lage flere nye punkt:
document.getElementById("addPointButton").style.color = "orangered";
newPoint = false;
}
-function savePoint() {
+function savePoint() { // Lagrer det nye punktet
+
+ // Sjekk av faktisk og gyldig input:
+
var regex = /^[a-zA-Z_0-9]+$/;
- if (document.getElementById("pointCategory").value == "") {
+ if (document.getElementById("pointCategory").value == "") { // Brukeren får tilbakemelding på hva som ikke fungerer / er feil
return alert("You need to choose a category!");
} else if (!document.getElementById("pointCategory").value.match(regex)) {
return alert("The category must consist of normal letters!");
@@ -61,38 +70,48 @@ function savePoint() {
return alert("The name must consist of normal letters!");
}
+ // Henter input fra brukeren:
var lon = document.getElementById("lengdegrader").value;
var lat = document.getElementById("breddegrader").value;
var category = document.getElementById("pointCategory").value;
var name = document.getElementById("pointName").value;
- if (points == null) {
- var content = {"type": "FeatureCollection", "features": []}
- var newPoint = {"type": "Feature", "geometry": {"type": "Point", "coordinates": [lon, lat]}, "properties": {"category": category, "name": name}};
- content.features.push(newPoint);
+ if (points == null) { // Hvis det ikke eksisterer punkt fra før
+ var content = {"type": "FeatureCollection", "features": []} // Lager ny FeatureCollection
+ var newPoint = {"type": "Feature", "geometry": {"type": "Point", "coordinates": [lon, lat]}, "properties": {"category": category, "name": name}}; // Lager nytt Feature
+ content.features.push(newPoint); // Legger Feature i FeatureCollection
+ // Lager punkt-laget og setter opp popup-info på samtlige:
points = L.geoJSON(content).bindPopup(function(point) {return "<b>" + point.feature.properties.category + "</b>" + "<br>" + point.feature.properties.name});
- points.addTo(map);
- pointsExists();
+ points.addTo(map); // Legger til i kartet
+ pointsExists(); // Sier ifra om at det finnes punkt i kartet
} else {
- var newPoint = {"type": "Feature", "geometry": {"type": "Point", "coordinates": [lon, lat]}, "properties": {"category": category, "name": name}};
- var content = points.toGeoJSON();
- content.features.push(newPoint);
- map.removeLayer(points);
+ var newPoint = {"type": "Feature", "geometry": {"type": "Point", "coordinates": [lon, lat]}, "properties": {"category": category, "name": name}}; // Lager nytt Feature
+ var content = points.toGeoJSON(); // Henter nåværende punkt på GeoJSON-format
+ content.features.push(newPoint); // Legger til Features i FeatureCollection sin feature-liste
+ map.removeLayer(points); // Fjerner punktlaget fra kartet
+ // Lager punktlaget på nytt med nytt punkt og popup-info på alle:
points = L.geoJSON(content).bindPopup(function(point) {return "<b>" + point.feature.properties.category + "</b>" + "<br>" + point.feature.properties.name});
- points.addTo(map);
+ points.addTo(map); // Legger til punktene i kartet igjen
}
+ // Resetter input og lukker boksen:
document.getElementById("pointCategory").value = "";
document.getElementById("pointName").value = "";
closeBox("makeNewPointBox");
}
function handleDefaultPoints() {
- if (points != null) {
- if (!map.hasLayer(points)) {
+ /*
+ Funksjon som legger til default-punktene om det ikke eksisterer noen punkt fra før,
+ eller fjerner de punktene som er lagt til i kartet hvis noen
+ */
+
+ if (points != null) { // Hvis det eksisterer punkt i punktlaget
+ if (!map.hasLayer(points)) { // ... gjøres de synlige om de ikke er vist i kartet
points.addTo(map);
}
- if (map.hasLayer(points)) {
+ if (map.hasLayer(points)) { // Hvis punktene er vist i kartet
+ // Siden gjøres om til å ikke vise punkt:
document.getElementById("examplePoints").style.display = "inline-block";
document.getElementById("loadPoints").style. display = "inline-block";
document.getElementById("savePoints").style.display = "none";
@@ -100,6 +119,7 @@ function handleDefaultPoints() {
document.getElementById("save").style.display = "none";
document.getElementById("removePoints").style.display = "none";
+ // Eventuelle lag skjules:
if (isVoronoi) {
voronoi();
}
@@ -118,8 +138,8 @@ function handleDefaultPoints() {
closeBox('loadPointsBox')
}
- } else {
- pointsExists();
+ } else { // Hvis punktlaget er tomt
+ pointsExists(); // Sier ifra til sida om at det er punkt i kartet
// Legger til alle punktene fra default-fila og setter på en popup med info-tekst:
@@ -132,36 +152,44 @@ function handleDefaultPoints() {
}
}
-function loadPoints() {
+function loadPoints() { // Funksjon som gjør det mulig å åpne filutforsker og hente en fil
document.getElementById("fileInput2").click();
}
document.getElementById("fileInput2").addEventListener("change", () => {
- var selectedFile = document.getElementById("fileInput2").files[0];
- if (selectedFile != null) {
+ /*
+ Hvis en fil velges ved å benytte loadPoints() vil denne funksjonen sørge for at filen leses og punktene vises
+ */
+
+ var selectedFile = document.getElementById("fileInput2").files[0]; // Henter fila
+
+ if (selectedFile != null) { // Det må være valgt en fil
document.getElementById("fileInput2").value = "";
+ // Leser fila:
var read = new FileReader();
read.readAsDataURL(selectedFile);
- var newLayer = L.geoJSON();
+ var newLayer = L.geoJSON(); // Initialiserer nytt kartlag
- read.onloadend = function() {
+ read.onloadend = function() { // Leser fila
fetch(read.result).then(function(response) {
return response.json();
}).then(function(data) {
for (feature in data.features) {
- if (data.features[feature].geometry.type != "Point") {
+ if (data.features[feature].geometry.type != "Point") { // Sjekker at det kun er punkt i den aktuelle fila
handleDefaultPoints();
return alert("The chosen file does not only contain points!");
}
}
+ // Nytt lag med punkt i tillegg til en tilhørende popup for hvert punkt:
newLayer.addData(data).bindPopup(function(point) {return "<b>" + point.feature.properties.category + "</b>" + "<br>" + point.feature.properties.name});
})
}
}
+ // De nye punktene legges til i kartet:
points = newLayer;
points.addTo(map);
@@ -170,6 +198,7 @@ document.getElementById("fileInput2").addEventListener("change", () => {
})
function pointsExists() {
+ // Funksjon som forteller nettsida at det eksisterer punkt som kan bli vist i kartet
document.getElementById("examplePoints").style.display = "none";
document.getElementById("loadPoints").style. display = "none";
document.getElementById("savePoints").style.display = "inline-block";
@@ -179,25 +208,30 @@ function pointsExists() {
document.getElementById("showPoints").style.display = "block";
}
-function saveToFile() {
+function saveToFile() { // Lagrer eksisterende punkt til fil som lastes ned lokalt på egen PC
+
+ // Sjekker faktisk og gyldig input:
+
var regex = /^[a-zA-Z_0-9]+$/;
- if (document.getElementById("fileName").value == "") {
+ if (document.getElementById("fileName").value == "") { // Bruker får tilbakemelding om hva som ikke fungerer / er feil
return alert("You need to choose a name!");
} else if (!document.getElementById("fileName").value.match(regex)) {
return alert("The category must consist of normal letters!");
}
- var geoJSON = points.toGeoJSON();
+ var geoJSON = points.toGeoJSON(); // Henter punktene i GeoJSON-format
var fileName = document.getElementById("fileName").value;
var file = fileName + ".geojson";
- saveAs(new File([JSON.stringify(geoJSON)], file, {
+ saveAs(new File([JSON.stringify(geoJSON)], file, { // Lagrer fila
type: "text/plain;charset=utf-8"
}), file);
- document.getElementById("fileName").value = "";
+ document.getElementById("fileName").value = ""; // Resetter input
}
+// Funksjonalitet for å vise og skjule punkt, og endre ikoner deretter:
+
function showPoints() {
if (points != null) {
points.addTo(map);
diff --git a/javascript/sidebar&boxes.js b/javascript/sidebar&boxes.js
index 0f8fb9a..835beac 100644
--- a/javascript/sidebar&boxes.js
+++ b/javascript/sidebar&boxes.js
@@ -43,6 +43,9 @@ function openBox(id) { // Ã…pner aktuell boks (id)
}
} else if (id == "unionBox") {
fillDoubleSelect("unionSelect");
+ } else if (id == "tutorialBox") {
+ setPage();
+ start();
}
document.getElementById(String(id)).style.width = "40vw";
@@ -54,6 +57,9 @@ function openBox(id) { // Ã…pner aktuell boks (id)
}
function closeBox(id) { // Lukker aktuell boks og justerer siden motsatt av hva openBox gjør
+ if (id == "tutorialBox") {
+ page = 0;
+ }
document.getElementById(String(id)).style.width = "0vw";
document.getElementById(String(id)).style.height = "0vh";
document.getElementById(String(id)).style.borderWidth = "0px";
@@ -64,7 +70,7 @@ function closeBox(id) { // Lukker aktuell boks og justerer siden motsatt av hva
// Fyller select i de ulike boksene med alternativ:
-function isPolygon(layer) {
+function isPolygon(layer) { // Funksjon som sjekker om et kartlag består av polygoner
var objects = layer["features"];
for (o of objects) {
if (o["geometry"]["type"] == "Polygon") {
@@ -80,16 +86,18 @@ function fillSelect(id) {
select.add(new Option(text="- - -"));
for (key in overlayMaps) {
+ // Bokser som tollererer alle typer objekt:
if (id == "bufferSelect" || id == "extractSelect") {
select.add(new Option(text = key, value = key));
}
+ // Bokser som kun godkjenner polygon:
else if (isPolygon(overlayMaps[key].toGeoJSON())) {
select.add(new Option(text = key, value = key));
}
}
}
-function fillDoubleSelect(id) {
+function fillDoubleSelect(id) { // For de boksene som har to select-element i seg
var select1 = document.getElementById(id + "_1");
var select2 = document.getElementById(id + "_2");
select1.innerHTML = "";
@@ -98,7 +106,7 @@ function fillDoubleSelect(id) {
select2.add(new Option(text="- - -"));
for (key in overlayMaps) {
- if (isPolygon(overlayMaps[key].toGeoJSON())) {
+ if (isPolygon(overlayMaps[key].toGeoJSON())) { // Sjekker at det er polygon
select1.add(new Option(text = key, value = key));
select2.add(new Option(text = key, value = key));
}
diff --git a/javascript/suitability.js b/javascript/suitability.js
index 8e7fa27..1fe0bf0 100644
--- a/javascript/suitability.js
+++ b/javascript/suitability.js
@@ -1,21 +1,22 @@
-function addPrioritizedLayer() {
+function addPrioritizedLayer() { // Funskjon som legger til flere kartlag i alternativene
+ // Lager nytt HTML-objekt:
var newPriority = document.createElement("div");
- var numb = document.getElementById("priorityDiv").childElementCount + 1;
+ var numb = document.getElementById("priorityDiv").childElementCount + 1; // Nummereres i forhold til hvor mange element som er lagt til
var start =`<div id="div${numb}" style="display: flex; flex-grow: 2; flex-direction: row; justify-content: center; margin-top: 1vh;">`;
- var newSelect = `<select id="priority${numb.toString()}"></select>`;
+ var newSelect = `<select id="priority${numb.toString()}" class="input_standard"></select>`;
var newButton = `<svg onclick="removePrioritizedLayer(${numb})" style="cursor: pointer; margin-left: 1vw;" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16"> <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5"/> </svg>`;
var end = '</div>'
- newPriority.innerHTML = start + newSelect + newButton + end;
+ newPriority.innerHTML = start + newSelect + newButton + end; // Fullstendig element, riktig nummerert med select-element og slette-knapp
- document.getElementById("priorityDiv").appendChild(newPriority);
+ document.getElementById("priorityDiv").appendChild(newPriority); // Legger til det nye elementet
fillSelect("priority" + numb.toString());
}
-function removePrioritizedLayer(numb) {
+function removePrioritizedLayer(numb) { // Funksjon som fjerner kartlag lagt til i alternativene
var count = document.getElementById("priorityDiv").childElementCount;
- if (numb == count) {
+ if (numb == count) { // Er det siste element, slettes det bare
document.getElementById("priorityDiv").removeChild(document.getElementById("div" + numb.toString()).parentElement);
- } else {
+ } else { // Ellers må en slette slik at de andre elementene bevares samtidig som nummereringen bevares uten hull
for (var i=numb; i<count; i++) {
document.getElementById("priority" + i.toString()).value = document.getElementById("priority" + (i+1).toString()).value;
}
@@ -23,10 +24,13 @@ function removePrioritizedLayer(numb) {
}
}
-function suitability() {
- // Sjekker at det er gitt inn navn:
+function suitability() { // Faktisk egnethetsanalyse
+
+ // Sjekker faktisk og gyldig input:
+
var regex = /^[a-zA-Z_0-9]+$/;
- if (!document.getElementById("suitabilityName").value) {
+
+ if (!document.getElementById("suitabilityName").value) { // Bruker får tilbakemelding om hva som ikke fungerer / er feil
return alert("You need to choose a name for the new layer!");
} else if (!document.getElementById("suitabilityName").value.match(regex)) {
return alert("The new name must consist of normal letters!");
@@ -58,25 +62,25 @@ function suitability() {
var newLayers = [];
for (var i = 0; i < priEl.length; i++) {
- if (priEl[i].length == 1) {
+ if (priEl[i].length == 1) { // Hvis aktuell kombinasjon kun har ett lag i seg
var a = getMapLayer(priEl[i][0]);
if (a == null) {
return alert("You need to choose all layers!");
}
newLayers.push(a);
- } else {
- var a = getMapLayer(priEl[i][0]);
+ } else { // Hvis det er flere
+ var a = getMapLayer(priEl[i][0]); // Henter det første laget
if (a == null) {
return alert("You need to choose all layers!");
}
- var newLayer = featureCollectionToMultiPolygon(a);
- for (var j = 1; j < priEl[i].length; j++) {
+ var newLayer = featureCollectionToMultiPolygon(a); // Endelig lag som skal lages
+ for (var j = 1; j < priEl[i].length; j++) { // Henter alle andre lag i kombinasjonen
var b = getMapLayer(priEl[i][j]);
if (b == null) {
return alert("You need to choose all layers!");
}
var layer = featureCollectionToMultiPolygon(b);
- newLayer = turf.intersect(newLayer, layer);
+ newLayer = turf.intersect(newLayer, layer); // ... og beregner snitt for å finne den delen der alle lagene overlapper
}
newLayers.push(newLayer);
}
@@ -101,7 +105,7 @@ function suitability() {
b = featureCollectionToMultiPolygon(b);
}
- newLayers[i] = turf.difference(a, b);
+ newLayers[i] = turf.difference(a, b); // Laget med høyest prioritet bevares, mens det med lavere slettes bort
}
}
@@ -114,12 +118,16 @@ function suitability() {
}
}
- // Legger til de nye lagene som har innhold i kartet:
+ /*
+ Legger til de nye lagene som har innhold i kartet:
- // Karakteristiske farger for lagene:
- // Rødt: "rgb(255,0,0)" Grønt: "rgb(0,255,0)"
+ Karakteristiske farger for lagene:
+ Rødt: "rgb(255,0,0)", Gult: "rgb(255,255,0)" Grønt: "rgb(0,255,0)"
+
+ De ulike lagene legges til i gradert farge fra Rødt (dårligst) - Gult - Grønt (best)
+ */
- var intervall = 255 / (newLayers.length - 1);
+ var intervall = 255 / (newLayers.length - 1) * 2;
var r = 0;
var g = 255;
@@ -130,13 +138,18 @@ function suitability() {
var name = categoryName + (i+1).toString();
var newLayer = L.geoJSON(newLayers[i], {style: {color: "rgb(" + r.toString() + "," + g.toString() + ",0)"}});
- r += intervall;
- g += -intervall;
+ if (r < 255) {
+ r += intervall;
+ }
+ if (r >= 255) {
+ g += -intervall;
+ }
overlayMaps[name] = newLayer;
updateSidebar();
handleLayer(name);
}
+ // Resetter input:
document.getElementById("suitabilityName").value = "";
for (var i = 2; i <= numb; i++) {
removePrioritizedLayer(i);
@@ -145,6 +158,10 @@ function suitability() {
}
function getCombinations(valuesArray) {
+ /*
+ Returnerer alle kombinasjoner av elementene i input-lista
+ Lista [1, 2, 3] vil resultere i [[1], [2], [3], [1, 2], [1, 3], [2, 3], [1, 2, 3]]
+ */
var combi = [];
var temp = [];
var slent = Math.pow(2, valuesArray.length);
@@ -162,11 +179,10 @@ function getCombinations(valuesArray) {
}
combi.sort((a, b) => b.length - a.length);
- //console.log(combi.join("\n"));
return combi;
}
-function getScores(numb, list) {
+function getScores(numb, list) { // Beregner scoren til hver kombinasjon fra 'getCombinations(valuesArray)' basert på brukers prioritering
var scores = {};
for (var i = 0; i < list.length; i++) {
var score = 0;
@@ -178,7 +194,7 @@ function getScores(numb, list) {
return scores;
}
-function insertionSort(list, dict) {
+function insertionSort(list, dict) { // Sorterer lista basert på score i dictionary
sorted = [list[0]]
for (var i = 1; i < list.length; i++) {
if (dict[list[i]] < dict[sorted[sorted.length - 1]]) {
@@ -199,7 +215,7 @@ function insertionSort(list, dict) {
return sorted;
}
-function getMapLayer(string) {
+function getMapLayer(string) { // Funksjon som returnerer valgt kartlags
var input = document.getElementById(string).value;
if (input == "- - -") {
return null;
diff --git a/javascript/tutorial.js b/javascript/tutorial.js
index 871915d..726b0e6 100644
--- a/javascript/tutorial.js
+++ b/javascript/tutorial.js
@@ -1,22 +1,26 @@
// Legger inn de ulike tekstene her:
-var general = "<b>General information</b><br>Welcome to ProgGIS!<br>Here you can play around with GIS functions and get to know how they works on geographic data.<br>Just remember the fact that if you <b>refresh</b> the website you also <b>reset</b> all the data layers!";
-var pin = "<b>Pins and diagram functions</b><br>If you press the pin-map button down to the left you restyle the webpage to a new map with some default pins. This is just an example page where you can see how voronoi and TIN diagrams look like.<br>You can go back and forth to this map without loosing information on the other map.";
-var layer = "<b>Map layers</b><br>Press the plus button down to the left to open the sidebar where you can see all the data layers on the map.<br>Here you have two choices: You can add your own data, or you can add some pre-defined data to the map.<br>Once the layers are added you cannot delete them without resetting the whole website.<br>You can turn on and off each layer with their buttons and the visibility will be shown with color.";
+var general = "<b>General information</b><br>Welcome to ProgGIS!<br>This is a webpage where you can play around with GIS functions and get to know how they work on geographic data.<br>Just remember the fact that if you <b>refresh</b> the website you also <b>reset</b> all the data layers!";
+var pin = "<b>Pins and diagram functions</b><br>If you press the pin-map button down to the left you restyle the webpage to a new map that handles point markers. On this page you can work with markers and see how TIN and voronoi diagrams are build. It is also possible to make heatmaps with the buttons in the header.<br>You can hide the markers by pressing the eye symbol down to the left.<br>Going back and forth to this map has no effect on the map layers on the other map. On the other hand, your point data, will unfortunately be deleted if you do not save it to a file first (see next page).";
+var pinFiles = "<b>Loading points</b><br>The webpage is provided with some default points. Press the plus button down to the left and a box appears. There are two possible options in this window: (1) import the default points, or (2) import your own file. Only one file can be added.<br>When the file is loaded, the points will appear in the map. Now, the same plus symbol will open a box where you can save your points locally to file or just remove the points and get back to start.<br>If you want your own points, press the other, not filled pin button and it will become green. You can now press a location in the map, and a new box pops up. Here you choose category and name to the point, and press 'Save point'. The new point will then be added to the map.";
+var layer = "<b>Map layers</b><br>Press the plus button down to the left to open the sidebar where you can see all the data layers on the map.<br>From here there are two choices: (1) add your own data, or (2) add some pre-defined data to the map.<br>You can turn on and off each layer with their buttons and the visibility will be shown with color. The layers can be deleted by pressing the trash can next to the layer. If you want to change the color of the layer you can press the palette and a color palette appears.";
var userLayer = "<b>Adding your own layers</b><br>If you want to add your own data you need geographical information stored on geojson file format. Here is a method to get such files for data from Norway:<br>Go to <b>geonorge.no</b> and download the datasets that you want in <b>SOSI format</b>. Then use <b>Sosi2Shape</b> to convert the datasets from SOSI to <b>shape</b>. Then you can open the shapefiles in <b>QGIS</b> and export the layers as <b>geojson files</b>. Here it is necessary that you set the <b>CRS</b> to latitude and longditude with <b>CRS: 4326</b>. Just remember to set the <b>original</b> reference system in QGIS first.<br>Once this is done you are ready to send it into ProgGIS!<br> Press the 'new layer'-button which opens the file explorer and select the desired file so that the button becomes green. Now you can press the '+'-button and the layer will be added to the map.";
-var buffer = "<b>Buffer</b><br>Here you mark an area around a layer with a given distance.<br>You need to choose a layer you want to make the buffer around, set the buffer distance and choose a name for the new buffer.<br>All values must pass the validation before the buffer is made.<br>If you want to merge overlapping features, press the checkbox for dissolve.<br>The buffer is made when you press 'Make buffer'.";
-var difference = "<b>Difference</b><br>Here you erase the area of one layer from another layer.<br>First do you choose the layer you want to remove areas from. Then you choose the layer with the areas that are going to be deleted from the first one.<br>When you have chosen the two layers and given a valid layer name, you can press 'Make difference'.";
-var dissolve = "<b>Dissolve</b><br>Here you merge overlapping features in a layer to a bigger, common feature.<br>The two things you have to do here is to chose the layer you will dissolve and give a valid layer name. When that is done, you can press 'Dissolve'.";
-var extract = "<b>Extract</b><br>Here you extract one type of features from a layer into a new, separate layer.<br>First you choose the layer you want to extract features from. Then you choose which attribute you want to filter on, and last but not least the value the features must have on the given attribute.<br>Then you can set a valid layer name and press 'Extract'.";
-var intersection = "<b>Intersection</b><br>Here you make a new layer that contains the overlapping areas of the input layers - the intersection.<br>Choose the two layers you want to intersect, and give a valid layer name. Then you can press 'Intersect'.";
-var union = "<b>Union</b><br>Here you make a new layer that contains all the areas that the two input layers cover - the union.<br>Choose the two layers you want to make an union of, and give a valid layer name. Then you can press 'Make union'.";
+var buffer = "<b>Buffer</b><br>This function marks an area around a layer with a given distance.<br>You need to choose a layer to make the buffer around, set the buffer distance and choose a name for the new buffer.<br>All values must pass the validation before the buffer is made.<br>If you want to merge overlapping features, press the checkbox for dissolve.<br>The buffer is made when you press 'Make buffer'.";
+var difference = "<b>Difference</b><br>With this function can you erase areas of one layer from another layer.<br>First you choose the layer you want to remove areas from. Then you choose the layer with the areas that are going to be deleted from the first one.<br>When you have chosen the two layers and given the new layer a valid name, you can press 'Make difference'.";
+var dissolve = "<b>Dissolve</b><br>If you want to merge overlapping features in a layer to a bigger, common feature you can use this method.<br>The two things you have to do here is to choose the layer you will dissolve and give a valid layer name. When that is done, you can press 'Dissolve'.";
+var extract = "<b>Extract</b><br>With this function you can extract one type of feature from a layer into a new, separate layer.<br>First you choose the layer you want to extract features from. Then you choose which attribute you want to filter on, and last but not least the value the features must have on the given attribute.<br>Then you set a valid layer name and press 'Extract'.";
+var intersection = "<b>Intersection</b><br>This function makes a new layer that contains the overlapping areas of the input layers - the intersection.<br>Choose the two layers you want to intersect, and give a valid layer name. Then you press 'Intersect'.";
+var suitability = "<b>Suitability</b><br>The suitability function makes a list of prioritized map layers covering suitable areas depending on other data layers prioritized by the user.<br>Before you use this function you need all the map layers you will use in the analyze. Here it is important to know that this method only count map layers as positive. If there are some areas that absolutely need to be avoided, they must be excluded from all map layers in the input with difference before the analyse starts.<br>Next, you press the pluss sign so that you have enough input fields corresponding to the number of map layers. If you get too many, it is possible to delete elements by pressing the trash cans. You prioritize the layers by setting the most important one in the first field, and the less important further under.<br>When all the layers are added, you choose a valid category name and press 'Calculate suitable areas'.";
+var union = "<b>Union</b><br>With this method you make a new layer that contains all the areas that the two input layers cover - the union.<br>Choose the two layers you want to make an union of, and give a valid layer name before you press 'Make union'.";
-var tutorial = [general, pin, layer, userLayer, buffer, difference, dissolve, extract, intersection, union];
+var tutorial = [general, pin, pinFiles, layer, userLayer, buffer, difference, dissolve, extract, intersection, suitability, union];
// Teller som holder styr på hvilken side en er på
var page = 0;
-document.getElementById("tutorial").innerHTML = tutorial[page]; // Setter tekst til tekstboksen i tutlorial-boksen
+function start() {
+ document.getElementById("tutorial").innerHTML = tutorial[page]; // Setter tekst til tekstboksen i tutlorial-boksen når den åpnes
+}
// Funksjoner som justerer innholdet i tutorial-boksen avhengig av hvilken side en er på
@@ -25,6 +29,7 @@ function nextPage() {
if (page == tutorial.length) {
page = 0;
}
+ setPage();
document.getElementById("tutorial").innerHTML = tutorial[page];
}
@@ -33,5 +38,10 @@ function previousPage() {
if (page == -1) {
page = tutorial.length - 1;
}
+ setPage();
document.getElementById("tutorial").innerHTML = tutorial[page];
-}
\ No newline at end of file
+}
+
+function setPage() { // Justerer sidetallet
+ document.getElementById("page").innerHTML = (page + 1).toString() + " / " + tutorial.length.toString();
+}
diff --git a/javascript/voronoi.js b/javascript/voronoi.js
index df39829..e48b8e1 100644
--- a/javascript/voronoi.js
+++ b/javascript/voronoi.js
@@ -31,6 +31,9 @@ function voronoi() { // Skrur av og på voronoi-diagrammet i kartet
}
function findMinMax() {
+
+ // Funksjon som finner hjørnekoordinatene til avgrensningene av voronoi-diagrammet
+
var [minlon, minlat, maxlon, maxlat] = [99, 99, -99, -99];
for (feature in points.toGeoJSON().features) {
@@ -47,5 +50,5 @@ function findMinMax() {
maxlat = points.toGeoJSON().features[feature].geometry.coordinates[1];
}
}
- return [minlon - 0.5, minlat - 0.5, maxlon + 0.5, maxlat + 0.5];
+ return [minlon - 0.01, minlat - 0.01, maxlon + 0.01, maxlat + 0.01];
}
--
GitLab