29:null 2a:["$","title",null,{"children":"Mobile phone geolocation GPS | Andy Smy | Observable"}] 2f:T9a2,drawProxyMap = { await currentPosition.latitude; if(document.getElementById('initialX').value == 0 || isNaN(document.getElementById('initialX').value)) { //document.getElementById('initialX').value = currentPosition.longitude; //document.getElementById('initialY').value = currentPosition.latitude; } var context = document.getElementById("canvas").getContext("2d"); //context.clearRect(0, 0, 300, 300); //context.strokeStyle = '#cccccc'; //context.lineWidth = "1"; const scaling = sampleRate; const offsetY = ((parseFloat(document.getElementById('initialY').value) * scaling) - (currentPosition.latitude * scaling)) * -50; const offsetX = ((parseFloat(document.getElementById('initialX').value) * scaling) - (currentPosition.longitude * scaling)) * -50; const plotSize = Math.trunc(currentPosition.accuracy); if(plotSize > 4) { context.fillStyle = '#F0F0FF'; } else { context.fillStyle = '#0000FF'; } //context.fillRect(1500 - (plotSize/2) + offsetX, 3000 - 1500 + (plotSize/2) - offsetY, plotSize, plotSize); context.beginPath(); context.arc(1500 + offsetX, 1500 - offsetY, plotSize, 0, 2 * Math.PI); context.fill(); const safeDistance = 100; if(offsetX <= -safeDistance || offsetX >= safeDistance) { context.drawImage(document.getElementById("canvas"), 0, 0, 3000, 3000, -offsetX, 0, 3000, 3000); document.getElementById('initialX').value = currentPosition.longitude; } if(offsetY <= -safeDistance || offsetY >= safeDistance) { context.drawImage(document.getElementById("canvas"), 0, 0, 3000, 3000, 0, offsetY, 3000, 3000); document.getElementById('initialY').value = currentPosition.latitude; } var displayContext = document.getElementById("displayCanvas").getContext("2d"); displayContext.fillStyle = '#FFFFFF'; displayContext.fillRect(0, 0, 300, 300); displayContext.strokeStyle = '#cccccc'; displayContext.drawImage(document.getElementById("canvas"), 1350, 1350, 300, 300, 0, 0, 300, 300); for(let i=0;i<=300;i+=50) { displayContext.beginPath(); displayContext.moveTo(i, 0); displayContext.lineTo(i, 300); displayContext.stroke(); displayContext.beginPath(); displayContext.moveTo(0, i); displayContext.lineTo(300, i); displayContext.stroke(); } return { accuracy: Math.trunc(currentPosition.accuracy) + 'm', offsetX: offsetX, offsetY: offsetY, timestamp: Date(currentPosition.timestamp).toString() } }30:[] 2d:{"id":"f3e9f35df212e65d","slug":null,"title":"Mobile phone geolocation GPS","thumbnail":"bbccc67d1fc1174236488ce8b649eb657d13b5eaa3a79dcfb54b2ea1c0f63374","access_level":"public","create_time":"$D2024-07-31T12:14:29.444Z","update_time":"$D2024-08-05T19:37:16.256Z","view_time":null,"first_public_time":"$D2024-07-31T12:14:29.444Z","fork":{"id":"2cb00596fc046fcb","slug":null,"title":"Mobile phone accelerometer and spirit level","owner":{"id":"8009a012d73ccc24","login":"andysmee","name":"Andy Smy"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8009a012d73ccc24","login":"andysmee","name":"Andy Smy","avatar_url":"https://avatars-next.observableusercontent.com/b97842f8f180a0a1c3373eb40effd86beb9906c1075f408f2613dedd5115da1c","tier":"starter_2024"},"version":617,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8af36cf1436b1198","login":"andysmee","name":"Andy Smy","avatar_url":"https://avatars-next.observableusercontent.com/b97842f8f180a0a1c3373eb40effd86beb9906c1075f408f2613dedd5115da1c","tier":null}],"members":[{"type":"team","id":"8009a012d73ccc24","login":"andysmee","name":"Andy Smy","avatar_url":"https://avatars-next.observableusercontent.com/b97842f8f180a0a1c3373eb40effd86beb9906c1075f408f2613dedd5115da1c","tier":"starter_2024","role":"editor"},{"type":"individual","id":"8af36cf1436b1198","login":"andysmee","name":"Andy Smy","avatar_url":"https://avatars-next.observableusercontent.com/b97842f8f180a0a1c3373eb40effd86beb9906c1075f408f2613dedd5115da1c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Mobile phone geolocation GPS","cells":[{"id":0,"value":"# Mobile phone geolocation GPS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"PermissionStatus = navigator.permissions.query({ name: \"geolocation\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"perms = {\n return {\n name: PermissionStatus.name,\n state: PermissionStatus.state}}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"locator = { \n //if(monitor) {\n if (navigator.geolocation) {\n return { geo: navigator.geolocation.watchPosition((position) => {\n \n /*mutable currentPosition.latitude = position.coords.latitude;\n mutable currentPosition.longitude = position.coords.longitude;\n mutable currentPosition.heading = position.coords.heading;\n mutable currentPosition.speed = position.coords.speed;\n mutable currentPosition.timestamp = new Date(position.timestamp).toString();*/\n\nmutable currentPosition = position.coords;\n //drawProxyMap();\n })\n };\n } else {\n document.getElementById('debug').innerHTML = 'Not supported';\n }\n \n \n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"mutable currentPosition = {\n return {\n \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":260,"value":"**Mobile geolocation.**\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"samples = {\n let i = 0;\n while (monitor) {\n yield Promises.delay(sampleRate, ++i);\n //drawProxyMap();\n }\n //locator.clearWatch(()=>{});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"startup = {\n await canvas;\n await sampleRate;\n var context = document.getElementById(\"canvas\").getContext(\"2d\");\n context.fillStyle = '#FFFFFF';\n context.fillRect(0, 0, 3000, 3000);\n context.strokeStyle = '#cccccc';\n\n recentre();\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"function recentre() {\n document.getElementById('initialX').value = 0;\n document.getElementById('initialY').value = 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"debug = htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"canvas = html`