From d222764a2fd498ded2bc90398a4e148dfe9e698a Mon Sep 17 00:00:00 2001 From: Ryan <100028731@mvla.net> Date: Tue, 18 Oct 2022 13:56:20 -0700 Subject: [PATCH 1/3] Add location tracker --- src/components/Map.js | 124 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 121 insertions(+), 3 deletions(-) diff --git a/src/components/Map.js b/src/components/Map.js index 4ea194e..f613570 100644 --- a/src/components/Map.js +++ b/src/components/Map.js @@ -25,11 +25,117 @@ const Empty = ( const Loading = ; const Error = (error: string) =>
{error}
; -const handleSubmit = event => { - event.preventDefault(); +// borders for the map +const BryantLatitude = 37.36132515401568; +const OakLatitude = 37.35678726844796; +const TrumanLongitude = -122.06870514131386; +const SoftballLongitude = -122.06433631650839; + +const locationToPixels = (latitude, longitude) => { + let canvas = document.getElementById('map'); + let LatitudePixelConstant = Math.abs( + (OakLatitude - BryantLatitude) / canvas.width + ); + let LongitudePixelConstant = Math.abs( + (TrumanLongitude - SoftballLongitude) / canvas.height + ); + let x = (latitude - BryantLatitude) / LatitudePixelConstant; + let y = (longitude - SoftballLongitude) / LongitudePixelConstant; + return [Math.abs(Math.round(x)), Math.abs(Math.round(y))]; +}; + +const debug = (...data) => { + if (window.location.hostname !== 'mvhs.io') { + console.log(...data); + } +}; + +const geolocation = () => { + debug('asdf'); + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition( + position => { + let canvas = document.getElementById('map'); + let ctx = canvas.getContext('2d'); + // draw map + let img = new Image(); + img.src = map; + img.onload = () => { + ctx.drawImage(img, 0, 0, canvas.width, canvas.height); + let pixels = locationToPixels( + position.coords.latitude, + position.coords.longitude + ); + let x = pixels[0]; + let y = pixels[1]; + if ( + x > canvas.width + 100 || + y > canvas.height - 100 || + x < -100 || + y < -100 + ) { + document.getElementById('result').innerHTML = + "Your location can't be placed on the map. Tip: If you're actually at school, try using a mobile device. They tend to have better location information"; + return; + } + let radius; + if (position.coords.accuracy < 100) { + // this time its accurate + let LatitudePixelConstant = Math.abs( + (OakLatitude - BryantLatitude) / canvas.width + ); + let LongitudePixelConstant = Math.abs( + (TrumanLongitude - SoftballLongitude) / canvas.height + ); + radius = position.coords.accuracy / 111111; + let radiusX = radius / LatitudePixelConstant; + let radiusY = radius / LongitudePixelConstant; + radius = Math.max(radiusX, radiusY); + } else { + radius = 200; + document.getElementById('result').innerHTML = + 'Your location is inaccurate (accuracy > 100m). Circle may be completely wrong. Tip: Try using a mobile device. They tend to have better location information'; + } + console.log(radius); + ctx.beginPath(); + ctx.arc(x, y, radius, 0, 2 * Math.PI, false); + ctx.lineWidth = 5; + ctx.strokeStyle = '#003300'; + ctx.stroke(); + }; + }, + error => { + debug('err'); + }, + { enableHighAccuracy: true, timeout: Infinity, maximumAge: 0 } + ); + } else { + debug('no geolocation'); + } +}; + +const loadImage = () => { + debug('image onload'); + // makes canvas the size of the map + let canvas = document.getElementById('map'); + let ctx = canvas.getContext('2d'); + let img = new Image(); + img.onload = () => { + canvas.width = img.naturalWidth; + canvas.height = img.naturalHeight; + ctx.drawImage(img, 0, 0); + debug('img loaded'); + debug(img); + }; + img.src = map; + debug(img); + debug(canvas); }; const Map = (props: Props) => { + try { + loadImage(); // bad hack to force the image to load whether or not onload is called + } catch (e) {} /* commenting out search return (
@@ -80,7 +186,19 @@ const Map = (props: Props) => { return (
- map + +
+

+

); From 3f8490b82f6f33738cb717cf8f8e3698303e647b Mon Sep 17 00:00:00 2001 From: Ryan <100028731@mvla.net> Date: Thu, 10 Nov 2022 11:04:42 -0800 Subject: [PATCH 2/3] Apply changes --- src/components/Map.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/Map.js b/src/components/Map.js index f613570..5e79f5c 100644 --- a/src/components/Map.js +++ b/src/components/Map.js @@ -51,7 +51,6 @@ const debug = (...data) => { }; const geolocation = () => { - debug('asdf'); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( position => { @@ -102,20 +101,25 @@ const geolocation = () => { ctx.lineWidth = 5; ctx.strokeStyle = '#003300'; ctx.stroke(); + + ctx.beginPath(); + ctx.arc(x, y, 5, 0, 2 * Math.PI, false); + ctx.lineWidth = 5; + ctx.fillStyle = '#FF0000'; + ctx.fill(); }; }, error => { - debug('err'); + debug(error); }, { enableHighAccuracy: true, timeout: Infinity, maximumAge: 0 } ); } else { - debug('no geolocation'); + alert('no geolocation'); } }; const loadImage = () => { - debug('image onload'); // makes canvas the size of the map let canvas = document.getElementById('map'); let ctx = canvas.getContext('2d'); @@ -124,12 +128,8 @@ const loadImage = () => { canvas.width = img.naturalWidth; canvas.height = img.naturalHeight; ctx.drawImage(img, 0, 0); - debug('img loaded'); - debug(img); }; img.src = map; - debug(img); - debug(canvas); }; const Map = (props: Props) => { @@ -194,7 +194,7 @@ const Map = (props: Props) => { border: 'none' }} > - Locate yourself (may be very inaccurate) + Click to locate yourself (mobile devices strongly recommended)

From d824f9a7646d6da93a74c0be5e6cafd702e38ffd Mon Sep 17 00:00:00 2001 From: Ryan <100028731@mvla.net> Date: Thu, 10 Nov 2022 11:10:09 -0800 Subject: [PATCH 3/3] Add more fixes --- src/components/Map.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/Map.js b/src/components/Map.js index 5e79f5c..d4b3b53 100644 --- a/src/components/Map.js +++ b/src/components/Map.js @@ -44,12 +44,6 @@ const locationToPixels = (latitude, longitude) => { return [Math.abs(Math.round(x)), Math.abs(Math.round(y))]; }; -const debug = (...data) => { - if (window.location.hostname !== 'mvhs.io') { - console.log(...data); - } -}; - const geolocation = () => { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( @@ -110,12 +104,14 @@ const geolocation = () => { }; }, error => { - debug(error); + document.getElementById('result').innerHTML = + "Your computer isn't able to use Geolocation."; }, { enableHighAccuracy: true, timeout: Infinity, maximumAge: 0 } ); } else { - alert('no geolocation'); + document.getElementById('result').innerHTML = + "Your computer isn't able to use Geolocation."; } };