My First Web Page: Lesson 9: JavaScript, STEM and GPS

Create Your Own Live Mathematics and STEM Web Pages

W3Schools.com: Orientation Event

W3Schools.com: Google Maps Basic

Google: Maps Static Overview

Google: Maps Static Developer Guide

  

Introduction: A Sampler Lesson 2: Styles and Layout Lesson 3: Adding Beautiful Mathematics to your web page Lesson 4: Interacting with your web page Lesson 5(a): Adding a GeoGebra Applet Lesson 5(b): Adding a Geometry Expressions Applet Lesson 6(a): Creating a GeoGebra Assessment Task Lesson 6(b): Creating a Geometry Expressions Assessment Task Lesson 7: Interacting with Third Party Apps Lesson 8: JavaScript, STEM and Internal Device Sensors Lesson 9: JavaScript, STEM and GPS Lesson 10: Adding Web Bluetooth Support (1): Talking to your SensorTag Lesson 11: Adding Web Bluetooth Support (2): Talking to your LaunchPad Lesson 12: Introduction to HTML Graphics: Canvas

  

---

  

Modern devices on all platforms (desktop, tablet and phone) are location aware - and I was amazed at how easy it was to access GPS coordinates using JavaScript. In fact, having students track their own position as they move around the school or between school and home offers some lovely opportunities for deeper learning of a multitude of STEM concepts.

Use the default code to study the relatively simple script required to access the GPS coordinates of your device. It is based upon the W3Schools GeoLocation tutorial.

If you have any questions or would like to share your experience with this utility, please drop me an email!

Back to Top

  

Display My Web Page

RESET Default Page

  

Adding All Our Navigation Tools

Show

Back to Top

  

Add Two Locations Create This Page

Now we add all the tools we are using here to compare and track the locations of two points.

Use the navjs.js button below to study the code used to collect GPS coordinates and then functions which act upon these.

Note the computations which are added to compute distance (and compass bearing). The distance calculation is called the haversine formula.

  navjs.js ⇒

 

 

---

    

Adding GeoGebra to the Mix

Show

Back to Top

  

Set Code Create This Page

GeoGebra once again is readily adaptable to suit this context - in this case, plotting the start and end points of our GeoLocation tracking experiment.

  

Adding A Google Map

Show

Back to Top

  

Set Code Create This Page

Google Maps are amazing. You can even include them in your own web pages, as I have done here - however, you do need to prove to Google that you own the web site that you are using. For that, you need a key. Don't worry, though - our friends at W3Schools have made it easy with a step-by-step guide which I encourage you to use.

One point to note: it took me some days of frustration to work out that, as well as the key, I also needed to set up my billing information with Google for my map to work. Don't worry - the Static Maps API is a free service so you will not actually be charged anything.

  

Add a Heart Rate Monitor?

Show

Back to Top

  

Set Code Personal Fitness Tracker Create This Page

If you have access to a Bluetooth LE-enabled device, then you can easily add a Heart Rate Monitor and create your own home-made fitness tracker! The BLE heart rate script transmits a value using the Bluetooth SIG Heart Rate Profile and should work with most common heart rate monitors.

  app1.js ⇒

heartRateSensor.js ⇒

 

 

---

 

Back to Top

 

Home ← Live Mathematics and STEM on the Web ← My First Web Page: Introduction ← Lesson 9