diff --git a/src/content/docs/js/G/Geolocation API.mdx b/src/content/docs/js/G/Geolocation API.mdx new file mode 100644 index 0000000..e7871f4 --- /dev/null +++ b/src/content/docs/js/G/Geolocation API.mdx @@ -0,0 +1,41 @@ +--- +title: Geolocation API +--- +import { LinkCard } from '@astrojs/starlight/components'; +import Playground from '@components/Playground'; +import Geolocation_getCurrentPosition from '@snippets/Geolocation API/Geolocation.getCurrentPosition().js?raw' +import Geolocation_watchPosition from '@snippets/Geolocation API/Geolocation.watchPosition().js?raw' +import Geolocation_watchPosition_html from '@snippets/Geolocation API/sample.html?raw' + +The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information. + +Turn on location services in systems settings. + +## Methods + +### navigator.geolocation.getCurrentPosition() + + + +### navigator.geolocation.watchPosition() + + + +## References + + diff --git a/src/content/snippets/Geolocation API/Geolocation.getCurrentPosition().js b/src/content/snippets/Geolocation API/Geolocation.getCurrentPosition().js new file mode 100644 index 0000000..374a505 --- /dev/null +++ b/src/content/snippets/Geolocation API/Geolocation.getCurrentPosition().js @@ -0,0 +1,13 @@ +if (!navigator.geolocation) { + console.error('Geolocation API not supported in this browser.'); + return; +} + +// ___Begin visible code snippet___ + +const Geolocation = navigator.geolocation; + +Geolocation.getCurrentPosition((position) => { + console.log('Current location'); + console.log(`Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}`); +}); diff --git a/src/content/snippets/Geolocation API/Geolocation.watchPosition().js b/src/content/snippets/Geolocation API/Geolocation.watchPosition().js new file mode 100644 index 0000000..d1296a7 --- /dev/null +++ b/src/content/snippets/Geolocation API/Geolocation.watchPosition().js @@ -0,0 +1,34 @@ +if (!navigator.geolocation) { + console.error('Geolocation API not supported in this browser.'); + return; +} + +// ___Begin visible code snippet___ + +const Geolocation = navigator.geolocation; +let timestamp; +const clearButton = document.getElementById('clear-button'); + +console.log( + 'Give the console some time to output the updates. Remember to click clear to stop the watcher completely.' +); + +clearButton.addEventListener('click', handleClick); + +Geolocation.watchPosition( + (position) => { + timestamp = new Date(position.timestamp); + console.log(`Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}, Timestamp: ${timestamp}`); + }, + (error) => { + console.error(`ERROR(${error.code}): ${error.message}`); + }, + { + enableHighAccuracy: true, + maximumAge: 0, + } +); + +function handleClick() { + location.reload(); +} diff --git a/src/content/snippets/Geolocation API/sample.html b/src/content/snippets/Geolocation API/sample.html new file mode 100644 index 0000000..04f5558 --- /dev/null +++ b/src/content/snippets/Geolocation API/sample.html @@ -0,0 +1,3 @@ +
+ +