Lightning Web Component Specialist Super badge: Challenge 7 throwing error

Question

I am facing error in LWC Specialist Superbadge Challenge:7

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 = JSON.parse(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;
    }
}

<template>
    <lightning-card class="slds-is-relative">
        <template if:true={isLoading}>
            <lightning-spinner alternative-text="Loading" size="small" variant="brand"></lightning-spinner>
        </template>    
       <!-- The lightning-map goes here -->
       <template if:true={isRendered}>
            <lightning-map map-markers={mapMarkers}> </lightning-map>
       </template>
       <div slot="footer">Top 10 Only!</div>
    </lightning-card>
</template>

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.

Do not vandalize your posts. By posting on this site, you've irrevocably granted the Stack Exchange network the right to distribute that content under the [CC BY-SA 4.0 license](//creativecommons.org/licenses/by-sa/4.0/) for as long as it sees fit to do so. For alternatives to deletion, see: [I've thought better of my question; can I delete it?](https://stackoverflow.com/help/what-to-do-instead-of-deleting-question) — Sabito stands with Ukraine, Jan 13 '21 at 03:14

score 1 · Answer 1 · answered Dec 03 '20 at 06:28

You have to assign newMarkers to mapMarkers.

    newMarkers.unshift({
    location: {
        Latitude: this.latitude,
        Longitude: this.longitude
    },
    title: LABEL_YOU_ARE_HERE,
    icon: ICON_STANDARD_USER
});

this.mapMarkers = newMarkers;
this.isLoading = false;

score 0 · Answer 2 · edited Jan 17 '21 at 07:03

0

In createMapMarkers method Double underscore is missing. Try:

                Latitude: rowBoat.Geolocation__Latitude__s,
                Longitude: rowBoat.Geolocation_Longitude__s

edited Jan 17 '21 at 07:03

June7

19,874
8
24
34

answered Aug 19 '20 at 10:34

Mayur Solanki

1

Lightning Web Component Specialist Super badge: Challenge 7 throwing error

2 Answers2