Merge branch 'dev' into 'main'

Dev

See merge request !57

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;
+}

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> -->

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;

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;

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;

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;

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;

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;
+}

javascript/tutorial.js

+// 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

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;