Add Geolocation API

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()
+
+<Playground
+  client:only="react"
+  languages={{
+    js: Geolocation_getCurrentPosition
+  }}
+/>
+
+### navigator.geolocation.watchPosition()
+
+<Playground
+  client:only="react"
+  languages={{
+    js: Geolocation_watchPosition,
+    html: Geolocation_watchPosition_html
+  }}
+/>
+
+## References
+
+<LinkCard
+  title="Geolocation API - Web APIs | MDN"
+  href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API"
+  target="_blank"
+/>

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}`);
+});

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();
+}

src/content/snippets/Geolocation API/sample.html

@@ -0,0 +1,3 @@
+<div>
+  <button id="clear-button">Clear the Geolocation Watcher</button>
+</div>