Last active
December 6, 2020 03:22
-
-
Save charlesroper/9dd9e1ff126809afe4daca23ee8086da to your computer and use it in GitHub Desktop.
brc-atlas-bigr test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>brc-atlas-bigr test</title> | |
<script src="https://unpkg.com/brc-atlas-bigr/dist/bigr.min.umd.js"></script> | |
<script src="https://unpkg.com/file-saver@2.0.5/dist/FileSaver.js"></script> | |
</head> | |
<body> | |
<header> | |
<h1>Map data to GeoJSON</h1> | |
</header> | |
<main> | |
<form action=""> | |
<p>Create GeoJson from data</p> | |
<label for="gridReference">Grid Reference <em>*</em></label> | |
<input id="gridReference" name="gridReference" /> | |
<button type="submit">Submit</button> | |
</form> | |
<div id="download"></div> | |
</main> | |
<footer> | |
<p> | |
<a href="https://glitch.com/edit/#!/bigr-test">See the code.</a> | |
</p> | |
</footer> | |
</body> | |
<script> | |
// Get the URL query string and extract the gridReference value | |
// See https://medium.com/swlh/urlsearchparams-in-javascript-df524f705317 | |
var params = new URLSearchParams(window.location.search); | |
var gr = params.get("gridReference"); | |
// If there is a gridReference value, call the evalData function | |
if (gr) { | |
evalData(gr); | |
} | |
function evalData(gr) { | |
// Remove spaces from the grid reference | |
gr = gr.replace(/\s+/g, ""); | |
// Check to see if the grid reference is valid or not | |
try { | |
var grCheck = bigr.checkGr(gr); | |
console.log(grCheck); | |
} catch (err) { | |
console.error(err); | |
} | |
// If the grid reference is valid... | |
if (grCheck) { | |
// Set the projections | |
var PROJ = "wg"; | |
// Log out all of the low grid references | |
var lowerGrs = bigr.getLowerResGrs(gr); | |
console.log(lowerGrs); | |
// Log out the centroid | |
var centroid = bigr.getCentroid(gr, PROJ); | |
console.log(centroid); | |
// Create a geoJSON object | |
var geoJsonObject = bigr.getGjson(gr, PROJ, "square"); | |
console.log(geoJsonObject); | |
// Convert the geoJSON object into a string | |
var geoJson = JSON.stringify(geoJsonObject, null, 2); | |
// Create a button element | |
var btn = document.createElement("button"); | |
btn.innerText = "Download"; | |
// Add the geoJson string as a property on the element object | |
btn.geoJson = geoJson; | |
// Add an event listener on the button and call the downloadGeoJson | |
// function when clicked | |
btn.addEventListener("click", downloadGeoJson, false); | |
// Add the button inside div#download | |
var dl = document.getElementById("download"); | |
dl.appendChild(btn); | |
function downloadGeoJson(event) { | |
var blob = new Blob([event.currentTarget.geoJson], { | |
type: "application/json", | |
}); | |
saveAs(blob, "geojsondata.json"); | |
} | |
} | |
} | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment