Skip to content

Instantly share code, notes, and snippets.

@Rplus
Last active Nov 6, 2018
Embed
What would you like to do?
check-position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>+ position</title>
<script src="main.js" defer></script>
<style>
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.box {
position: relative;
display: flex;
height: 90vh;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: inset 0 0 0 10px;
}
.box::after {
content: 'update: ' attr(data-update);
position: absolute;
right: 1em;
bottom: 1em;
}
.img {
position: relative;
font-size: 256px;
width: 1em;
height: 1em;
margin: 0 auto;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url('./lyrs=m&x=54899&y=28054&z=16.png');
}
.img[data-checking] {
box-shadow: 0 0 0 3px;
}
.img[data-checking]::after {
content: 'checking...';
position: absolute;
top: 0;
font-size: 1rem;
}
.img::before {
content: '';
position: absolute;
top: var(--yp, 90%);
left: var(--xp, 70%);
width: var(--size, .5em);
height: var(--size, .5em);
transform: translate(-50%, -50%);
box-shadow: inset 0 0 .25em 2px;
border-radius: 50%;
color: #999;
pointer-events: none;
background-image:
linear-gradient(currentColor, currentColor),
linear-gradient(currentColor, currentColor);
background-size: 50% 3px, 3px 50%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box">
<div class="img"></div>
</div>
</body>
</html>
let checkPosition = () => {
console.log('checkPosition');
navigator.geolocation.getCurrentPosition((e) => {
setPosition(e.coords);
img.checker = setTimeout(() => {
checkPosition();
}, (e.coords.accuracy < 100 ) ? 500 : 30000 );
});
};
let p1 = [25.055554, 121.569250];
let p2 = [25.050949, 121.574685];
let imgW = 550;
let box = document.querySelector('.box');
let img = document.querySelector('.img');
let setPosition = (coords) => {
console.log('accuracy', coords.accuracy);
let xp = (coords.latitude - p1[0]) / (p2[0] - p1[0]);
let yp = (coords.longitude - p1[1]) / (p2[1] - p1[1]);
console.log({xp, yp});
img.style.setProperty('--xp', `${xp * 100}%`);
img.style.setProperty('--yp', `${yp * 100}%`);
img.style.setProperty('--size', `${(coords.accuracy / imgW)}em`);
box.dataset.update = new Date().toLocaleTimeString();
};
img.addEventListener('click', () => {
if (!img.dataset.checking) {
img.dataset.checking = true;
checkPosition();
} else {
delete img.dataset.checking;
clearTimeout(img.checker);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment