function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Brian KesslerBrian Kessler 

Lightning Component Framework Specialist: How Do I Get the Map to Display Correctly?

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?


 
Best Answer chosen by Brian Kessler
Brian KesslerBrian Kessler
I've solved this, but not in a way which Trailhead recognizes (surprise, surprise!)

See Lightning Component Framework Specialist, Step 10 : What is wrong with my onPlotMapMaker() method? (https://developer.salesforce.com/forums/ForumsMain?id=9060G000000MVHvQAO#!/feedtype=SINGLE_QUESTION_DETAIL&dc=Developer_Forums&criteria=OPENQUESTIONS&id=9060G000000MVSeQAO)

All Answers

Brian KesslerBrian Kessler
I've solved this, but not in a way which Trailhead recognizes (surprise, surprise!)

See Lightning Component Framework Specialist, Step 10 : What is wrong with my onPlotMapMaker() method? (https://developer.salesforce.com/forums/ForumsMain?id=9060G000000MVHvQAO#!/feedtype=SINGLE_QUESTION_DETAIL&dc=Developer_Forums&criteria=OPENQUESTIONS&id=9060G000000MVSeQAO)
This was selected as the best answer
Yashita Goyal 17Yashita Goyal 17
Hi,

Am unable to get name over markup in map.

MapController.js 
({
    jsLoaded: function(component) {
        component.set("v.jsLoaded", true);
    },
    onPlotMapMarker: function(component, event, helper) {
        var id = event.getParam('sObjectId');
        var latitude = event.getParam('lat');
        var longitude = event.getParam('long');
        var label = event.getParam('label');
        component.set("v.location", {'lat' : latitude, 'long' : longitude});
        /*var leafletMap = helper.getLeafletMap(component, latitude, longitude);
        L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(leafletMap);   
        L.marker([latitude, longitude]).addTo(leafletMap)
        .bindPopup(label)
        .openPopup();    */
    }
})

Map Renderer.js 
({
    rerender: function (component) {
        var nodes = this.superRerender();
        var location = component.get('v.location');
        if (!location) {
        } else {
            if (!window.L) {
                return nodes;
            }
            if (!component.map) {
                var mapElement = component.find("map").getElement();
                component.map = L.map(mapElement, {zoomControl: true}).setView([42.356045, -71.085650], 13);
                component.map.scrollWheelZoom.disable();
                window.L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {attribution: 'Tiles © Esri'}).addTo(component.map);
            }
            if (location && location.lat && location.long) {
                var latLng = [location.lat, location.long];
                if (component.marker) {
                    component.marker.setLatLng(latLng);
                } else {
                    component.marker = window.L.marker(latLng);
                    component.marker.addTo(component.map);
                }
                component.map.setView(latLng);
            }
            return nodes;
        }
    }
})

Can you please help?

Thanks
Yashita​​
 
Yashita Goyal 17Yashita Goyal 17
And this is Map Helper.js 
({
    getLeafletMap : function(component, latitude, longitude) {
        var leafletMap = component.get('v.leafletMap');
        if (!leafletMap) {
            var mapContainer = component.find('map').getElement();
            leafletMap = L.map(mapContainer, {zoomControl: false, tap: false})
            .setView([latitude, longitude], 13);
            component.set('v.leafletMap', leafletMap);
        } else {
            leafletMap.setView([latitude, longitude], 13);
        }
        return leafletMap;
    }
})

 
Manish Anand 22Manish Anand 22
Hi All,
I am having issue in passing latitude and longitude as an event parameters. Below is my onBoatClick controller. 
({
	onBoatClick : function(component, event, helper) {
        var BoatSelectEvent = component.getEvent("BoatSelect");
        var boatSelected = component.get("v.boat");
        BoatSelectEvent.setParam(
            "boatId",boatSelected.Id);
        BoatSelectEvent.fire();
        var BoatSelectedEvt = $A.get("e.c:BoatSelected");
        var Boat = component.get("v.boat");
        BoatSelectedEvt.setParams({
            "boat" : Boat
        }) ;
        console.log('Firing event' +Boat);
        BoatSelectedEvt.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();
        
		
	} ,

console.log display label and boat Id. However values for lat and lon is undefined. Not sure, what I am missing here.
Any help is appreciated.

Thanks,
Manish
 
SriKaviSriKavi
Manish,
I am also having the same issue. Did you get this resolved? If so, what was the solution?
Appreciate your help.
Thanks.
SriKaviSriKavi
I resolved my issue. I had the letter L in lowercase (instead of uppercase) in my script for the field names latitude and longitude. They should be Geolocation_Latitude__s/Geolocation__Longitude__s instead of Geolocation__latitude__s /Geolocation__longitude__s.
Hilma FrazeeHilma Frazee

Challenge Not yet complete... here's what's wrong: 
We couldn't find a design resource in the Map bundle.

i am not able to clear this step.
Simon GuillenSimon Guillen
I'm having this problem 

"Challenge Not yet complete... here's what's wrong:
MapController.js must have an event handler named onPlotMapMarker that uses the latitude and longitude that were passed through the event to update the boat’s location."

Yet I already have onPlotMapMarker in my MapController.js which is shown below.
  
({
    onPlotMapMarker: function(component, event, helper) {
        var id = event.getParam("sObjectId");
        var latitude = event.getParam("lat");
        var longitude = event.getParam("long");
        var label = event.getParam("label");
        
        var mapContainer = component.find("map").getElement();
        var map = L.map(mapContainer).setView([latitude, longitude], 13);
        console.log(latitude);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			maxZoom: 19,
			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
		}).addTo(map);

        L.marker([latitude, longitude]).addTo(map);
    },
    jsLoaded: function(component) {
        component.set("v.jsLoaded", true);
    }
})
Has anyone encountered this problem before as I haven't seen anything when I checked in Google. Thanks!
Nitish Pisal 12Nitish Pisal 12
@Simon: I am facing the same problem, did you find the solution yet? 
"Challenge Not yet complete... here's what's wrong:
MapController.js must have an event handler named onPlotMapMarker that uses the latitude and longitude that were passed through the event to update the boat’s location."

MapController.js 
  
({	
    jsLoaded: function(component) {
        component.set("v.jsLoaded", true);
    },
    onPlotMapMarker: function(component, event, helper) {
        var id = event.getParam("sObjectId");
        var latitude = event.getParam("lat");
        var longitude = event.getParam("long");
        var label = event.getParam("label");
        
        var mapContainer = component.find("map").getElement();
        var map = L.map(mapContainer).setView([latitude, longitude], 13);
        console.log(latitude);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			maxZoom: 19,
			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
		}).addTo(map);

        L.marker([latitude, longitude]).addTo(map);
    }
})

 
Simon GuillenSimon Guillen
@Nitish

Here's my update, I think trailhead needs to see that the location object of the component has been set but you might want to comment it out when testing because it produces errors. Uncomment it out when you need to verify the step.
  
({
    onPlotMapMarker: function(component, event, helper) {
        var id = event.getParam("sObjectId");
        var latitude = event.getParam("lat");
        var longitude = event.getParam("long");
        var label = event.getParam("label");
        
        var mapContainer = component.find("map").getElement();
        var map = L.map(mapContainer).setView([latitude, longitude], 13);
        
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			maxZoom: 19,
			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
		}).addTo(map);

        L.marker([latitude, longitude]).addTo(map);
        component.set("v.location", {
            latitude: latitude,
            longitude: longitude
        });
    },
    jsLoaded: function(component) {
        component.set("v.jsLoaded", true);
    }
})

Let me know if it doesn't work.
Rishabh Kumar 27Rishabh Kumar 27
<design:component >
   <design:attribute name="width" label="Map Width" description="" />
   <design:attribute name="height" label="Map Height" description="" />
    
</design:component>

Use this as Map design attribute.