Adding URL Parameters to an Interactive Map

It's Saturday so I have decided to give myself a 30 minute break. Today I will only be spending ½ an hour on the One Hour AI Map Challenge. In these 30 minutes I want to create URL parameters for Meet in the Middle which will allow us to replace the Google Maps link for shared meeting points with a link back to our own map.

Prompt No.1:

how can i add url parameters to a leaflet.js map to show the lat,lng and zoom

In response to this prompt Bard provided me with the following code:

const urlParams = new URLSearchParams(window.location.search);

const lat = parseFloat(urlParams.get('lat'));

const lng = parseFloat(urlParams.get('lng'));

const zoom = parseInt(urlParams.get('zoom'));

const map = L.map('map').setView([lat, lng], zoom);

map.on('moveend', () => {

  const center = map.getCenter();

  const zoom = map.getZoom();

  history.pushState(null, null, `?lat=${center.lat}&lng=${center.lng}&zoom=${zoom}`);

});

if (lat && lng && zoom) {

  map.setView([lat, lng], zoom);

} else {

  // Set default view if no parameters are present

}

This looks to be almost exactly what I want - except for the 'moveend' function. I don't need the map URL parameters to update every time the map is panned. So I can ignore that function. However I do need to remove the link to Google Map that gets posted to Twitter with a Meet in the Middle URL with our midpoint parameters. Which you can do like this:

https://meet-middle.glitch.me/?lat=" + midLat + "&lng=" + midLng + "&zoom=15

Now when the user presses the 'share' button they can post a link to their meet in the middle (or midpoint) location. When anyone clicks on that link they will be taken to a map centered on the midpoint location. 

However it would be nice to also show a marker at the midpoint location.

Prompt No.2:

is it possible to add a url parameter 'marker=yes'

To which Bard suggested: 

1. Retrieve the marker Parameter:  

const urlParams = new URLSearchParams(window.location.search);
const showMarker = urlParams.get('marker') === 'yes'; // Check if 'marker=yes' is present 

2. Conditionally Add the Marker:

if (showMarker) { const marker = L.marker([lat, lng]).addTo(map); // Create and add marker if 'marker=yes' }

So after around 15 minutes we should have a 'share' button which posts a URL with parameters which will link to our calculated midpoint. Well yes - except that you may have noticed in Bard's response to Prompt No. 1 a little bit of missing code:

else {

  // Set default view if no parameters are present }

It actually took me an additional 10 minutes of discussion with Bard to get the map to load with the default values if the URL to Meet in the Middle has no parameters. Which leads me nicely to this admission:

Important Caveat

These transcripts of my conversations with Bard have been edited for brevity's sake. Anyone who has used a generative AI will know that it often takes a number of prompts to retrieve an acceptable/working answer or response from the AI.

Therefore, for the sake of brevity, these transcripts often jump straight to the prompt which returned the response from Bard which actually worked.

This may give the reader a false impression that Bard provides flawless responses that work 100% of the time. This certainly isn't true. Which is where developer tools come in very handy. If you can identify errors using developer tools then you can more easily help Bard identify any errors in its suggested code (or in your implementation of Bard's suggested code).

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
One Hour AI Map Challenge - Part Three