This is dedicated to my friend Jacqui Kenny,

The Agoraphobic Traveller

How does a journey start?

Usually with a map...

and a bit of planning.

With a bit of Google Maps help

Search for Paris

Look for directions

Buy a flight, now go pack your bag!

OK, but how does it actually work?

What is a web browser?

A software used to retrieve and present information from the World Wide Web

What is a programming language?

A language that computers understand and use to execute instructions to generate an output

What is Javascript?

A programming language that can be interpreted by most web browsers

How does Javascript look like?

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 51.573522, lng: -0.124304},
    zoom: 8
  });
}
              

Here an example!

this is a Google map, embedded in our page and centered on Ashmount Primary School

Hold on a second, what was that?

center: {lat: 51.573522, lng: -0.124304},
            

Geographic coordinate system

Enables every location on Earth to be specified by a set of numbers. A common choice of coordinates is latitude, longitude and elevation. - Wiki

Maps can be interactive

try and click anywhere on the map, you can also scroll to zoom and drag to pan

the map is interactive by adding an "event handler" in Javascript

map.addListener('click', function(e) {
  // create a paragraph and fill it with date + coordinates
  let p = document.createElement("p");
  p.innerHTML = `click ${(new Date()).toISOString()} coords ${e.latLng}`;
  // add the paragraph at the top of the "info" box on the page
  let info = document.getElementById('info');
  info.insertBefore(p, info.firstChild);
});
            

now that we know the coordinates of the point we clicked...

we can calculate the distance to Ashmount!

Distance from Ashmount

we use the same event handler as before but we check the distance from ashmount using a function called Haversine

map.addListener('click', function(e) {
  // create a paragraph and fill it with distance + date
  const p = document.createElement("p");
  const now = (new Date()).toISOString();
  const d = haversine_distance(ashmountLatLng.lat, ashmountLatLng.lng, e.latLng.lat(), e.latLng.lng());
  p.innerHTML = `distance ${d}km click ${now}`;
  // add the paragraph at the top of the "info" box on the page
  const info = document.getElementById('info');
  info.insertBefore(p, info.firstChild);
});
              

Now we have everything we need...

for a treasure hunt!

Let's go find where The Agoraphobic Traveller has gone.

A bit of theory first

1. create a list of cities with their coordinates
2. add a picture of each of them as a tip for the next city
3. check if clicks on the map are < a fixed radius from next city
4. if so, proceed to the next clue

In Javascript

if (step < cities.length) { // have we finished?
  if (step < 0) { // have we started?
    showNext();
  } else {
    const city = cities[step];
    // evaluate distance from click
    const d = haversine_distance(city.lat, city.lng, click.lat(), click.lng());
    if (d < 30) { // if distance < 30km go ahead
      addMessage(`Very good! You were just ${d}km off`, null);
      showNext();
    } else {
      addMessage(`Not quite right! You are ${d}km off`, null);
    }
  }
}
            

This is an Algorithm!

An informal definition could be "a set of rules that precisely defines a sequence of operations". - Wiki