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 cb65adf1926e1a157d3e09b6d259a0d3be3b4530..c29c16b80f790596ccb4ec27ff8b17b4d998962d 100644
--- a/index.html
+++ b/index.html
@@ -3,10 +3,11 @@
<head>
<title>ProgGIS</title>
+ <!-- My css -->
<link rel="stylesheet" href="css/style.css"/>
-
+
+ <!-- Leaflet css -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
- <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
</head>
@@ -46,8 +47,15 @@
</div>
<div style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px;">
- <input type="file" none="dialog" id="fileSelect" multiple>
- <button id="onClick" accept=".zip" 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;">
@@ -138,14 +146,21 @@
</div>
</div>
</div>
+
+ <!-- Leaflet js -->
+ <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+ <!-- My js -->
<script src="javascript/map.js"></script>
<script src="javascript/sidebar&boxes.js"></script>
- <script src="javascript/openFileFromExplorer.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>
- <script src="javascript/index.js"></script>
- <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script>
- <script src="https://unpkg.com/shapefile@0.6"></script>
+ <!-- Imported js -->
+ <!-- <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
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
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/index.js b/javascript/index.js
deleted file mode 100644
index 8ef2133d5e688e60054129ffcd7889ae81ab355a..0000000000000000000000000000000000000000
--- a/javascript/index.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
-Kode hentet fra: https://github.com/ducduy10k/Read-data-from-file---Mapbox/blob/main/index.js
-*/
-
-function handleReadFile() {
- let file = document.getElementById("fileSelect").files[0];
- if (file) {
- let ext = getExtension(file.name);
- switch (ext) {
- case "zip":
- document.getElementById("layers").innerHTML = "Ja";
- readDataFromShpZipFile(file);
- break;
- default:
- alert("Invalid file ");
- }
- }
-}
-
-function getExtension(filename) {
- var parts = filename.split(".");
- return parts[parts.length - 1];
-}
-
-document.getElementById("fileSelect").addEventListener("change", handleReadFile());
-
-function readDataFromShpZipFile(file) {
- const reader = new FileReader();
- //document.getElementById("layers").innerHTML = "Ja";
- reader.onload = (event) => {
- shp(reader.result).then(function (fc) {
- if (fc.features.length > 0) {
- onHightLight(fc);
- }
- });
- };
- reader.readAsArrayBuffer(file);
-}
-
-function onHightLight(data) {
- clearLayerFeature();
- map.addSource("source-hightlight", {
- type: "geojson",
- data: data,
- });
- map.addLayer({
- id: "layer-hightlight",
- type: "line",
- source: "source-hightlight",
- layout: {},
- paint: {
- "line-color": "red",
- "line-width": 2,
- },
- });
-}
-
-function clearLayerFeature() {
- if (map.getLayer("layer-hightlight")) {
- map.removeLayer("layer-hightlight");
- map.removeSource("source-hightlight");
- }
-}
\ No newline at end of file
diff --git a/javascript/map.js b/javascript/map.js
index f476ddab568827090b34d8eb233e772c67a1810c..434a3dc949e4a425cbc7e9608de062980e679c8e 100644
--- a/javascript/map.js
+++ b/javascript/map.js
@@ -1,5 +1,5 @@
// Initialiserer kartet:
-var map = L.map('map', {
+const map = L.map('map', {
maxZoom: 18, // Justerer zoom-nivået
minZoom: 6,
zoomControl: false, // Fjerner default zoom-knapper
@@ -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
new file mode 100644
index 0000000000000000000000000000000000000000..3bdee1abe896db1b979777621324fd3088315f93
--- /dev/null
+++ b/javascript/openFileExplorer.js
@@ -0,0 +1,5 @@
+const dialog = document.getElementById("fileInput"); // Input-feltet vi har skjult, men som lagrer dataen som velges
+
+function clickMe() {
+ dialog.click();
+}
diff --git a/javascript/openFileFromExplorer.js b/javascript/openFileFromExplorer.js
deleted file mode 100644
index f54b865d1b1d8e6a9fc7b401fdcbe8a6f89e38d2..0000000000000000000000000000000000000000
--- a/javascript/openFileFromExplorer.js
+++ /dev/null
@@ -1,6 +0,0 @@
-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
-
-function clickMe() {
- dialog.click();
-}