0

Hello everybody I am currently working in a LWC Lightning map where I want to show a list of directions saved in an Address field of an SObject. But I am having some troubles. I read the lightning-map documentation and its examples and I found that the mapMarkers list has the next structure:

mapMarkers = [
    {
        location: {
            Street: '1000 5th Ave',
            City: 'New York',
            State: 'NY',
            PostalCode: '349078'
        },
        title: 'Museum of Fine Arts',
    },
];

The data location is store in an Addres field so I made an Apex controller to bring the records and its relevant information:

@AuraEnabled (cacheable=true)
public static List<WrapperDirection> getListAddressData(){

    List<SObject> comunidadesList = new List<SObject>();
    List<WrapperDireccion> wrapperListToReturn = new List<WrapperDireccion>();

    recordslist = [SELECT Id, QX_Direction__c, Name FROM SObject];

    
    for(SObject irecord :recordslist){
        WrapperDireccion wrapper = new WrapperDireccion();
        Address addr = iComunidad.QX_Direction__c;
        wrapper.city = addr.getCity();
        wrapper.street = addr.getStreet();
        wrapper.country = addr.getCountry();
        wrapper.postalCode = addr.getPostalCode();
        wrapper.name = irecord.Name;
        wrapperListToReturn.add(wrapper);
    }
    System.debug('List array --> '+ wrapperListToReturn);
    return wrapperListToReturn;
   }

   public class WrapperDireccion{
    @AuraEnabled public String name{get;set;}
    @AuraEnabled public String city{get;set;}
    @AuraEnabled public String country{get;set;}
    @AuraEnabled public String postalCode{get;set;}
    @AuraEnabled public String street{get;set;}
}

Which brings me the data I need

In my .js I have the next code:

directionsListWired = [];
mapMarkers = [];
@wire(getDireccionesComunidadesEnergeticas)
wiredRelatedRecord(result){
    const{data,error} = result;
    if(data){
        this.directionsListWired = data;
        console.log('here...');
        fillMapMarkersStructure();
    }else if (error) {
        this.isLoading =false;
        this.records = undefined;
        this.error = error;
    }
}
fillMapMarkersStructure(){
    console.log('Entro2');
    this.mapMarkers = this.directionsListWired.map(direction => { return {
        location: {
            Street: direction.street,
            City: direction.city,
            PostalCode: direction.postalCode,
            State: direction.country
        },
        title: direction.name
        }
    })
    console.log('mapMarkers --> '+ this.mapMarkers);
}

with the fillMapMarkersStructure function I want to get the wrapper data to make the salesforce structure:

mapMarkers = [
    {
        location: {
            Street: '1000 5th Ave',
            City: 'New York',
            State: 'NY',
            PostalCode: '349078'
        },
        title: 'Museum of Fine Arts',
    },
];

My .html:

<template>
<lightning-map
                map-markers={mapMarkers}
                markers-title='Comunidades energéticas'
                list-view='visible'
                zoom-level='15'>

</lightning-map>

But I am having problems with this. Could anybody help me? Thanks

Improve this question
4
  • Hi. Can you please edit to explain what problems you are seeing? Commented Jan 9, 2023 at 11:14
  • Hi @PhilW the problem is that I dont know to get the data from the apex controller and create the structure of the mapMarkers location. Commented Jan 9, 2023 at 11:26
  • So you want help to fill in directionsListWired.forEach(element => { //get the street, city, country, postalCode, title });? Commented Jan 9, 2023 at 11:29
  • @PhilW yes thats it and with the title which is the value of the wrapper.name = irecord.Name; for each of the locations Commented Jan 9, 2023 at 11:31

2 Answers 2

Reset to default
0

This should be easy enough using something like:

fillMapMarkersStructure() {
    this.mapMarkers = this.directionsListWired.map(direction => {
       return {
          location: {
              Street: direction.street,
              City: direction.city,
              PostalCode: direction.postalCode
          },
          title: direction.name
       };
    });
}

Note that you have no state in your wrapper, which is why I left that out.

You just need to turn the array of wrappers from your apex method into an array of marker entries, and that's most easily done using Array.map.

You then need to store the map markers wherever you need them. I've assumed this should be this.mapMarkers since you are passing those to the lightning-map in your LWC template.

Improve this answer
4
  • Hello I modified my js code above to be seen better but I still dont get the data. I checked in my apex controller the data that brought me and its correct. I dont know whats happening. Commented Jan 9, 2023 at 12:17
  • Have you tried looking at the compiled LWC code in the browser and attaching the browser's JavaScript debugger (get to this via "Inspect" in the context menu in the browser)? How are you asking the Map to render your mapMarkers? It may help to edit your question to add the template for your LWC. Commented Jan 9, 2023 at 12:31
  • Ah, sorry, I see you added that. Commented Jan 9, 2023 at 12:31
  • Oh sorry I found the problem. I finally solve it thanks Commented Jan 9, 2023 at 12:32
0

Try this:

fillMapMarkersStructure(directionsListWired) {
    let mapMarkers = directionsListWired.map(element => {
        return {
            location: {
                Street: element.street,
                City: element.city,
                State: element.state,//do not see 'state' in the WrapperDireccion class but 'country' is there
                PostalCode: element.postalCode
            },
            title: element.name
        }
    });
}
Improve this answer

You must log in to answer this question.