You need to sign in to do that
Don't have an account?
Frederick 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();
),
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();
),
Am also facing same issue. How you fixed it?
Thanks