Refactoring to split logic between <Map> and a brand new <LiveMap> component.

src/lib/geo.ts

@@ -0,0 +1,27 @@
+
+
+// cf https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_(JavaScript/ActionScript,_etc.)
+export const lon2tile = (lon: number, zoom: number) => {
+  return ((Number(lon) + 180) / 360) * Math.pow(2, zoom);
+};
+export const lat2tile = (lat: number, zoom: number) => {
+  return (
+    ((1 -
+      Math.log(
+        Math.tan((Number(lat) * Math.PI) / 180) +
+          1 / Math.cos((Number(lat) * Math.PI) / 180)
+      ) /
+        Math.PI) /
+      2) *
+    Math.pow(2, zoom)
+  );
+};
+
+export function tile2long(x: number, z: number) {
+  return (x / Math.pow(2, z)) * 360 - 180;
+}
+
+export function tile2lat(y: number, z: number) {
+  var n = Math.PI - (2 * Math.PI * y) / Math.pow(2, z);
+  return (180 / Math.PI) * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
+}