diff options
| -rw-r--r-- | index.html | 24 |
1 files changed, 18 insertions, 6 deletions
@@ -2,6 +2,7 @@ <html> <head> <title>GPS coordinate precision viewer</title> + <meta charset="UTF-8"> <meta name="description" content="a tool for visualizing the precision of GPS coordinates at different rounding factors" /> <script src="maplibre-gl.js"></script> @@ -53,21 +54,31 @@ <span id="preview"></span> <label> <span>precision:</span> - <input id="precision" type="range" min="0" max="12" value="3" /> + <input id="precision" type="range" min="0" max="6" /> </label> </nav> <div id="map"></div> <script> + const preview = document.getElementById('preview'); + const precision = document.getElementById('precision'); + + let center = [13.40, 52.52]; + let digits = 2; + if (location.hash) { + const values = location.hash.slice(1).split(','); + digits = (values[0].split('.')[1] ?? '').length; + center = values.map(parseFloat); + } + + precision.value = digits; + const map = new maplibregl.Map({ style: 'https://tiles.openfreemap.org/styles/positron', - center: [13.405, 52.520], - zoom: 11.5, + center, + zoom: (digits * 3.32) + 5, container: 'map', }); - const preview = document.getElementById('preview'); - const precision = document.getElementById('precision'); - const round = (n, digits) => { const exp = 10 ** digits; const middle = Math.round(n * exp); @@ -87,6 +98,7 @@ const [lat, flat, clat] = round(center.lat, digits); preview.innerText = `${lng.toFixed(digits)}°, ${lat.toFixed(digits)}°`; + location.hash = `#${lng.toFixed(digits)},${lat.toFixed(digits)}`; map.getSource('center').setData({ 'type': 'Feature', |