The 2nd 1 Hour AI Map Challenge

Every day I am using Bard for one hour to create a Meet in the Middle interactive map. The only real rule I have set for this challenge is that all the JavaScript code for the map has to be written by Bard. 

After spending an initial one hour with Bard yesterday I managed to create a very simple map which allows a user to add two locations (by clicking on the map), then calculates the midpoint between these two locations and finally adds a third marker on that calculated midpoint location. It is in essence a very simple map to work out a midway point to meet between two separate locations.

After spending a second hour with Bard today I wanted the map to be able to accept three different locations (markerA, markerB and markerC) and to work out a midpoint between all three locations and add a marker to that midpoint location. I also want to provide instructions to inform the map user what to do.

TLDR - Here is the completed map after a second hour with Bard - Meet in the Middle.

Prompt No. 1:

add another else statement to the if statement which will add another marker and give it the name 'markerC' -

Bard responded with

if (markerCount === 0) { marker = L.marker([lat, lng]).addTo(map); markerA = marker; marker.bindPopup("I'm marker A!"); } 

else if (markerCount === 1) { marker = L.marker([lat, lng]).addTo(map); markerB = marker; marker.bindPopup("I'm marker B!"); measureDistance(markerA, markerB); } 

else { marker = L.marker([lat, lng]).addTo(map); markerC = marker; marker.bindPopup("I'm marker C!"); 

// You can potentially add logic here to calculate the center of all three markers 

}

Notice how Bard suspects that I now want to be able to calculate a midpoint between all three markers. I do!

Prompt No.2:

update the calculateMidpoint function to calculate a midpoint between all three markers (markerA, markerB and markerC)

Bard returned the following function (and told me that it could be called by adding 'calculateMidpoint() where it had left the comment ' // You can potentially add logic here to calculate the center of all three markers'): 

function calculateMidpoint() {

  var latA = markerA.getLatLng().lat;

  var lngA = markerA.getLatLng().lng;

  var latB = markerB.getLatLng().lat;

  var lngB = markerB.getLatLng().lng;

  var latC = markerC.getLatLng().lat;

  var lngC = markerC.getLatLng().lng;

  var midLat = (latA + latB + latC) / 3;

  var midLng = (lngA + lngB + lngC) / 3;

  // Create a marker for the midpoint

  var midpointMarker = L.marker([midLat, midLng]).addTo(map);

  midpointMarker.bindPopup("I'm the midpoint!");

}

Prompt No.3:

Before my next prompt I changed the CSS style of the map element to 'height: 90%;' and added an 'instructions' element under the map. I now want to add user instructions to this new element in order to prompt the user to add three markers to the map and, after the third marker has been added, add a button to the map. This button will then be used to calculate the midpoint and add the midpoint marker to the map.

In html I added the message 'Add the first location by clicking on the map' to the 'instructions' element. I now want this message to change after the user has added the first marker.

Here is the prompt I gave Bard to change this message:

In the following javascript else if statement add an innerhtml statement to add the message 'Now add the second marker to the map." to a div element with the id 'instructions' -

else if (markerCount === 0) { markerB = L.marker([lat, lng]).addTo(map); markerB.bindPopup("I'm marker B!");

Bard rewrote the statement to add this new instruction:

else if (markerCount === 0) {

  markerB = L.marker([lat, lng]).addTo(map);

  markerB.bindPopup("I'm marker B!");

  // Add the message to the 'instructions' div

  document.getElementById('instructions').innerHTML = 'Now add the second marker to the map.';

}

I then repeated the prompt to update the markerCount  === 1 statement to change the message to "Now add the third marker to the map'. Now I need to add a button to the instructions for after the third marker has been added to the map.

Prompt No.4: 

in this if statement add an innerhtml statement to add a button with the id 'enter' to an element called 'instructions '-

else { markerC = L.marker([lat, lng]).addTo(map); markerC.bindPopup("I'm marker C!"); calculateMidpoint(); // Call the function to calculate midpoint map.off("click"); // Disable click event after third marker }

Bard's suggested I modified the code thus:

else {

  markerC = L.marker([lat, lng]).addTo(map);

  markerC.bindPopup("I'm marker C!");

  // Add the button to the 'instructions' element

  document.getElementById('instructions').innerHTML = '<button id="enter">Calculate       Midpoint</button>';

  map.off("click"); // Disable click event after third marker

}

Now all that remains is to add a click event to the button to call the calculateMidpoint() function.

Prompt No.5

now add a function to call ' calculateMidpoint();' when the 'enter' button is pressed

Bard does not fail me at the last hurdle and replies:

else {

  // ... (your existing code)

  document.getElementById('instructions').innerHTML = '<button id="enter">Calculate Midpoint</button>';

  // Add event listener to the button

  document.getElementById('enter').addEventListener('click', calculateMidpoint);

  map.off("click"); // Disable click event after third marker

}

In Conclusion

After spending a second hour in conversation with Bard we have managed to create a Meet in the Middle map which can calculate the midpoint between three different locations. We have also added some basic user instructions to the map.

In tomorrow's 1 Hour AI Map Challenge we could ask Bard to customize the three markers with letters (A, B and C) and add a different kind of marker to indicate the final meeting place. We also really need to add some conditional logic to the map so that the user can choose to find a midway point between 2 or 3 locations, depending on whether you are meeting up with 1 or 2 friends.