I am getting below error. Can someone please help

Challenge Not yet complete... here's what's wrong:
The FiveStarRating controller placeholders aren't filled in correctly.

Please see my code below.

FiveStarRating.cmp
 

<aura:component >
    <aura:attribute name="value" type="integer" default="0"/>
    <aura:attribute name="readOnly" type="boolean" default="false"/>
    <ltng:require styles="{!$Resource.fivestar + '/rating.css'}" scripts="{!$Resource.fivestar + '/rating.js'}" afterScriptsLoaded="{!c.afterScriptsLoaded}"/> 
 	<aura:handler name="change" value="{!v.value}" action="{!c.onValueChange}"/>
    
    <ul aura:id="ratingarea" class="{!v.readOnly?'c-rating readonly':'c-rating'}">
    </ul>	
</aura:component>

FiveStarRatingController.js
 

({
	onValueChange:function(component,event,helper)
    {
      	console.log('In onValueChange function')
          if(component.ratingObj)
        {
            var value=component.get('v.value');
            component.ratingObj.setRating(value,false);
        }
    },
    afterScriptsLoaded:function(component,event,helper)
    {
        var domE1 = component.find("ratingarea").getElement();
        var readOnly = component.get('v.readOnly');
        var currentRating = component.get('v.value');
        var maxRating = 5;
        var callback = function(rating)
        				{
                            component.set('v.value',rating);
                        }
        
        component.ratingObj=rating(domE1,currentRating,maxRating,callback,readOnly);
    }
})

 

Hi,

I'm currently struggling with Lightning Component Framework Specialist Challenge 10.

I'm successfully using an event to pass values into the Map's client side controller, and Leaflet seems to be doing something, but:

1. The marker is displayed on a grey area, not a map.
2. When I click a second boat, instead of updating the map, an error pops up informing me "Uncaught Action failed: c:Map$controller$onPlotMapMarker [Map container is already initialized.]"

This is my onPlotMapMaker method:
 

onPlotMapMarker: function(component, event, helper) {
    	var id = event.getParam('sObjectId');
    	var lat = event.getParam('lat');
    	var long = event.getParam('long');
    	var label = event.getParam('label');

    	var mapContainer = component.find('map').getElement(); 
	    var map = L.map(mapContainer).setView([lat, long], 13);

		L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
		    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
		}).addTo(map);
		
		L.marker([lat, long]).addTo(map)
		    .bindPopup(label)
		    .openPopup();
    }

What's wrong with it?