LWC SuperBadge Challenge 7 boatsNearMe Error - salesforce

Question

My component works fine and I can see it is working properly with the maps being formed in UI and markers coming up properly, however I am still get this error for the challenge :
Challenge Not yet complete... here's what's wrong:
We can't find the correct settings for the createMapMarkers() function in the component boatsNearMe JavaScript file. Make sure the component was created according to the requirements, including the right mapMarkers, title, Latitude (Geolocation__Latitude__s), Longitude (Geolocation__Longitude__s), the correct constants, stopping the loading spinner, and using the proper case-sensitivity and consistent quotation.
This is the Challenge 7 Statement as per the trailhead:
"Build the component boatsNearMe and display boats near you
Create the component boatsNearMe and show boats that are near the user, using the browser location and boat type. Display them on a map, always with the consent of the user (and only while the page is open)."
https://trailhead.salesforce.com/en/content/learn/superbadges/superbadge_lwc_specialist
Here is my boatsNearMe LWC code
import { LightningElement, wire, api } from 'lwc';
import getBoatsByLocation from '#salesforce/apex/BoatDataService.getBoatsByLocation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
const LABEL_YOU_ARE_HERE = 'You are here!';
const ICON_STANDARD_USER = 'standard:user';
const ERROR_TITLE = 'Error loading Boats Near Me';
const ERROR_VARIANT = 'error';
export default class BoatsNearMe extends LightningElement {
#api boatTypeId;
mapMarkers = [];
isLoading = true;
isRendered = false;
latitude;
longitude;
#wire(getBoatsByLocation, { latitude: '$latitude', longitude: '$longitude', boatTypeId: '$boatTypeId' })
wiredBoatsJSON({ error, data }) {
if (data) {
this.isLoading = true;
this.createMapMarkers(JSON.parse(data));
} else if (error) {
this.dispatchEvent(
new ShowToastEvent({
title: ERROR_TITLE,
message: error.body.message,
variant: ERROR_VARIANT
})
);
// this.isLoading = false;
}
}
getLocationFromBrowser() {
navigator.geolocation.getCurrentPosition(
position => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
},
(error) => {}
);
}
createMapMarkers(boatData) {
const newMarkers = boatData.map((boat) => {
return {
location: {
Latitude: boat.Geolocation__Latitude__s,
Longitude: boat.Geolocation__Latitude__s
},
title: boat.Name,
};
});
newMarkers.unshift({
location: {
Latitude: this.latitude,
Longitude: this.longitude
},
title: LABEL_YOU_ARE_HERE,
icon: ICON_STANDARD_USER
});
this.mapMarkers = newMarkers;
this.isLoading = false;
}
renderedCallback() {
if (this.isRendered == false) {
this.getLocationFromBrowser();
}
this.isRendered = true;
}
}

Answer 1

I think you have Geolocation__Latitude__s twice in this part:
createMapMarkers(boatData) {
const newMarkers = boatData.map((boat) => {
return {
location: {
Latitude: boat.Geolocation__Latitude__s,
Longitude: boat.Geolocation__Latitude__s // <<-- should be Longitude
},
title: boat.Name,
};
});