Skip to content
Snippets Groups Projects
Commit 0759ccdb authored by Jakob Severin Steffensen Hjelseth's avatar Jakob Severin Steffensen Hjelseth
Browse files

Merge branch '9-buffer' into 'main' 

Resolve "Buffer"

Closes #9

See merge request !24
parents aa33404e 0189c584
No related branches found
No related tags found
2 merge requests!28Resolve "Dissolve",!24Resolve "Buffer"
Pipeline #234766 passed
Stage: deploy
Hide whitespace changes
Inline Side-by-side
css/style.css
+ 4
− 0
View file @ 0759ccdb
......@@ -5,6 +5,10 @@
margin: 0;
}
p {
font-size: 18px;
}
.box {
font-family: monospace;
background-color: orange;
......
index.html
+ 16
− 1
View file @ 0759ccdb
......@@ -9,6 +9,8 @@
<!-- 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/@turf/turf@6/turf.min.js'></script>
</head>
<body class="standard">
......@@ -75,6 +77,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 a layer to create a buffer around:</p>
<select id="bufferSelect">Layer:</select>
<p>Write the distance you want for the buffer (in meter):</p>
<input id="bufferDistance">
<p>Choose a name for the new buffer:</p>
<input id="bufferName"><br>
<button class="button" style="font-size: 25px;" onclick="makeBuffer()">Make buffer</button>
</div>
<div id="differenceBox" class="box">
......@@ -161,7 +174,7 @@
<div style="padding-right: 2vw;">
<svg style="cursor: pointer; border: none; position: relative; color: orangered; z-index: 999;" onclick="openBox('tutorialBox')"
xmlns="http://www.w3.org/2000/svg" width="6vh" height="6v" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
xmlns="http://www.w3.org/2000/svg" width="6vh" height="6vh" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
</svg>
</div>
......@@ -179,8 +192,10 @@
<script src="javascript/fileHandler.js"></script>
<script src="javascript/geoJSON.js"></script>
<script src="javascript/leafletLayerControl.js"></script>
<script src="javascript/buffer.js"></script>
<!-- Imported js -->
<!--<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>-->
<!-- <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script> -->
</body>
......
javascript/buffer.js 0 → 100644
+ 24
− 0
View file @ 0759ccdb
/*
Link til nettside med turfjs-funksjoner:
https://turfjs.org/docs/
*/
// Fyller select med alternativ:
var s = document.getElementById("bufferSelect");
s.options.lenght = 0;
for (key in overlayMaps) {
s.add(new Option(key, overlayMaps[key]));
}
function makeBuffer() {
var layer = document.getElementById("bufferSelect").value;
var distance = parseFloat(document.getElementById("bufferDistance").value) / 10^3;
var name = document.getElementById("bufferName").value;
var buffer = L.geoJSON(turf.buffer(layer, distance, {units: "kilometers"})).addTo(map);
overlayMaps[name] = buffer;
}
\ No newline at end of file
javascript/geoJSON.js
+ 4
− 0
View file @ 0759ccdb
......@@ -80,6 +80,10 @@ var test2 = L.geoJSON();
test1.addData(U);
test2.addData(TC);
var point = turf.point([10.403787, 63.420031]);
var buffered = turf.buffer(point, 500, {units: "meters"});
var test3 = L.geoJSON(buffered).addTo(map);
// Det jeg skal ha med i ferdig versjon:
var Arealdekke = L.geoJSON();
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment