diff --git a/index.html b/index.html
index 7a217f002ca4ee834683d37d9df0002568a8eb61..9be19277876f072e5c55c7d8d4811a806790a860 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,8 @@
<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>
+ <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script>
+
</head>
<body class="standard">
@@ -45,12 +47,14 @@
</svg>
</div>
+ <div style="margin-top: 5px; margin-bottom: 5px;">
+ <input type="file" none="dialog" id="dialog">
+ <button id="clickOpen" onclick="clickMe()">Click here to open new layer</button>
+ </div>
+
<div style="margin-left: 10px; font-size: 18px; height: 60vh;">
<p id="layers"></p>
</div>
- <div class="dropBox" ondrop="dropHandler(event)" ondragover="dragOverHandler(event)">
- <p>Drop files here 8)</p>
- </div>
</div>
<div id="map" style="position: relative; z-index: 1; height: 80vh;">
@@ -143,4 +147,4 @@
<script src="javascript/map.js"></script>
<script src="javascript/sidebar&boxes.js"></script>
-<script src="javascript/dropFiles.js"></script>
\ No newline at end of file
+<script src="javascript/openFileFromExplorer.js"></script>
diff --git a/javascript/dropFiles.js b/javascript/dropFiles.js
deleted file mode 100644
index 0e8258c39bdf72f0847cda637c305a36c16606a2..0000000000000000000000000000000000000000
--- a/javascript/dropFiles.js
+++ /dev/null
@@ -1,29 +0,0 @@
-function dropHandler(event) {
- event.preventDefault();
- event.stopPropagation();
-
- if (event.dataTransfer.items) {
- // Use DataTransferItemList interface to access the file(s)
- [...event.dataTransfer.items].forEach((item, i) => {
- // If dropped items aren't files, reject them
- if (item.kind === "file") {
- const file = item.getAsFile();
- let layer = file.name;
- document.getElementById("layers").innerHTML = layer;
- console.log(`… file[${i}].name = ${file.name}`);
- }
- });
- } else {
- // Use DataTransfer interface to access the file(s)
- [...event.dataTransfer.files].forEach((file, i) => {
- let layer = file.name;
- document.getElementById("layers").innerHTML = layer;
- console.log(`… file[${i}].name = ${file.name}`);
- });
- }
-}
-
-function dragOverHandler(event) {
- event.preventDefault();
- event.stopPropagation();
-}
\ No newline at end of file
diff --git a/javascript/handleFiles.js b/javascript/handleFiles.js
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/javascript/map.js b/javascript/map.js
index b3e3b4816956abf99641db3b589449b90e75f7b5..4b501406e423ded72b0ea43d6eb36d4ff391f9df 100644
--- a/javascript/map.js
+++ b/javascript/map.js
@@ -1,21 +1,38 @@
-// Bestemme URL til basiskartet:
-var osm_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
- attribution: '© <a href="https://www.openstreetmap.org/copyright"<OpenStreetMap</a> contributors'
-});
-
// Initialiserer kartet:
var map = L.map('map', {
- layers: [osm_map], // Default basiskart
maxZoom: 18, // Justerer zoom-nivået
minZoom: 6,
zoomControl: false, // Fjerner default zoom-knapper
}).setView([63.418529, 10.40284], 13)
+// Bestemme URL til basiskartet:
+var osm_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="https://www.openstreetmap.org/copyright"<OpenStreetMap</a> contributors'
+});
+
+// Google Map layer:
+
+var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
+ subdomains:['mt0','mt1','mt2','mt3']
+});
+
+osm_map.addTo(map);
+googleSat.addTo(map);
+
// Legger til zoom-knapper på egnet sted
L.control.zoom({
position:'topright'
}).addTo(map);
+// Layer control:
+
+var baselayers = {
+ "OpenStreetMap": osm_map,
+ "Satellite": googleSat
+};
+
+L.control.layers(baselayers).addTo(map)
+
/* Activate and deactivate interactions in the leaflet map*/
function deactivateMap() {
diff --git a/javascript/openFileFromExplorer.js b/javascript/openFileFromExplorer.js
new file mode 100644
index 0000000000000000000000000000000000000000..5ad9ca4ea1044ef3dec5a32a363d6c503e778b9d
--- /dev/null
+++ b/javascript/openFileFromExplorer.js
@@ -0,0 +1,6 @@
+const clickOpen = document.getElementById("clickOpen");
+const dialog = document.getElementById("dialog");
+
+function clickMe() {
+ dialog.click();
+};
diff --git a/style.css b/style.css
index b1d3433bc4e9561975b319e15618caebc6eab4b8..d7a4b83141a26120d1f65e14bb114a42522a35ef 100644
--- a/style.css
+++ b/style.css
@@ -41,19 +41,6 @@
flex-direction: row;
}
-.dropBox {
- font-family: monospace;
- font-size: larger;
- width: 20vw;
- text-align: center;
- border-color: white;
- border-style: dotted;
- border-width: 5px;
- border-radius: 10px;
- margin-left: 2vw;
- margin-right: 2vw;
-}
-
.button {
font-family: monospace;
font-weight: bolder;
@@ -79,4 +66,24 @@
height: 80vh;
overflow-x: hidden;
transition: 0.5s;
+}
+
+#dialog {
+ display: none;
+}
+
+#clickOpen {
+ 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