diff --git a/css/style.css b/css/style.css
index 38a8717b7df7f8cf9f2183afeb456bfa05daf897..40595559d25ddc01927c7c182e10c14ca7c7ba9d 100644
--- a/css/style.css
+++ b/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
diff --git a/index.html b/index.html
index 74be1eee054f30ef4e1e4623224154957412b5c6..c29c16b80f790596ccb4ec27ff8b17b4d998962d 100644
--- a/index.html
+++ b/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>
diff --git a/javascript/exampleData/shapefiles/arealbruk.zip b/javascript/exampleData/shapefiles/arealbruk.zip
new file mode 100644
index 0000000000000000000000000000000000000000..0184a81ad0e418115747f9df95964cf77c6281d0
Binary files /dev/null and b/javascript/exampleData/shapefiles/arealbruk.zip differ
diff --git a/javascript/exampleData/shapefiles/vann.zip b/javascript/exampleData/shapefiles/vann.zip
new file mode 100644
index 0000000000000000000000000000000000000000..d23cd16d471f680d0f584f6ff25217ea4e95dca2
Binary files /dev/null and b/javascript/exampleData/shapefiles/vann.zip differ
diff --git a/javascript/fileHandler.js b/javascript/fileHandler.js
index 12548c5e1e9262192686da592f8e69e2b27142c2..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/javascript/fileHandler.js
+++ b/javascript/fileHandler.js
@@ -1,14 +0,0 @@
-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
diff --git a/javascript/geoJSON.js b/javascript/geoJSON.js
new file mode 100644
index 0000000000000000000000000000000000000000..d3e45a59f9dc4cbd5b256aa144c6298146cd9809
--- /dev/null
+++ b/javascript/geoJSON.js
@@ -0,0 +1,18 @@
+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);
diff --git a/javascript/map.js b/javascript/map.js
index 5d74ba771d307f096ab2114f826d394452443a71..434a3dc949e4a425cbc7e9608de062980e679c8e 100644
--- a/javascript/map.js
+++ b/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);
+    }
+  });
diff --git a/javascript/openFileExplorer.js b/javascript/openFileExplorer.js
index f54b865d1b1d8e6a9fc7b401fdcbe8a6f89e38d2..3bdee1abe896db1b979777621324fd3088315f93 100644
--- a/javascript/openFileExplorer.js
+++ b/javascript/openFileExplorer.js
@@ -1,5 +1,4 @@
-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();