Built with blockbuilder.org
forked from anonymous's block: fresh block
license: mit |
Built with blockbuilder.org
forked from anonymous's block: fresh block
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<title>simple open location code builder</title> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { | |
} | |
table { | |
background: #dedede; | |
border-spacing: 1px; | |
border-collapse: separate; | |
margin: 20px; | |
} | |
table tr td { | |
background: #fff; | |
color: #999; | |
font: 9px monospace; | |
height: 20px; | |
text-align: center; | |
width: 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<h3>literate pluscodes (OLC) guide</h3> | |
<p> | |
in this block we walk through the construction of an Open Location Code / pluscode, using just geometry | |
</p> | |
<div class="group"> | |
<table class="four"></table> | |
<aside>top level</aside> | |
</div> | |
<div class="group"> | |
<table class="four"></table> | |
<aside>zoom one</aside> | |
</div> | |
<div class="group"> | |
<table class="four"></table> | |
<aside>zoom two</aside> | |
</div> | |
<div class="group"> | |
<table class="four"></table> | |
<aside>zoom three</aside> | |
</div> | |
<div class="group"> | |
<table class="four"></table> | |
<aside>zoom four</aside> | |
</div> | |
<div class="group"> | |
<table class="twenty"></table> | |
<aside>final detail</aside> | |
</div> | |
<footer></footer> | |
<script> | |
// 20 row and column keys | |
let keys = ('23456789CFGHJMPQRVWX').split('') | |
// default selected grid for each level | |
let defaultGrid = '22' | |
// array to track the currently selected | |
let pluscode = ['22','22','22','22','22','2'] | |
// plus code delimiter | |
let plusDelim = '+' | |
// height and width for grids | |
let height = 400 | |
let width = 400 | |
let itemWidth = height / keys.length | |
// the table way | |
// setup the 20x20 grids | |
let tables = d3.selectAll("table.four") | |
tables.selectAll("tr") | |
.data(keys) | |
.enter().append("tr") | |
.selectAll("td") | |
.data(keys) | |
.enter().append("td") | |
.text(function(d, i) { | |
return d3.select(this.parentNode).datum() + d | |
}) | |
// setup the 4x5 grid | |
let detailGrids = d3.selectAll("table.twenty") | |
detailGrids.selectAll("tr") | |
.data(d3.range(0, 20, 4)) | |
.enter().append("tr") | |
.selectAll("td") | |
.data(d3.range(0, 4)) | |
.enter().append("td") | |
.text(function(d, i) { | |
let index = d3.select(this.parentNode).datum() + d; | |
return keys[index] | |
}) | |
// select grid items based on the current pluscode | |
// update the display | |
// keysToPluscode : Array(String) -> String -> String | |
function keysToPluscode(keys, delim) { | |
return keys.slice(0, 4).join() + delim + keys.slice(4).join() | |
} | |
// pluscodeToLatLon : String -> Obj { lat: Float, lon: Float } | |
function pluscodeToLatLon(code) { | |
} | |
</script> | |
</body> |