Skip to content

Instantly share code, notes, and snippets.

@charlesroper
Last active December 6, 2020 03:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save charlesroper/9dd9e1ff126809afe4daca23ee8086da to your computer and use it in GitHub Desktop.
Save charlesroper/9dd9e1ff126809afe4daca23ee8086da to your computer and use it in GitHub Desktop.
brc-atlas-bigr test
<!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>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment