+ Start a Discussion
Somya TiwariSomya Tiwari 

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 :

Lightning Web Component Specialist Challenge 7

AbhishekAbhishek (Salesforce Developers) 
Hi,

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.
 
Todd Halfpenny MCTodd Halfpenny MC
Could you try removing the parenthesis from around "position"?
so 
(position) => {

is
position => {

​​​​​​​
Robin Bhatt 15Robin Bhatt 15
As per challenge use 'rowBoat.Geolocation_Latitude_s ' as 'rowBoat.Geolocation__Latitude__s' and same Apply for 'rowBoat.Geolocation_Longitude_s'
manikanta reddy 15manikanta reddy 15
Hi Sowmya,
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
Sandeep Jadhav 17Sandeep Jadhav 17
I am getting below error.. seems html or java script issue with my script.

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?
Todd Halfpenny MCTodd Halfpenny MC
Hey Sandeep, I suggest tou start a new discussion, as the error you're seeing is different from the OPs. 
keerthi akulakeerthi akula
Got stuck with the same issue as Sowmya tiwari. please help