function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Ola BamideleOla Bamidele 

How can I make this kind of list dynamic

Hi everyone, 

I have this code to pin point a certain location on a map however, it is very static meaning that I will have to enter all the account locations manually into the code for it to show.

So i was wondering, is there a way to make it more dynamic? So it will automatcially pull the location number from the account location field in Salesforce for each account?

Im really not sure so please if you know how to do it hen let me know please!
Thanks!
        
L.marker([37.7851430, -122.4034050]).addTo(map)
        	.bindPopup('Marriott Marquis')
    		.openPopup();
        
        L.marker([37.7941570, -122.3963110]).addTo(map)
        	.bindPopup('Hyatt')
    		.openPopup();

 
Ravi Dutt SharmaRavi Dutt Sharma
You can use SOQL to query the latitude and longitude and then pass those values to your code in VF.
 
List<Account> accountList = 
    [SELECT  BillingLatitude, BillingLongitude 
     FROM Account 
     WHERE Id = 'your account id'];

 
Ola BamideleOla Bamidele
Hi Ravi Dutt Sharma, 

Thanks for th reply. I tried your code in the AccountMap controller but i got an error - probably because i put it in the wrong place. 

Could you please point out to me when i need to put the code you sent please?

This is my code:
({
    jsLoaded: function(component, event, helper) {
        var map = L.map('map', {zoomControl: false, tap: false}).setView([37.784173, -122.401557], 14);
        L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
            {
                attribution: 'Tiles © Esri'
            }).addTo(map);
        component.set("v.map", map);
        
        L.marker([37.7851430, -122.4034050]).addTo(map)
        	.bindPopup('Marriott Marquis')
    		.openPopup();
        
        L.marker([37.7941570, -122.3963110]).addTo(map)
        	.bindPopup('Hyatt')
    		.openPopup();
        
        L.marker([37.7861640, -122.4101370]).addTo(map)
        	.bindPopup('Hilton Union Square')
    		.openPopup();
    },
    accountsLoaded: function(component, event, helper) {
        // Add markers
        var map = component.get('v.map');
        var accounts = event.getParam('accounts');
        for (var i=0; i<accounts.length; i++) {
            var account = accounts[i];
            var latLng = [account.Location__Latitude__s, account.Location__Longitude__s];
            L.marker(latLng, {account: account}).addTo(map).on('click', function(event) {
    		helper.navigateToDetailsView(event.target.options.account.Id);
});

        }  
    },
    accountSelected: function(component, event, helper) {
        // Center the map on the account selected in the list
        var map = component.get('v.map');
        var account = event.getParam("account");
        map.panTo([account.Location__Latitude__s, account.Location__Longitude__s]);
    }
})

Thanks very much!