diff --git a/README.md b/README.md
index a877f401a94e059c3476ccd5472a11e40ef1dca2..1637950d0216ea6290683ce1c8f34a487c574b13 100644
--- a/README.md
+++ b/README.md
@@ -1,92 +1,48 @@
# ProgGis
+## Hva er 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.
-## Getting started
+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!
-To make it easy for you to get started with GitLab, here's a list of recommended next steps.
+## Hvordan fungerer det?
-Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
+Plattformen nås via lenken: https://jshjelse.pages.stud.idi.ntnu.no/proggis/
-## Add your files
+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:
-- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
-- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
+- [] Buffer
+- [] Difference
+- [] Dissolve
+- [] Extract
+- [] Intersection
+- [] Union
-```
-cd existing_repo
-git remote add origin https://gitlab.stud.idi.ntnu.no/jshjelse/proggis.git
-git branch -M main
-git push -uf origin main
-```
+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.
-## Integrate with your tools
+### Data
-- [ ] [Set up project integrations](https://gitlab.stud.idi.ntnu.no/jshjelse/proggis/-/settings/integrations)
+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.
-## Collaborate with your team
+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:
-- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
-- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
-- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
-- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
-- [ ] [Set auto-merge](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
+- [] 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
-## Test and Deploy
+Filen du nå får kan legges inn i ProgGIS via legg til-knappene i sidebaren.
-Use the built-in continuous integration in GitLab.
+## Eventuelt
-- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
-- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
-- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
-- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
-- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
+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.
-***
+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.
-# Editing this README
+##
-When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thank you to [makeareadme.com](https://www.makeareadme.com/) for this template.
+Så da ønsker jeg bare god fornøyelse, og lykke til!
-## Suggestions for a good README
-Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
-
-## Name
-Choose a self-explaining name for your project.
-
-## Description
-Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
-
-## Badges
-On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
-
-## Visuals
-Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
-
-## Installation
-Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
-
-## Usage
-Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
-
-## Support
-Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
-
-## Roadmap
-If you have ideas for releases in the future, it is a good idea to list them in the README.
-
-## Contributing
-State if you are open to contributions and what your requirements are for accepting them.
-
-For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
-
-You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
-
-## Authors and acknowledgment
-Show your appreciation to those who have contributed to the project.
-
-## License
-For open source projects, say how it is licensed.
-
-## Project status
-If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
+Jakob S. S. Hjelseth
diff --git a/css/style.css b/css/style.css
index a6d732296fb5063e730acc6254712c6d2d60e09a..44de507117b0fb71077d421d6e6b16e9434fd276 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,4 +1,6 @@
-/* Styling of the website */
+/*
+Justere utseende til nettsiden
+*/
.standard {
font-family: monospace;
diff --git a/index.html b/index.html
index 46f687c05876b8624cc561c5c395a72bf4469f4d..a81ee052a618e1ecca39627799734ca4c6966991 100644
--- a/index.html
+++ b/index.html
@@ -159,7 +159,7 @@
<p>Choose a layer to extract features from:</p>
<select id="extractSelect"></select>
- <p>Which feature will you extract to a new layer:</p>
+ <p>Which attribute will you extract to a new layer:</p>
<select id="featureSelect"></select>
<p>Which value will you sort out:</p>
diff --git a/javascript/buffer.js b/javascript/buffer.js
index 48cae5b652517fcade69dac365b7d5237e483474..f1378859efa67c6c3499255d81d1a26c56012995 100644
--- a/javascript/buffer.js
+++ b/javascript/buffer.js
@@ -10,7 +10,7 @@ function makeBuffer() {
var regex_1 = /^[0-9]+$/;
var regex_2 = /^[a-zA-Z_0-9]+$/;
- if (document.getElementById("bufferSelect").value == "- - -") {
+ if (document.getElementById("bufferSelect").value == "- - -") { // Brukeren får tilbakemelding på hva som ikke fungerer / er feil
return alert("You need to choose a layer!");
} else if (!document.getElementById("bufferDistance").value) {
return alert("You need to set a distance as an integer!");
@@ -24,33 +24,32 @@ function makeBuffer() {
return alert("Choose another name! There exists already a layer with that name.")
}
+ // Henter input fra brukeren:
+
var input = document.getElementById("bufferSelect").value;
var layer = overlayMaps[input].toGeoJSON();
var distance = parseFloat(document.getElementById("bufferDistance").value);
var name = document.getElementById("bufferName").value;
+ // Prøver å kjøre buffer-funksjonen:
try {
- var buffer = turf.buffer(layer, distance, {units: "meters"});
+ var buffer = turf.buffer(layer, distance, {units: "meters"}); // Lager buffer
- /*
- Funker ikke for 'Samferdsel'-laget med buffer-distanse mellom 68 og 101 meter.
- */
-
- if (document.getElementById("bufferCheck").checked) {
+ if (document.getElementById("bufferCheck").checked) { // Om en har huket av for at en skal 'dissolve' gjøres det
var dissolved = turf.dissolve(buffer);
var newLayer = L.geoJSON(dissolved, {style: getStyle()});
- } else {
+ } else { // Ellers lager den bare mange ulike buffer-soner
var newLayer = L.geoJSON(buffer, {style: getStyle()});
}
- overlayMaps[name] = newLayer;
+ overlayMaps[name] = newLayer; // Det nye laget legges til i dictionarien med alle kartlagene
- updateSidebar();
- handleLayer(name);
- document.getElementById("bufferDistance").value = "";
+ updateSidebar(); // Oppdaterer sidebaren
+ handleLayer(name); // Viser laget i kartet
+ document.getElementById("bufferDistance").value = ""; // Tilbakestiller input-feltene fra brukeren
document.getElementById("bufferName").value = "";
fillSelect("bufferSelect");
- } catch(failure) {
+ } catch(failure) { // Hvis det ikke går å lage buffer, sendes det en feilmelding
alert(failure);
}
}
diff --git a/javascript/colors.js b/javascript/colors.js
index 84736bd4393eef9b79cdb56dd9806a9db3fbe45b..ab61b1175d6d48295b830f6d3663e6c2d62d8dea 100644
--- a/javascript/colors.js
+++ b/javascript/colors.js
@@ -16,6 +16,8 @@ function getStyle() {
"color": colors[count]
};
+ // Lagene får bare en tilfeldig farge basert på telleren og fargene i listen over
+
count++;
if (count == colors.length) {
count = 0;
diff --git a/javascript/difference.js b/javascript/difference.js
index 100604d8b58aae386ea9300cfa346920982ee877..c70a72bba26f499e56eb1f79c7205445dade3b9f 100644
--- a/javascript/difference.js
+++ b/javascript/difference.js
@@ -4,7 +4,7 @@ function makeDifference() {
var regex = /^[a-zA-Z_0-9]+$/;
- if (document.getElementById("differenceSelect_1").value == "- - -") {
+ if (document.getElementById("differenceSelect_1").value == "- - -") { // Brukeren får tilbakemelding på hva som ikke fungerer / er feil
return alert("You need to choose the first layer!");
} else if (document.getElementById("differenceSelect_2").value == "- - -") {
return alert("You need to choose the second layer!");
@@ -18,6 +18,8 @@ function makeDifference() {
return alert("Choose another name! There exists already a layer with that name.")
}
+ // Henter input fra brukeren:
+
var input1 = document.getElementById("differenceSelect_1").value;
var layer1 = overlayMaps[input1].toGeoJSON();
var input2 = document.getElementById("differenceSelect_2").value;
@@ -28,22 +30,23 @@ function makeDifference() {
var multiPolygon1 = featureCollectionToMultiPolygon(layer1);
var multiPolygon2 = featureCollectionToMultiPolygon(layer2);
+ // Prøver å kjøre difference-funksjonen:
try {
- var difference = turf.difference(multiPolygon1, multiPolygon2);
+ var difference = turf.difference(multiPolygon1, multiPolygon2); // Lager difference
if (isMultiPolygon(difference)) {
- difference = multiPolygonToFeatureCollection(difference);
+ difference = multiPolygonToFeatureCollection(difference); // Gjør om tilbake fra multiPolygon til featureCollection
}
var newLayer = L.geoJSON(difference, {style: getStyle()});
- overlayMaps[name] = newLayer;
+ overlayMaps[name] = newLayer; // Det nye laget legges til i dictionarien med alle kartlagene
- updateSidebar();
- handleLayer(name);
- document.getElementById("differenceName").value = "";
+ updateSidebar(); // Oppdaterer sidebaren
+ handleLayer(name); // Viser laget i kartet
+ document.getElementById("differenceName").value = ""; // Tilbakestiller input-feltene fra brukeren
fillDoubleSelect("differenceSelect");
- } catch(failure) {
+ } catch(failure) { // Hvis det ikke går å lage difference, sendes det en feilmelding
alert(failure);
}
}
diff --git a/javascript/dissolve.js b/javascript/dissolve.js
index 8e5c186ab47d73eedfa713e24755af1be9dcbd45..bd453b3c5319e7c1f1b3cee5fc0557b50437d100 100644
--- a/javascript/dissolve.js
+++ b/javascript/dissolve.js
@@ -4,7 +4,7 @@ function doDissolve() {
var regex = /^[a-zA-Z_0-9]+$/;
- if (document.getElementById("dissolveSelect").value == "- - -") {
+ if (document.getElementById("dissolveSelect").value == "- - -") { // Brukeren får tilbakemelding på hva som ikke fungerer / er feil
return alert("You need to choose a layer!");
} else if (!document.getElementById("dissolveName").value) {
return alert("You need to choose a name for the new layer!");
@@ -13,23 +13,26 @@ function doDissolve() {
} else if (doLayerExist(document.getElementById("dissolveName").value)) {
return alert("Choose another name! There exists already a layer with that name.")
}
+
+ // Henter input fra brukeren:
var input = document.getElementById("dissolveSelect").value;
var layer = overlayMaps[input].toGeoJSON();
var name = document.getElementById("dissolveName").value;
+ // Prøver å kjøre dissolve-funksjonen:
try {
- var dissolved = turf.dissolve(layer);
+ var dissolved = turf.dissolve(layer); // Kjører dissolve
var newLayer = L.geoJSON(dissolved, {style: getStyle()});
- overlayMaps[name] = newLayer;
+ overlayMaps[name] = newLayer; // Det nye laget legges til i dictionarien med alle kartlagene
- updateSidebar();
- handleLayer(name);
- document.getElementById("dissolveSelect").value = "";
+ updateSidebar(); // Oppdaterer sidebaren
+ handleLayer(name); // Viser laget i kartet
+ document.getElementById("dissolveSelect").value = ""; // Tilbakestiller input-feltene fra brukeren
document.getElementById("dissolveName").value = "";
fillSelect("dissolveSelect");
- } catch(failure) {
+ } catch(failure) { // Hvis det ikke går å dissolve, sendes det en feilmelding
alert(failure);
}
}
diff --git a/javascript/extract.js b/javascript/extract.js
index d06c6c5f97ef2632d849d3882f558ac57a21d655..b42077b07a198f8fd07c34d60b7ce29a17818812 100644
--- a/javascript/extract.js
+++ b/javascript/extract.js
@@ -1,11 +1,16 @@
+/*
+Her er det først to addEventListener-funksjoner som oppdaterer de ulike select-elementene i html-siden
+avhengig av hva brukeren velger av verdier på select-elementene tidligere i prosedyren.
+*/
+
document.getElementById("extractSelect").addEventListener("change", () => {
var input = document.getElementById("extractSelect").value;
- if (input == "- - -") {
+ if (input == "- - -") { // Om det ikke er valgt noen spesifikk verdi, skal ikke det neste select-elementet fylles med noe
var select = document.getElementById("featureSelect");
select.innerHTML = "";
select.add(new Option(text="- - -"));
- } else {
+ } else { // Er det valgt noe, fylles neste med tilhørende verdier
var layer = overlayMaps[input].toGeoJSON();
var features = [];
@@ -31,11 +36,11 @@ document.getElementById("extractSelect").addEventListener("change", () => {
document.getElementById("featureSelect").addEventListener("change", () => {
var input = document.getElementById("extractSelect").value;
- if (input == "- - -") {
+ if (input == "- - -") { // Om det ikke er valgt noen spesifikk verdi, skal ikke det neste select-elementet fylles med noe
var select = document.getElementById("valueSelect");
select.innerHTML = "";
select.add(new Option(text="- - -"));
- } else {
+ } else { // Er det valgt noe, fylles neste med tilhørende verdier
var layer = overlayMaps[input].toGeoJSON();
var property = document.getElementById("featureSelect").value;
@@ -63,7 +68,7 @@ function doExtract() {
var regex = /^[a-zA-Z_0-9]+$/;
- if (document.getElementById("extractSelect").value == "- - -") {
+ if (document.getElementById("extractSelect").value == "- - -") { // Brukeren får tilbakemelding på hva som ikke fungerer / er feil
return alert("You need to choose a layer!");
} else if (document.getElementById("featureSelect").value == "- - -") {
return alert("You need to choose a feature!");
@@ -77,6 +82,8 @@ function doExtract() {
return alert("Choose another name! There exists already a layer with that name.")
}
+ // Henter input fra brukeren:
+
var input = document.getElementById("extractSelect").value;
var layer = overlayMaps[input].toGeoJSON();
var property = document.getElementById("featureSelect").value;
@@ -85,27 +92,29 @@ function doExtract() {
var extracted = [];
+ // Prøver å kjøre extract-funksjonen:
try {
- for (element in layer["features"]) {
+ for (element in layer["features"]) { // Henter alle elementer i kartlaget med attributtverdier som matcher brukers input
if (layer["features"][element]["properties"][property] == value) {
extracted.push(layer["features"][element]);
}
}
- var extract = turf.featureCollection(extracted);
+ var extract = turf.featureCollection(extracted); // Lager nytt featureCollection-element av de utvalgte elementene
var newLayer = new L.GeoJSON(extract, {style: getStyle()});
- overlayMaps[name] = newLayer;
+ overlayMaps[name] = newLayer; // Det nye laget legges til i dictionarien med alle kartlagene
- updateSidebar();
- handleLayer(name);
- document.getElementById("extractName").value = "";
+ updateSidebar(); // Oppdaterer sidebaren
+ handleLayer(name); // Viser laget i kartet
+ document.getElementById("extractName").value = ""; // Tilbakestiller input-feltene fra brukeren
resetInput();
- } catch(failure) {
+ } catch(failure) { // Hvis det ikke går å kjøre extraction, sendes det en feilmelding
alert(failure);
}
}
+// Funksjon for å resette brukerens input:
function resetInput() {
fillSelect("extractSelect");
diff --git a/javascript/fileHandler.js b/javascript/fileHandler.js
index 29bfda322076feb3a4e6adbf97ca660a84bf4b40..570312689df5e2801997e095af86f2f4de7a2dab 100644
--- a/javascript/fileHandler.js
+++ b/javascript/fileHandler.js
@@ -1,29 +1,38 @@
+/*
+Her håndteres alle filene brukeren sender inn til nettsiden før de vises i kartet, med mindre
+funksjonen finner feil og kaster feilmelding.
+*/
+
function handleFile() {
+ // Henter input fra brukeren:
+
const fileHandler = document.getElementById('fileInput');
const selectedFile = fileHandler.files[0];
- if (selectedFile == null) {
+ if (selectedFile == null) { // Brukeren må ha valgt en faktisk fil
return alert("No chosen file!");
}
+ // Resetter input-knappen på nettsiden:
fileHandler.value = "";
document.getElementById("loadButton").style.backgroundColor = "orangered";
+ // Lager FileReader som kan lese filer:
var read = new FileReader();
read.readAsDataURL(selectedFile);
- var newLayer = L.geoJSON(null, {style: getStyle()});
+ var newLayer = L.geoJSON(null, {style: getStyle()}); // Initialiserer nytt element
- var info = null;
+ var info = null; // Info om type input-fil
- read.onloadend = function() {
+ read.onloadend = function() { // Leser input-fila og behandler dataen fra output
fetch(read.result).then(function(response) {
return response.json();
}).then(function(data) {
info = isInputMultiPolygon(data);
- if (info[0]) {
+ if (info[0]) { // Hvis geo-dataen inneholder MultiPolygons eller MultiLineStrings må disse endres til Polygons og LineStrings
if (info[1] == "P") {
data = inputMultiPolygon(data);
} else if (info[1] == "L") {
@@ -31,13 +40,13 @@ function handleFile() {
}
}
- newLayer.addData(data);
+ newLayer.addData(data); // Lagrer geo-dataen til leaflet-laget
})
}
- if (doLayerExist(selectedFile.name)) {
- return alert("This layer is already added to the map!");
- } else {
+ if (doLayerExist(selectedFile.name)) { // Sjekker om filen er lagt til allerede
+ return alert("This layer is already added to the map!"); // ... og kaster feilmelding hvis den er det,
+ } else { // ... eller legger til laget i kartet hvis det er et nytt lag
overlayMaps[selectedFile.name] = newLayer;
updateSidebar();
diff --git a/javascript/geoJSON.js b/javascript/geoJSON.js
index fd9b0ffb4a2a1968cf928a36ac35c8c94540e7bc..1825b7093ba5f3f53237d4dcac04f117b4e35c19 100644
--- a/javascript/geoJSON.js
+++ b/javascript/geoJSON.js
@@ -5,6 +5,8 @@ Det fungerer ikke å lese fra fil ved å kun kjøre html-filen lokalt
Har derfor brukt litt eksempeldata fra koden
*/
+// Her lages leaflet-lagene ved å hente geo-data fra egne geojson-filer
+
var Arealdekke = L.geoJSON(null, {style: getStyle()});
var Bygg_f = L.geoJSON(null, {style: getStyle()});
var Bygg_l = L.geoJSON(null, {style: getStyle()});
diff --git a/javascript/intersect.js b/javascript/intersect.js
index 35b009ea8f25ade7f9251af2e12efce377959063..72f094b297c73a8f5a0cdd86559915b98a3d1b5d 100644
--- a/javascript/intersect.js
+++ b/javascript/intersect.js
@@ -4,7 +4,7 @@ function makeIntersection() {
var regex = /^[a-zA-Z_0-9]+$/;
- if (document.getElementById("intersectionSelect_1").value == "- - -") {
+ if (document.getElementById("intersectionSelect_1").value == "- - -") { // Brukeren får tilbakemelding på hva som ikke fungerer / er feil
return alert("You need to choose the first layer!");
} else if (document.getElementById("intersectionSelect_2").value == "- - -") {
return alert("You need to choose the secondt layer!");
@@ -18,6 +18,8 @@ function makeIntersection() {
return alert("Choose another name! There exists already a layer with that name.")
}
+ // Henter input fra brukeren:
+
var input1 = document.getElementById("intersectionSelect_1").value;
var layer1 = overlayMaps[input1].toGeoJSON();
var input2 = document.getElementById("intersectionSelect_2").value;
@@ -28,22 +30,23 @@ function makeIntersection() {
var multiPolygon1 = featureCollectionToMultiPolygon(layer1);
var multiPolygon2 = featureCollectionToMultiPolygon(layer2);
+ // Prøver å kjøre intersect-funksjonen:
try {
- var intersection = turf.intersect(multiPolygon1, multiPolygon2);
+ var intersection = turf.intersect(multiPolygon1, multiPolygon2); // Lager intersection
- if (isMultiPolygon(intersection)) {
+ if (isMultiPolygon(intersection)) { // MÃ¥ konvertere tilbake til featureCollection
intersection = multiPolygonToFeatureCollection(intersection);
}
var newLayer = new L.GeoJSON(intersection, {style: getStyle()});
- overlayMaps[name] = newLayer;
+ overlayMaps[name] = newLayer; // Det nye laget legges til i dictionarien med alle kartlagene
- updateSidebar();
- handleLayer(name);
- document.getElementById("intersectionName").value = "";
+ updateSidebar(); // Oppdaterer sidebaren
+ handleLayer(name); // Viser laget i kartet
+ document.getElementById("intersectionName").value = ""; // Tilbakestiller input-feltene fra brukeren
fillDoubleSelect("intersectionSelect");
- } catch(failure) {
+ } catch(failure) { // Hvis det ikke går å lage intersection, sendes det en feilmelding
alert(failure);
}
}
diff --git a/javascript/leafletLayerControl.js b/javascript/leafletLayerControl.js
index f4bab28638dffda4331ba25489c38e8cca1b51b2..1a7caf6ff18530e1be88402b6319e308b309e57c 100644
--- a/javascript/leafletLayerControl.js
+++ b/javascript/leafletLayerControl.js
@@ -5,16 +5,18 @@ var baselayers = {
"Satellite": googleSat
}
-var overlayMaps = {};
+var overlayMaps = {}; // Dictionary med alle kartlagene som skal vises oppå basiskartet fra Leaflet
+// Legger til Leaflet's layer control med bakgrunnskartene:
var controller = L.control.layers(baselayers).addTo(map);
-var exampleLoaded = false;
-var addedLayers = [];
+var exampleLoaded = false; // Er eksempeldata lagt til i kartet?
+var addedLayers = []; // Alle kartlagene som er lagt til i kartet
// Til sidebaren:
function loadExampleData() {
+ // Funksjon som laster inn den forhåndstilpassede dataen
if (!exampleLoaded) {
overlayMaps["Arealdekke"] = Arealdekke;
@@ -29,6 +31,9 @@ function loadExampleData() {
}
function updateSidebar() {
+ /*
+ Funksjon som oppdaterer oversikten over kartlagene i sidebaren ettersom kartlag legges til
+ */
for (key in overlayMaps) {
if (!addedLayers.includes(key)) {
addedLayers.push(key);
@@ -43,7 +48,7 @@ function updateSidebar() {
}
}
-function handleLayer(name) {
+function handleLayer(name) { // Funksjon som viser og skjuler kartlag i kartet og endrer farge på knappene i sidebaren avhengig av lagets synlighet
var layer = null;
for (key in overlayMaps) {
diff --git a/javascript/map.js b/javascript/map.js
index 340eaa676f2f4133e5586a383af2f884e169628d..a2a602fb79c2d34647989db7dc5652b6f0f79b58 100644
--- a/javascript/map.js
+++ b/javascript/map.js
@@ -16,7 +16,7 @@ var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
subdomains:['mt0','mt1','mt2','mt3']
});
-osm_map.addTo(map);
+osm_map.addTo(map); // Legger basiskartet til i kartet slik at det er det som vises først på nettsiden
// Layer control er lagd i 'leafletLayerControl.js'
@@ -25,7 +25,7 @@ L.control.zoom({
position:'topright'
}).addTo(map);
-/* Activate and deactivate interactions in the leaflet map*/
+// Aktiverer og deaktiverer interaksjoner med leaflet-kartet:
function deactivateMap() {
map._handlers.forEach(function(handler) {
diff --git a/javascript/mapChange.js b/javascript/mapChange.js
index 2d0d5c1a58bd3d401006eebb81419c4776230780..562947ffb82c5aed55a12ee09eeb592a531359b2 100644
--- a/javascript/mapChange.js
+++ b/javascript/mapChange.js
@@ -1,5 +1,6 @@
// Variabler:
+// Punktene brukt i visningen av "kart 2":
var points = {
"type": "FeatureCollection",
"features": [
@@ -39,8 +40,9 @@ var points = {
};
var m = "m1"; // Hvilket kart en bruker
-var layersOnMap = []; // Hvilke kartlag som var på før en byttet til "m2"
+var layersOnMap = []; // Hvilke kartlag som var på i "m1" før en byttet til "m2"
+// Legger til alle punktene over og setter på en popup med info-tekst:
var NTNU_points = L.geoJSON(points).bindPopup(function(point) {return "<b>" + point.feature.properties.category + "</b>" + "<br>" + point.feature.properties.name;})
// Bytter layout på nettsiden ved kartbytte
diff --git a/javascript/openFileExplorer.js b/javascript/openFileExplorer.js
index 5c2a4bc2d3d921d80d2da692aba32eb9a6b021b9..7b20633c5c735092969df71d85dcb38089f086a7 100644
--- a/javascript/openFileExplorer.js
+++ b/javascript/openFileExplorer.js
@@ -1,9 +1,12 @@
+// Funksjonalitet for å få opp filutforskeren hvor en henter brukerens input-filer
+
const dialog = document.getElementById("fileInput"); // Input-feltet vi har skjult, men som lagrer dataen som velges
-function clickMe() {
+function clickMe() { // Funksjonen som åpner filutforskeren
dialog.click();
}
dialog.addEventListener('change', () => {
+ // EventListner som endrer farge på html-knappen når en fil er valgt
document.getElementById("loadButton").style.backgroundColor = "green";
})
diff --git a/javascript/sidebar&boxes.js b/javascript/sidebar&boxes.js
index ada17d292089ff3dcd285486bc4cd3eebb9a4198..6b6359c40c99129371616f0deff2498e97cc787a 100644
--- a/javascript/sidebar&boxes.js
+++ b/javascript/sidebar&boxes.js
@@ -1,27 +1,27 @@
-var boolskNav = false; /* boolsk verdi som forteller om en sidebar er åpen foran kartet */
-var boolskBox = false; /* boolsk verdi som forteller om en boks er åpen foran kartet */
-var box = null; /* Streng som forteller hvilken boks-id som er åpen */
+var boolskNav = false; // boolsk verdi som forteller om en sidebar er åpen foran kartet
+var boolskBox = false; // boolsk verdi som forteller om en boks er åpen foran kartet
+var box = null; // Streng som forteller hvilken boks-id som er åpen
-/* Set the width of the sidebar to 25vw */
+// Setter bredden til sidebaren til 25 vw
function openNav() {
- if (boolskBox) {
+ if (boolskBox) { // Om en boks er åpen må den lukkes først
closeBox(box);
}
document.getElementById("dataLayers").style.width = "25vw";
boolskNav = true;
}
-/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
+// Setter bredden til sidebaren til 0 og left margin til sidens innhold til 0
function closeNav() {
document.getElementById("dataLayers").style.width = "0vw";
boolskNav = false;
}
-function openBox(id) {
- if (boolskBox) {
+function openBox(id) { // Ã…pner aktuell boks (id)
+ if (boolskBox) { // Om en annen boks er åpen, må den lukkes først
closeBox(box);
}
- if (boolskNav) {
+ if (boolskNav) { // Sidebaren må også lukkes
closeNav();
}
@@ -43,12 +43,12 @@ function openBox(id) {
document.getElementById(String(id)).style.width = "40vw";
document.getElementById(String(id)).style.height = "40vh";
document.getElementById(String(id)).style.borderWidth = "20px";
- boolskBox = true;
- box = id;
- deactivateMap();
+ boolskBox = true; // Forteller at en boks er åpen
+ box = id; // ... og hvilken boks
+ deactivateMap(); // Deaktiverer funksjonalitet i kartet mens en boks er åpen
}
-function closeBox(id) {
+function closeBox(id) { // Lukker aktuell boks og justerer siden motsatt av hva openBox gjør
document.getElementById(String(id)).style.width = "0vw";
document.getElementById(String(id)).style.height = "0vh";
document.getElementById(String(id)).style.borderWidth = "0px";
diff --git a/javascript/tin.js b/javascript/tin.js
index 992474dc133444f3df53d697ec457b3d69fd10a3..fef7d8516469f05ec29e8bad2ce66d61ed8606dc 100644
--- a/javascript/tin.js
+++ b/javascript/tin.js
@@ -1,10 +1,12 @@
// Variabler:
var isTIN = false // Vises TIN'et i kartet?
+
// Selve TIN'et:
var TINPolygons = turf.tin(NTNU_points.toGeoJSON());
var TINGeoJSON = L.geoJSON(TINPolygons, {style: {"color": "orangered"}});
+// Funksjon for å slå av og på TIN'et:
function TIN() {
if (isTIN) {
map.removeLayer(TINGeoJSON);
diff --git a/javascript/turfFormatConverter.js b/javascript/turfFormatConverter.js
index 2bc235c7658247489b515c80fa5a5116481c6d6d..6e562a9eb1aece2c5e61acc9bffd730adf641845 100644
--- a/javascript/turfFormatConverter.js
+++ b/javascript/turfFormatConverter.js
@@ -3,7 +3,8 @@ Henter ut koordinatene fra GeoJSON-lag slik at en kan
konvertere mellom feature collections og format godtatt av turf
*/
-function featureCollectionToMultiPolygon(layer) { // layer er her et GeoJSON-lag
+function featureCollectionToMultiPolygon(layer) { // Funksjon som gjør om features i 'layer' til MultiPolygon istedenfor FeatureCollection
+ // 'layer' er her et GeoJSON-lag
if (layer["type"] == "FeatureCollection") {
var coords = [];
var features = layer["features"];
@@ -15,14 +16,15 @@ function featureCollectionToMultiPolygon(layer) { // layer er her et GeoJSON-lag
}
}
-function isMultiPolygon(layer) {
+function isMultiPolygon(layer) { // Inneholder 'layer' features som er MultiPolygon?
if (layer["geometry"]["type"] == "MultiPolygon") {
return true;
}
return false;
}
-function multiPolygonToFeatureCollection(layer) {
+function multiPolygonToFeatureCollection(layer) {// Funksjon som gjør om features i 'layer' til FeatureCollection istedenfor MultiPolygon
+ // 'layer' er her et GeoJSON-lag
var features = [];
for (var i = 0; i < layer["geometry"]["coordinates"].length; i++) {
var geometry = {
@@ -39,6 +41,7 @@ Håndtering av input-filer fra bruker for å få de på rett format egnet for tu
*/
function isInputMultiPolygon(layer) {
+ // GÃ¥r igjennom 'layer' (geojson-fil) og ser om det er MultiPolygons eller MultiLineStrings i den
liste = layer["features"];
for (var i = 0; i < liste.length; i++) {
if (liste[i]["geometry"]["type"] == "MultiPolygon") {
@@ -51,6 +54,11 @@ function isInputMultiPolygon(layer) {
}
function turnList(liste) {
+ /*
+ Polygon i leaflet skal følge høyrehåndsregelen.
+ Ved omgjøring fra MultiPolygon til Polygon blir ikke dette riktig,
+ og en er nødt til å snu om på rekkefølgen til alle koordinatene i polygonet.
+ */
var newList = [];
for (var i = liste.length - 1; i > -1; i--) {
@@ -61,6 +69,9 @@ function turnList(liste) {
}
function inputMultiPolygon(layer) {
+ /*
+ Gjør om MultiPolygon-filer til Polygon-filer og returnerer et nytt datalag med nye features
+ */
liste = layer["features"];
k = liste.length;
@@ -86,6 +97,9 @@ function inputMultiPolygon(layer) {
}
function inputMultiLine(layer) {
+ /*
+ Gjør om MultiLineString-filer til LineString-filer og returnerer et nytt datalag med nye features
+ */
liste = layer["features"];
k = liste.length;
diff --git a/javascript/tutorial.js b/javascript/tutorial.js
index e8b3c81410bf214a9ce26446fdf568275062bf5f..871915d47a849f6884973d7603f8c80efcbc4122 100644
--- a/javascript/tutorial.js
+++ b/javascript/tutorial.js
@@ -2,7 +2,8 @@
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 (not yet), or you can add some pre-defined data to the map.<br>Once the layers are added you can not delete the layer without reset the whole website.<br>You can turn on and off each layer with their buttons and the visibility will be shown with color.";
+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 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'.";
@@ -10,11 +11,14 @@ var extract = "<b>Extract</b><br>Here you extract one type of features from a la
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 tutorial = [general, pin, layer, buffer, difference, dissolve, extract, intersection, union];
+var tutorial = [general, pin, layer, userLayer, buffer, difference, dissolve, extract, intersection, union];
+// Teller som holder styr på hvilken side en er på
var page = 0;
-document.getElementById("tutorial").innerHTML = tutorial[page];
+document.getElementById("tutorial").innerHTML = tutorial[page]; // Setter tekst til tekstboksen i tutlorial-boksen
+
+// Funksjoner som justerer innholdet i tutorial-boksen avhengig av hvilken side en er på
function nextPage() {
page++;
diff --git a/javascript/union.js b/javascript/union.js
index f0ce586655e2d18a5e6712175dc4f2f698e819a3..13478517f59207fbff2ef6460131af1c78f8294b 100644
--- a/javascript/union.js
+++ b/javascript/union.js
@@ -4,7 +4,7 @@ function makeUnion() {
var regex = /^[a-zA-Z_0-9]+$/;
- if (document.getElementById("unionSelect_1").value == "- - -") {
+ if (document.getElementById("unionSelect_1").value == "- - -") { // Brukeren får tilbakemelding på hva som ikke fungerer / er feil
return alert("You need to choose the first layer!");
} else if (document.getElementById("unionSelect_2").value == "- - -") {
return alert("You need to choose the secondt layer!");
@@ -18,32 +18,34 @@ function makeUnion() {
return alert("Choose another name! There exists already a layer with that name.")
}
+ // Henter input fra brukeren:
+
var input1 = document.getElementById("unionSelect_1").value;
var layer1 = overlayMaps[input1].toGeoJSON();
var input2 = document.getElementById("unionSelect_2").value;
var layer2 = overlayMaps[input2].toGeoJSON();
var name = document.getElementById("unionName").value;
- // MÃ¥ konverteres fra feature collection til multipolygon:
+ // MÃ¥ konverteres fra FeatureCollection til MultiPolygon:
var multiPolygon1 = featureCollectionToMultiPolygon(layer1);
var multiPolygon2 = featureCollectionToMultiPolygon(layer2);
try {
- var union = turf.union(multiPolygon1, multiPolygon2);
+ var union = turf.union(multiPolygon1, multiPolygon2); // Lager unionen
if (isMultiPolygon(union)) {
- union = multiPolygonToFeatureCollection(union);
+ union = multiPolygonToFeatureCollection(union); // Konverterer tilbake til FeatureCollection
}
var newLayer = L.geoJSON(union, {style: getStyle()});
- overlayMaps[name] = newLayer;
+ overlayMaps[name] = newLayer; // Det nye laget legges til i dictionarien med alle kartlagene
- updateSidebar();
- handleLayer(name);
- document.getElementById("unionName").value = "";
+ updateSidebar(); // Oppdaterer sidebaren
+ handleLayer(name); // Viser laget i kartet
+ document.getElementById("unionName").value = ""; // Tilbakestiller input-feltene fra brukeren
fillDoubleSelect("unionSelect");
- } catch(failure) {
+ } catch(failure) { // Hvis det ikke går å lage union, sendes det en feilmelding
alert(failure);
}
}
diff --git a/javascript/voronoi.js b/javascript/voronoi.js
index 6eb8ea9b4655466d317f1aafce19952f348360f8..9e51de7377e3248858755c489dc9f454144d0c0a 100644
--- a/javascript/voronoi.js
+++ b/javascript/voronoi.js
@@ -1,15 +1,17 @@
// Variabler:
var isVoronoi = false; // Vises voronoi-diagrammet i kartet?
+
// Avgrensning for voronoi-diagrammet
var options = {
bbox: [10.3175248, 63.3911153, 10.5242766, 63.4570029]
};
+
// Selve voronoi-diagrammet:
var voronoiPolygons = turf.voronoi(NTNU_points.toGeoJSON(), options);
var voronoiGeoJSON = L.geoJSON(voronoiPolygons, {style: {"color": "orange"}});
-function voronoi() {
+function voronoi() { // Skrur av og på voronoi-diagrammet i kartet
if (isVoronoi) {
map.removeLayer(voronoiGeoJSON)
isVoronoi = false;