diff --git a/css/style.css b/css/style.css
index 915f0c2244d336062646122d879668581845cdcb..a6d732296fb5063e730acc6254712c6d2d60e09a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -106,4 +106,13 @@ p {
margin-left: 2vw;
margin-right: 2vw;
cursor: pointer;
-}
\ No newline at end of file
+}
+
+.tutorial {
+ margin: 5px;
+ padding: 5px;
+ color: white;
+ height: 26vh;
+ width: 39vw;
+ text-align: center;
+}
diff --git a/index.html b/index.html
index 4c8967ebdc0fe4a513dbe26974a2481d94aaca90..ce10b6c3f8d2bf6336874a588e716bd392bdec23 100644
--- a/index.html
+++ b/index.html
@@ -217,18 +217,27 @@
<div id="tutorialBox" class="box">
<div class="box3">
- <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Tutorial</h1>
+ <div class="box2">
+ <svg style="cursor: pointer; margin-top: 15px; margin-left: 9vw;" onclick="previousPage()"
+ xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
+ <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
+ </svg>
+
+ <h1 style="font-size: 4vh; text-align: center; width: 15vw;">Tutorial</h1>
+
+ <svg style="cursor: pointer; margin-top: 15px;" onclick="nextPage()"
+ xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
+ <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
+ </svg>
+ </div>
- <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('tutorialBox')"
+ <svg style="cursor: pointer; margin-top: 15px; margin-right: 20px;" onclick="closeBox('tutorialBox')"
xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</div>
- <p style="margin: 2vw; padding: 5px; background-color: white; border-color: black;
- border-width: 2px; color: black; height: 18vh; width: 35vw; text-align: left;">
- Legg til piler på hver side av 'Tutorial' for å navigere rundt blant de ulike tutorialene.
- </p>
+ <p id="tutorial" class="tutorial"></p>
</div>
</div>
@@ -278,6 +287,7 @@
<script src="javascript/mapChange.js"></script>
<script src="javascript/voronoi.js"></script>
<script src="javascript/tin.js"></script>
+ <script src="javascript/tutorial.js"></script>
<!-- Imported js -->
<!-- <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script> -->
diff --git a/javascript/buffer.js b/javascript/buffer.js
index fe267550ab61577388c9311071b7567da84f98ac..48cae5b652517fcade69dac365b7d5237e483474 100644
--- a/javascript/buffer.js
+++ b/javascript/buffer.js
@@ -20,6 +20,8 @@ function makeBuffer() {
return alert("You need to choose a name for the new layer!");
} else if (!document.getElementById("bufferName").value.match(regex_2)) {
return alert("The new name must consist of normal letters!");
+ } else if (doLayerExist(document.getElementById("bufferName").value)) {
+ return alert("Choose another name! There exists already a layer with that name.")
}
var input = document.getElementById("bufferSelect").value;
diff --git a/javascript/difference.js b/javascript/difference.js
index d0abe02bddde7812263520fd624c91643b2fc029..7b817c4aaaa0956831d80b566e44b2253559ae56 100644
--- a/javascript/difference.js
+++ b/javascript/difference.js
@@ -8,10 +8,14 @@ function difference() {
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!");
+ } else if (document.getElementById("differenceSelect_1").value == document.getElementById("differenceSelect_2").value) {
+ return alert("You can not choose the same layer twice!");
} else if (!document.getElementById("differenceName").value) {
return alert("You need to choose a name for the new layer!");
} else if (!document.getElementById("differenceName").value.match(regex)) {
return alert("The new name must consist of normal letters!");
+ } else if (doLayerExist(document.getElementById("differenceName").value)) {
+ return alert("Choose another name! There exists already a layer with that name.")
}
var input1 = document.getElementById("differenceSelect_1").value;
diff --git a/javascript/dissolve.js b/javascript/dissolve.js
index 653845ca11c6400815f843275d177a5ce8cdb17a..3cdb797101828e72169fa44070d00012bf7176d0 100644
--- a/javascript/dissolve.js
+++ b/javascript/dissolve.js
@@ -10,6 +10,8 @@ function dissolve() {
return alert("You need to choose a name for the new layer!");
} else if (!document.getElementById("dissolveName").value.match(regex)) {
return alert("The new name must consist of normal letters!");
+ } else if (doLayerExist(document.getElementById("dissolveName").value)) {
+ return alert("Choose another name! There exists already a layer with that name.")
}
var input = document.getElementById("dissolveSelect").value;
diff --git a/javascript/extract.js b/javascript/extract.js
index 9ff6b310acfe1343d478fca10306521a7dbb3271..40335382141f8334c1bb2ae75a29ee4c9542b6d4 100644
--- a/javascript/extract.js
+++ b/javascript/extract.js
@@ -73,6 +73,8 @@ function extract() {
return alert("You need to choose a name for the new layer!");
} else if (!document.getElementById("extractName").value.match(regex)) {
return alert("The new name must consist of normal letters!");
+ } else if (doLayerExist(document.getElementById("extractName").value)) {
+ return alert("Choose another name! There exists already a layer with that name.")
}
var input = document.getElementById("extractSelect").value;
diff --git a/javascript/intersect.js b/javascript/intersect.js
index 100fb2aff8772e10dd02c6a1bc16b487aa3628a2..475c5f49968ed6121d45e272b4be2457641a6272 100644
--- a/javascript/intersect.js
+++ b/javascript/intersect.js
@@ -8,10 +8,14 @@ function intersection() {
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!");
+ } else if (document.getElementById("intersectionSelect_1").value == document.getElementById("intersectionSelect_2").value) {
+ return alert("You can not choose the same layer twice!");
} else if (!document.getElementById("intersectionName").value) {
return alert("You need to choose a name for the new layer!");
} else if (!document.getElementById("intersectionName").value.match(regex)) {
return alert("The new name must consist of normal letters!");
+ } else if (doLayerExist(document.getElementById("intersectionName").value)) {
+ return alert("Choose another name! There exists already a layer with that name.")
}
var input1 = document.getElementById("intersectionSelect_1").value;
diff --git a/javascript/leafletLayerControl.js b/javascript/leafletLayerControl.js
index 9585943e99d06fda50ad4652a6aba4210e2429f4..7fa775db5b0e8eea82b38a07f47b167f0b959ff1 100644
--- a/javascript/leafletLayerControl.js
+++ b/javascript/leafletLayerControl.js
@@ -63,3 +63,14 @@ function handleLayer(name) {
document.getElementById(name).style.backgroundColor = "green";
}
}
+
+// Sjekk at laget ikke eksisterer enda:
+
+function doLayerExist(name) {
+ for (key in overlayMaps) {
+ if (key == name) {
+ return true;
+ }
+ }
+ return false;
+}
diff --git a/javascript/tutorial.js b/javascript/tutorial.js
new file mode 100644
index 0000000000000000000000000000000000000000..e8b3c81410bf214a9ce26446fdf568275062bf5f
--- /dev/null
+++ b/javascript/tutorial.js
@@ -0,0 +1,33 @@
+// 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 (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 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 tutorial = [general, pin, layer, buffer, difference, dissolve, extract, intersection, union];
+
+var page = 0;
+
+document.getElementById("tutorial").innerHTML = tutorial[page];
+
+function nextPage() {
+ page++;
+ if (page == tutorial.length) {
+ page = 0;
+ }
+ document.getElementById("tutorial").innerHTML = tutorial[page];
+}
+
+function previousPage() {
+ page--;
+ if (page == -1) {
+ page = tutorial.length - 1;
+ }
+ document.getElementById("tutorial").innerHTML = tutorial[page];
+}
\ No newline at end of file
diff --git a/javascript/union.js b/javascript/union.js
index 3369f8a1c0bcfe3f0cf48962105709a8cf834166..8b34259a1e0d7bbdc42a4edb0906b442bd5773a1 100644
--- a/javascript/union.js
+++ b/javascript/union.js
@@ -8,10 +8,14 @@ function union() {
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!");
+ } else if (document.getElementById("unionSelect_1").value == document.getElementById("unionSelect_2").value) {
+ return alert("You can not choose the same layer twice!")
} else if (!document.getElementById("unionName").value) {
return alert("You need to choose a name for the new layer!");
} else if (!document.getElementById("unionName").value.match(regex)) {
return alert("The new name must consist of normal letters!");
+ } else if (doLayerExist(document.getElementById("unionName").value)) {
+ return alert("Choose another name! There exists already a layer with that name.")
}
var input1 = document.getElementById("unionSelect_1").value;