quadbin.js

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>quadbin.js</title>
    <script src="https://unpkg.com/quadbin@latest/dist/umd/index.js"></script>
  </head>

  <body>
    <div id="output"></div>
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0; 
}
#output {
  padding: 8px 8px;
  font-family: Courier;
  width: 100vw;
  height: 100vh;
}

JavaScript

const output = document.getElementById('output');

// Enter any GeoJSON geometry. Use https://geojson.io to create using UI
const rome = {
  "type": "Point",
  "coordinates": [12.494731101217553, 41.891888075056386],
}

const londonParis = {
  "type": "LineString",
  "coordinates": [
    [-0.17550153192541984, 51.47921660335521],
    [2.384687820900666, 48.82988641407405]
  ],
}

const geometry = londonParis;
const cells = quadbin.geometryToCells(geometry, 10);

// Write to page
output.innerHTML = `GEOMETRY:</br>
${JSON.stringify(geometry, null, 2).replaceAll('\n', '</br>').replaceAll(' ', '&nbsp;')}
</br></br>
CELLS:</br>
${cells.join('</br>')}`;