diff --git a/index.html b/index.html
index 7d1f35715b4299758a60aaf1d44ea3720c0f4ef3..fa9111afb12e42b4e712876585e1ecda9c9a4138 100644
--- a/index.html
+++ b/index.html
@@ -180,6 +180,17 @@
                                 <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>Choose the first layer to union:</p>
+                        <select id="unionSelect_1"></select>
+
+                        <p>Choose the second layer:</p>
+                        <select id="unionSelect_2"></select>
+
+                        <p>Choose a name for the union:</p>
+                        <input id="unionName"><br>
+
+                        <button class="button" style="font-size: 25px;" onclick="union()">Make union</button>
                     </div>
 
                     <div id="tutorialBox" class="box">
@@ -234,6 +245,7 @@
         <script src="javascript/difference.js"></script>
         <script src="javascript/turfFormatConverter.js"></script>
         <script src="javascript/intersect.js"></script>
+        <script src="javascript/union.js"></script>
 
         <!-- Imported js -->
         <!-- <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script> -->
diff --git a/javascript/difference.js b/javascript/difference.js
index 1a5f09c5f0c15876fc3ab2d3da14d33358935052..2574e2da6b56b20e9407692eaf24b26fb9bd98e7 100644
--- a/javascript/difference.js
+++ b/javascript/difference.js
@@ -23,6 +23,6 @@ function difference() {
         document.getElementById("differenceName").value = "";
         fillDoubleSelect("differenceSelect");
     } catch(failure) {
-        alert(failure)
+        alert(failure);
     }
 }
diff --git a/javascript/intersect.js b/javascript/intersect.js
index bfaa63cd1d1df3b0544bf8db7ce96e2448fff2f1..0d5aa423474cb56c660c91f253b94b705e0c5b58 100644
--- a/javascript/intersect.js
+++ b/javascript/intersect.js
@@ -21,7 +21,7 @@ function intersection() {
         updateSidebar();
         handleLayer(name);
         document.getElementById("intersectionName").value = "";
-        fillDoubleSelect("intersectionSelect")
+        fillDoubleSelect("intersectionSelect");
     } catch(failure) {
         alert(failure);
     }
diff --git a/javascript/sidebar&boxes.js b/javascript/sidebar&boxes.js
index 1b5f1dd7f5b06e917589e43ea9c03134508a4810..d9e6149fb00dd9ec4cdc7431a9e4aad3dd4bc545 100644
--- a/javascript/sidebar&boxes.js
+++ b/javascript/sidebar&boxes.js
@@ -19,7 +19,7 @@ function closeNav() {
 
 function openBox(id) {
     if (boolskBox) {
-        closeBox(box)
+        closeBox(box);
     }
     if (boolskNav) {
         closeNav();
@@ -34,6 +34,8 @@ function openBox(id) {
         fillSelect("dissolveSelect");
     } else if (id == "intersectionBox") {
         fillDoubleSelect("intersectionSelect");
+    } else if (id == "unionBox") {
+        fillDoubleSelect("unionSelect");
     }
     
     document.getElementById(String(id)).style.width = "40vw";
diff --git a/javascript/turfFormatConverter.js b/javascript/turfFormatConverter.js
index e985ba75adb3f57fd76d8ec7f308484971a9fa5f..00f6c7ccca40e625e95a25c10fa440e1aefc9375 100644
--- a/javascript/turfFormatConverter.js
+++ b/javascript/turfFormatConverter.js
@@ -6,7 +6,7 @@ konvertere mellom feature collections og format godtatt av turf
 function featureCollectionToMultiPolygon(layer) { // layer er her et GeoJSON-lag
     if (layer["type"] == "FeatureCollection") {
         var coords = [];
-        var features = layer["features"]
+        var features = layer["features"];
 
         for (var i = 0; i < features.length; i++) {
             coords.push(features[i]["geometry"]["coordinates"]);
diff --git a/javascript/union.js b/javascript/union.js
new file mode 100644
index 0000000000000000000000000000000000000000..e3ae36624329da7d040e49d4fc55d91cabcdebd7
--- /dev/null
+++ b/javascript/union.js
@@ -0,0 +1,28 @@
+function union() {
+    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:
+    var coords1 = featureCollectionToMultiPolygon(layer1);
+    var coords2 = featureCollectionToMultiPolygon(layer2);
+    
+    var multiPolygon1 = turf.multiPolygon(coords1);
+    var multiPolygon2 = turf.multiPolygon(coords2);
+
+    try {
+        var union = turf.union(multiPolygon1, multiPolygon2);
+        var newLayer = L.geoJSON(union);
+
+        overlayMaps[name] = newLayer;
+
+        updateSidebar();
+        handleLayer(name);
+        document.getElementById("unionName").value = "";
+        fillDoubleSelect("unionSelect");
+    } catch(failure) {
+        alert(failure);
+    }
+}