Add files via upload

codefactor-io · Mario-Kart-Felix · Jan 9, 2021 · Jan 9, 2021 · Jan 9, 2021 · Jan 9, 2021
commit 1b998ba723fa68c7712ff8e3645130952d31e47d
diff --git a/Examples.html b/Examples.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<!-- saved from url=(0119)https://yari-demos.prod.mdn.mozit.cloud/en-us/docs/web/api/geolocation_api/using_the_geolocation_api/_samples_/Examples -->
+<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+        <style type="text/css">
+            body {
+              padding: 0;
+              margin: 0;
+            }
+
+            svg:not(:root) {
+              display: block;
+            }
+
+            .playable-code {
+              background-color: #f4f7f8;
+              border: none;
+              border-left: 6px solid #558abb;
+              border-width: medium medium medium 6px;
+              color: #4d4e53;
+              height: 100px;
+              width: 90%;
+              padding: 10px 10px 0;
+            }
+
+            .playable-canvas {
+              border: 1px solid #4d4e53;
+              border-radius: 2px;
+            }
+
+            .playable-buttons {
+              text-align: right;
+              width: 90%;
+              padding: 5px 10px 5px 26px;
+            }
+        </style>
+
+        <style type="text/css">
+            body {
+  padding: 20px;
+  background-color:#ffffc9
+}
+
+button {
+  margin: .5rem 0;
+}
+
+        </style>
+
+        <title>Using the Geolocation API - Examples - code sample</title>
+    </head>
+    <body>
+
+            <button id="find-me">Show my location</button><br>
+<p id="status"></p>
+<a id="map-link" target="_blank"></a>
+
+
+
+            <script>
+                function geoFindMe() {
+
+  const status = document.querySelector('#status');
+  const mapLink = document.querySelector('#map-link');
+
+  mapLink.href = '';
+  mapLink.textContent = '';
+
+  function success(position) {
+    const latitude  = position.coords.latitude;
+    const longitude = position.coords.longitude;
+
+    status.textContent = '';
+    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
+    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
+  }
+
+  function error() {
+    status.textContent = 'Unable to retrieve your location';
+  }
+
+  if(!navigator.geolocation) {
+    status.textContent = 'Geolocation is not supported by your browser';
+  } else {
+    status.textContent = 'Locating…';
+    navigator.geolocation.getCurrentPosition(success, error);
+  }
+
+}
+
+document.querySelector('#find-me').addEventListener('click', geoFindMe);
+
+            </script>
+
+
+</body></html>