Apex Code Development You need to sign in to do that
Don't have an account?
Lightning Web Components Specialist Challenge 7
Hi Guys !!
I am stuck at the challenge 7, trailhead showing error of a missing function, apparently it is present in my code !! Please help !
import { LightningElement, track, 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;
@track mapMarkers = [];
@track isLoading = true;
@track isRendered = false;
latitude;
longitude;
@wire(getBoatsByLocation, { latitude: '$latitude', longitude: '$longitude', boatTypeId: '$boatTypeId' })
wiredBoatsJSON({ error, data }) {
if (data) {
this.createMapMarkers(data);
} else if (error) {
this.dispatchEvent(
new ShowToastEvent({
title: ERROR_TITLE,
message: error.body.message,
variant: ERROR_VARIANT
})
);
this.isLoading = false;
}
}
renderedCallback() {
if (this.isRendered == false) {
this.getLocationFromBrowser();
}
this.isRendered = true;
}
getLocationFromBrowser() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
},
(e) => {
}, {
enableHighAccuracy: true
}
);
}
createMapMarkers(boatData) {
this.mapMarkers = boatData.map(rowBoat => {
return {
location: {
Latitude: rowBoat.Geolocation_Latitude_s,
Longitude: rowBoat.Geolocation_Longitude_s
},
title: rowBoat.Name,
};
});
this.mapMarkers.unshift({
location: {
Latitude: this.latitude,
Longitude: this.longitude
},
title: LABEL_YOU_ARE_HERE,
icon: ICON_STANDARD_USER
});
this.isLoading = false;
}
}
Error :
For all the Trailhead issues please report it here,
https://trailhead.salesforce.com/help?support=home#
https://trailhead.salesforce.com/help
So that our trailhead support engineers will look into it and get back to you.
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Regards,
Salesforce Support.
so
(position) => {is
position => {
Try to change the createMapmarkers method to below code.
createMapMarkers(boatData) { const boats = JSON.parse(boatData); this.mapMarkers = boats.map(boat => { const Latitude = boat.Geolocation__Latitude__s; const Longitude = boat.Geolocation__Longitude__s; return { location: { Latitude, Longitude }, title: boat.Name, description: `Coords: ${Latitude}, ${Longitude}`, icon: 'utility:anchor' }; }); this.mapMarkers.unshift({ location: { Latitude: this.latitude, Longitude: this.longitude }, title: 'You are here!', icon: 'utility:resource_territory' }); this.isLoading = false; }Thanks
Manikanta
Challenge Not yet complete... here's what's wrong:
We can't find the right settings in the component boatsNearMe. Make sure the component was created according to the requirements, including the template tag that renders the spinner if isLoading is true.
Any thoughts ? can you please send your html file to compare with mine?