2.2 Geolocation Web API – Working with Data and APIs in JavaScript




๐Ÿ’ปhttps://github.com/CodingTrain/Intro-to-Data-APIs-JS

Before diving into communication between client and server (GET and POST requests), let’s look at the Geolocation Web API with navigator.geolocation. This data will be sent to the server and stored in a database in upcoming videos.

๐Ÿ”— Web API Navigator: https://developer.mozilla.org/en-US/docs/Web/API/Navigator

๐ŸŽฅ NEXT LESSON: https://youtu.be/Kw5tC5nQMRY
๐ŸŽฅ PREVIOUS LESSON: https://youtu.be/wxbQP1LMZsw
๐ŸŽฅ FULL COURSE: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X

๐Ÿš‚ Website: http://thecodingtrain.com/
๐Ÿ’– Patreon: https://patreon.com/codingtrain
๐Ÿ›’ Store: https://www.designbyhumans.com/shop/codingtrain/
๐Ÿ“š Books: https://www.amazon.com/shop/thecodingtrain

๐ŸŽฅ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
๐ŸŽฅ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

๐Ÿ”— p5.js: https://p5js.org
๐Ÿ”— Processing: https://processing.org

Welcome to Working with Data and APIs in Javascript!

This course is for aspiring developers who want to learn how to work with data in web applications. How do you retrieve, collect, and store data?

We are now in Module #2! In our previous module, we focused on client-side JavaScript. We now will learn the basics of server-side programming with Node.

๐Ÿ“„ Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

Original source


46 responses to “2.2 Geolocation Web API – Working with Data and APIs in JavaScript”

  1. I have checked and checked my code so many times, I am getting this error message and the lat and lon are not displaying on the page 'Unable to set property 'textContent' of undefined or null reference'. This happens when I add in the…..
    'document.getElementById('latitude').textContent = lat;

    document.getElementById('Longitude').textContent = lon;'
    I also notice that the object position does not display in the console, which I left the 'consol.log' open so I can see if it is registering in there at all. It seems by adding the 'document.get….ETC…' this causes some kind of issue?

  2. wait, i am so confused, i mean i jsut setup a node server? and if i use require in my js it says it undefined. All the people say, that u need a node server?? like i just did that? or is there something i am not getting?

  3. I'm having an issue. After running my code through node, I get an error saying that navigator is not defined. I have tried importing a navigator module into my node modules folder. Am I missing something? I've been successful with pulling up the geolocation prompt whilst working solely offline and not utilizing any kind of localhost server. Help would be appreciated, thank you!

  4. For those you still don't get it.
    Node's js code runs on node.exe on server computer. That server computer has some html, css, js files somewhere in its storage. The server program(Node with your index.js) waits for request data from the network(most likely from the internet). You can tell Node what to do with certain requests in your index.js
    You can make servers with other programs and programming languages as well.

    client's js code are some of the files that Node gives out to the user's browser when they need it. It doesn't run in your node or server computer. It's just a text file. Which is requested by the user along with html and css files.

  5. Super awesome video! Learned a lot as a beginner! Thanks for all the fun and knowledge you are emitting! fo (let stuff of ['bunch of stuff you can try – suggested by Daniel]'){
    timeTakes(stuff) = 5+ hours
    };
    But so worth it!

  6. For me, the most grateful things that I found in your channel is that you explained the long process in the beginning and then you explained the more effective way to write the code. It really helps me to understand it and be creative in the future. Thanks!

  7. Hey Dan!! Love your videos, for anyone else watching and wants to see some more arts-based use of Processing (or dissimilar to Dan's coding style in that he explains everything and I don't lol) check out my channel!

  8. Great stuff! You've made working with Node seem a whole lot less scary. I'm really looking forward to the next installments!ย 
    You got me off my behind, installing Node.js, the express package, and messing with a node server.
    Note: when I ran in Safari on my iMac, it would not allow me to use geolocation even though I was using localhost:3000.
    I ran on Chrome like you did, and what was weirder here was that it never asked for my permission to use Geolocation… it just worked! Somehow, I don't think that is supposed to happen!
    FYI: Info on GPS/geolocation on non-mobile devices: https://www.quora.com/Do-all-laptops-have-G-P-S

  9. Note: warn about Geolocation API requires secure origins and trusted certificates in order to run. As you use "localhost" literally, is treated as secure origin. So as you are able to run your server from "localhost", you can test the feature. But, some dev environments uses fixed IPs, and therefore they're not able to run geolocation API.
    By the way, what about find euclidean – pythagorean distances for closest locations, 3D to cartesian (elevation), Haversine, etc for reverse geo, specially when not third party APIs or map abstractions need to be used (didactic purposes).
    Thanks, great job. Gracias, gran trabajo.

  10. Does getCurrentPosition() need to be passed an anonymous function or can you make a function elsewhere and pass it that to keep things modular?

    I guess I can fire up my laptop and find out.

  11. I have always been more focused on back-end and low-level stuff but have been curious about the basics of web development. I'm very excited to see a series with your level of polish and teaching ability. Can't wait to see this continue!

Leave a Reply