The 3rd Hour of the 1 Hour AI Map Challenge

In the first two hours of the One Hour AI Map challenge I created a very basic Meet in the Middle interactive map. If you want a recap (or missed the first two posts) then check out:

One Hour AI Map Challenge - Part One
One Hour AI Map Challenge - Part Two

After the first two hours of chatting with Bard I managed to create a map which could accept three different locations and work out the midpoint between these three locations and add a marker to the map to indicate this midpoint location.

In the third hour of the One Hour AI Map Challenge I want Bard to add custom numbered markers (1, 2 & 3 ) to the map. I also want to add a 'share' button to the map which will post a message ('Let's meet here') to Twitter with a link to the midpoint location on Google Maps.

Prompt No.1:

How do I add a custom marker to a marker with the variable name 'markerA' in Leaflet.js

To which Bard responded with:

const myIcon = L.icon({

  iconUrl: 'https://your-website.com/marker.png',

  shadowUrl: 'https://your-website.com/marker-shadow.png',

  iconSize: [32, 32], // size of the icon image

  shadowSize: [48, 32], // size of the shadow image

  iconAnchor: [16, 32], // point of the icon which will correspond to the marker's location

  shadowAnchor: [16, 24] // point of the shadow that will be positioned below the icon

});

const markerA = L.marker([lat, lng], {icon: myIcon}).addTo(map);

I then downloaded three numbered markers from the Map Icons Collection and uploaded them to the same server as the Meet in the Middle map. I used Bard's suggested code to create three marker variables (aIcon, bIcon & cIcon) and added the correct marker to the markerA, markerB and markerC variables. 

Our map now has numbered markers. 

Next I want to add a 'share' button after the midpoint marker is added to the map, so that users can share their meeting location with friends. 

Prompt No.2:

after this javascript statement use innerhtml to add a button with an id of 'share' to an element called 'instructions' -

var midpointMarker = L.marker([midLat, midLng]).addTo(map); midpointMarker.bindPopup("I'm the midpoint!");

Bard's suggestion was:

var midpointMarker = L.marker([midLat, midLng], {draggable: true}).addTo(map);

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

// Add the button using innerHTML

document.getElementById('instructions').innerHTML += '<button id="share">Share</button>';

This will add a 'share' button next to our 'Calculate Midpoint' marker. We actually want the 'share' button to replace the 'Calculate Midpoint' button so I omitted the '+' symbol from the line - 

document.getElementById('instructions').innerHTML += '<button id="share">Share</button>';

Now after the midpoint marker is added to the map we have a 'share' button. All we need to do now is add an event to the 'share' button which will post a message to Twitter when pressed.

 

Prompt No.3:

Add an event listener to the 'share' button which will call a function called' shareToTwitter'

To which Bard suggested:

document.getElementById('share').addEventListener('click', shareToTwitter);

Now all we need to do is write the function!

 

Prompt No.4:

Prompt No.4 failed miserably

After 10-15 minutes of heated discussion Bard failed to write a usable function for posting a message to Twitter. Luckily I have been down this road before so was able to write the function myself. Here is my function:

function shareToTwitter() {

var twtLink = "https://twitter.com/intent/tweet?text=Let's%20meet%20here:%20" +

encodeURIComponent("https://www.google.com/maps/@" + midLat + "," + midLng + ",15z");

}

// Add the button using innerHTML

document.getElementById("instructions").innerHTML = '<button id="share">Share</button>';

document.getElementById("share").addEventListener("click", shareToTwitter);

Now when the user presses the 'share' button a message will be posted to Twitter with a link to our meeting point on Google Maps. In future discussions we might ask Bard to create a link back to the meeting point on the Meet in the Middle map.

In summary the third hour of the One How AI Map Challenge was a little disappointing. I had to break the rule that all the JavaScript for the map was produced by Bard. Never mind, the adventure will continue.

In the fourth hour we could ask Bard to make our buttons a little more attractive. We also still need an option to create a midpoint between 2 or 3 (or more) points. We also need to change the Google Maps link to a link back to the meeting point on the Meet in the Middle map.