Rplus/index.html

## index.html
<!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>

## lyrs=m&x=54899&y=28054&z=16.png

      
    Raw
  

              lyrs=m&x=54899&y=28054&z=16.png
            
          
## main.js
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);
  }
});
	<!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);
	}
	});