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
Ola BamideleOla Bamidele 

Changing Map Icon

Hi everyone,

I am trying to change the map icon for a particular location (located using Latitude and Longitude) however, the map icon is only easily changable when hard coding the Latitude and Longitude manual into the page i.e.: 
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

However, I am pulling the account location from a Latitude and Longitude field in Salesforce via this line: 
.bindPopup(account.Name);

How can i how change the icon on the map for the accounts on the map whiles using this method of pulling Latitude and Longitude? Please if anyone know how to do so then please let me know.

Thanks very much!

 
Raj VakatiRaj Vakati
Can you share the complete code?

 
Ola BamideleOla Bamidele
Hi Ray V, 

Thanks for the response, 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);
        
},
    

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)
            // To display account name and status in the text balloon
            .bindPopup(account.Name);
            
          }  
    },
    
    
    
   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!