Merge branch 'dev' into 'main'

Dev

See merge request !16

css/style.css

@@ -56,6 +56,22 @@
     margin-bottom: 0.5vh;
 }
 
+.onClick {
+    font-family: monospace;
+    font-size: larger;
+    background-color: orangered;
+    color: white;
+    width: 20vw;
+    text-align: center;
+    border-color: white;
+    border-style: dotted;
+    border-width: 5px;
+    border-radius: 10px;
+    margin-left: 2vw;
+    margin-right: 2vw;
+    cursor: pointer;
+}
+
 .sidebar {
     font-family: monospace;
     background-color: orangered;
@@ -68,22 +84,6 @@
     transition: 0.5s;
 }
 
-#fileSelect {
+#fileInput {
     display: none;
 }
-
-#onClick {
-    font-family: monospace;
-    font-size: larger;
-    background-color: orangered;
-    color: white;
-    width: 20vw;
-    text-align: center;
-    border-color: white;
-    border-style: dotted;
-    border-width: 5px;
-    border-radius: 10px;
-    margin-left: 2vw;
-    margin-right: 2vw;
-    cursor: pointer;
-}
\ No newline at end of file

index.html

@@ -47,8 +47,15 @@
             </div>
 
             <div style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px;">
-                <input type="file" accept=".zip" none="dialog" id="fileSelect">
-                <button id="onClick" onclick="clickMe()">Click here to open new layers</button>
+                <input type="file" accept=".zip" none="dialog" id="fileInput">
+                <div class="box3">
+                    <button class="onClick" onclick="clickMe()">Click here to choose a new layer</button>
+
+                    <svg onclick="handleFile()" style="cursor: pointer; margin-right: 2vw;" xmlns="http://www.w3.org/2000/svg" 
+                    width="6vh" height="6vh" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
+                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
+                    </svg>
+                </div>
             </div>
 
             <div style="margin-left: 10px; font-size: 18px; height: 50vh;">
@@ -148,9 +155,12 @@
         <script src="javascript/sidebar&boxes.js"></script>
         <script src="javascript/openFileExplorer.js"></script>
         <script src="javascript/fileHandler.js"></script>
+
+        <script src="javascript/geoJSON.js"></script>
+        <script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script>
         
         <!-- Imported js -->
-        <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script>
+        <!-- <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script> -->
 
     </body>
 </html>

javascript/fileHandler.js

-const input = document.getElementById("fileSelect");
-
-input.addEventListener("change", handleFile(), false);
-
-function handleFile() {
-    const fileList = file.files;
-    const fileName = fileList[0].name;
-
-    document.getElementById("layers").innerHTML = fileName;
-
-    //shp("files/pandr.zip").then(function(geojson) {
-		//see bellow for whats here this internally call shp.parseZip()
-	//});
-}
\ No newline at end of file

javascript/geoJSON.js

+var rectangle = [{
+    "type": "Feature",
+    "properties": {"name": "Gløshaugen"},
+    "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+            [10.403787, 63.420031],
+            [10.410954, 63.414691],
+            [10.404863, 63.414188],
+            [10.398170, 63.418901],
+            [10.403787, 63.420031]
+        ]]
+    }
+}];
+
+var geoLayer = L.geoJSON().addTo(map);
+
+geoLayer.addData(rectangle);

javascript/map.js

@@ -45,4 +45,12 @@ function activateMap() {
     map._handlers.forEach(function(handler) {
         handler.enable();
     });
-}
+}
\ No newline at end of file
+
+map.on('click', function() {
+    if(map.hasLayer(geoLayer)) {
+      map.removeLayer(geoLayer);
+    } else {
+      map.addLayer(geoLayer);
+    }
+  });

javascript/openFileExplorer.js

-const clickOpen = document.getElementById("onClick"); // Knappen vi gir funksjonalitet
-const dialog = document.getElementById("fileSelect"); // Input-feltet vi har skjult, men som lagrer dataen som velges
+const dialog = document.getElementById("fileInput"); // Input-feltet vi har skjult, men som lagrer dataen som velges
 
 function clickMe() {
     dialog.click();