72 lines
3.1 KiB
Markdown
72 lines
3.1 KiB
Markdown
---
|
|
id: 587d7faf367417b2b2512be8
|
|
title: Get Geolocation Data to Find A User's GPS Coordinates
|
|
challengeType: 6
|
|
---
|
|
|
|
## Description
|
|
<section id='description'>
|
|
Another cool thing you can do is access your user's current location. Every browser has a built in navigator that can give you this information.
|
|
The navigator will get the user's current longitude and latitude.
|
|
You will see a prompt to allow or block this site from knowing your current location. The challenge can be completed either way, as long as the code is correct.
|
|
By selecting allow, you will see the text on the output phone change to your latitude and longitude.
|
|
Here's code that does this:
|
|
<blockquote>if (navigator.geolocation){<br> navigator.geolocation.getCurrentPosition(function(position) {<br> document.getElementById('data').innerHTML="latitude: "+ position.coords.latitude + "<br>longitude: " + position.coords.longitude;<br> });<br>}</blockquote>
|
|
First, it checks if the <code>navigator.geolocation</code> object exists. If it does, the <code>getCurrentPosition</code> method on that object is called, which initiates an asynchronous request for the user's position. If the request is successful, the callback function in the method runs. This function accesses the <code>position</code> object's values for latitude and longitude using dot notation and updates the HTML.
|
|
</section>
|
|
|
|
## Instructions
|
|
<section id='instructions'>
|
|
Add the example code inside the <code>script</code> tags to check a user's current location and insert it into the HTML.
|
|
</section>
|
|
|
|
## Tests
|
|
<section id='tests'>
|
|
|
|
```yml
|
|
tests:
|
|
- text: Your code should use <code>navigator.geolocation</code> to access the user's current location.
|
|
testString: assert(code.match(/navigator\.geolocation\.getCurrentPosition/g), 'Your code should use <code>navigator.geolocation</code> to access the user's current location.');
|
|
- text: Your code should use <code>position.coords.latitude</code> to display the user's latitudinal location.
|
|
testString: assert(code.match(/position\.coords\.latitude/g), 'Your code should use <code>position.coords.latitude</code> to display the user's latitudinal location.');
|
|
- text: Your code should use <code>position.coords.longitude</code> to display the user's longitudinal location.
|
|
testString: assert(code.match(/position\.coords\.longitude/g), 'Your code should use <code>position.coords.longitude</code> to display the user's longitudinal location.');
|
|
- text: You should display the user's position within the <code>data</code> div element.
|
|
testString: assert(code.match(/document\.getElementById\(\s*?('|")data\1\s*?\)\.innerHTML/g), 'You should display the user's position within the <code>data</code> div element.');
|
|
|
|
```
|
|
|
|
</section>
|
|
|
|
## Challenge Seed
|
|
<section id='challengeSeed'>
|
|
|
|
<div id='html-seed'>
|
|
|
|
```html
|
|
<script>
|
|
// Add your code below this line
|
|
|
|
|
|
// Add your code above this line
|
|
</script>
|
|
<h4>You are here:</h4>
|
|
<div id="data">
|
|
|
|
</div>
|
|
```
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</section>
|
|
|
|
## Solution
|
|
<section id='solution'>
|
|
|
|
```js
|
|
// solution required
|
|
```
|
|
</section>
|