+ Start a Discussion
Frederick H LaneFrederick H Lane 

Lightning Component Framework Specialist Step 10 _Error

I have checked all the forums and there is no conclusive answer to this error on Step 10

The BoatTile component doesn't fire the plotMapMarker event when a user clicks a boat.

Here is my code;
PlotMapMarker.evt
<aura:event type="APPLICATION"
description="PlotMapMarker test">
<aura:attribute name="sObjectId"
type="String"/>
    <aura:attribute
name="lat" type="String"/>
<aura:attribute name="long" type="String"/>
<aura:attribute name="label" type="String"/>
</aura:event>

Map.cmp
<aura:component implements="flexipage:availableForAllPageTypes"
access="global" >
<aura:attribute name="width"  type="String"
default="100%" />
<aura:attribute name="height" type="String"
default="200px" />
<aura:attribute name="location"
type="SObject"/>
<aura:attribute name="jsLoaded" type="boolean"
default="false"/>
<aura:handler event="c:PlotMapMarker"
action="{!c.onPlotMapMarker}" />
<aura:registerEvent type="c:PlotMapMarker"
name="PlotMapMarker"/>
<ltng:require styles="{!$Resource.Leaflet + '/leaflet.css'}"    
scripts="{!$Resource.Leaflet + '/leaflet-src.js'}"       
afterScriptsLoaded="{!c.jsLoaded}" /> 
              <lightning:card
title="Current Boat Location" >
                  <div aura:id="map"
style="{!'width: ' + v.width + '; height: ' + v.height + ';
border:none;'}">
                      <div style="width:100%;
height:100%" class="slds-align_absolute-center">Please make a
selection</div>
                  </div>
</lightning:card>
</aura:component>

onBoatClick.cmp
({
    onBoatClick : function(component, event, helper) {
        var boat = component.get('v.boat');
        //this is how you fire an application event
        var createEvent = $A.get("e.c:PlotMapMarker");
        createEvent.setParams({'sObjectId' : boat.id});
        createEvent.fire();
    }
})

onBoatClickController.js
({
    onBoatClick : function(component, event, helper) {
        var boat = component.get('v.boat');
        //this is how you fire an application event
        var createEvent = $A.get("e.c:PlotMapMarker");
        createEvent.setParams({'sObjectId' : boat.id});
        createEvent.fire();
    }
})
        
        var boat=component.get('v.boat');
        console.log('Boat Selected Id in boattile' + boat.Id);
        var lat = boat.Geolocation_Latitude__s;
        var long = boat.Geolocation_Longitude__s;
        var label = boat.Name;
        console.log('boat name in BoatTile'+ label);
        console.log('Latitude in BoatTile' + lat);
        console.log('Longitude in BoatTile' + long);
        var PlotMapMarkerEvent = $A.get("e.c:PlotMapMarker");
         PlotMapMarkerEvent.setParams({
            "lat"   : lat,
            "long"  : long,
            "label" : label,
             "SObjectId" : boat.Id });
         PlotMapMarkerEvent.fire();
        ),


 
praveen murugesanpraveen murugesan
Hello Fred,

Am also facing same issue. How you fixed it?

Thanks