You need to sign in to do that
Don't have an account?
Stéphane C
lightning:map doesn't refresh
Hey !
I'm trying the new lightning:map tag from the winter 19 and i'm having some issue.
I achieve to display a simple map filled with a list of objects. They are shown as markers on the map and also on a sidebar generate by the lightning:tag too (the "showFooter" parameter).
Problems :
1) When i'm changing the list, changes appear on the sidebar but markers on the map don't change (none appears or disappears).
2) When i have a list of 1 or less markers to show, the sidebar desapears. But if after i reset the list to 2 or more, the sidebar doesn't reappear.
I did a simplified code that show the problem :
component :
I know it's early to have much information about it, but this tag is really interesting.
Thanks for any help !
I'm trying the new lightning:map tag from the winter 19 and i'm having some issue.
I achieve to display a simple map filled with a list of objects. They are shown as markers on the map and also on a sidebar generate by the lightning:tag too (the "showFooter" parameter).
Problems :
1) When i'm changing the list, changes appear on the sidebar but markers on the map don't change (none appears or disappears).
2) When i have a list of 1 or less markers to show, the sidebar desapears. But if after i reset the list to 2 or more, the sidebar doesn't reappear.
I did a simplified code that show the problem :
component :
<aura:component> <!-- attributes --> <aura:attribute name="mapMarkers" type="Object"/> <aura:attribute name="markersTitle" type="String" /> <aura:attribute name="showFooter" type="Boolean" /> <aura:attribute name="center" type="Object" /> <aura:attribute name="zoomLevel" type="Integer" /> <!-- initialize map and "simulate" checkbox as clicked to fill the list --> <aura:handler name="init" value="{! this }" action="{! c.init }"/> <aura:handler name="init" value="{! this }" action="{! c.checkboxChanged }"/> <div> <lightning:input type="checkbox" name="checkbox" label="Change" aura:id="checkbox" onchange="{!c.checkboxChanged}"/> <lightning:button label="Clear" onclick="{!c.clear}"/> <lightning:map mapMarkers="{! v.mapMarkers }" center="{! v.center }" zoomLevel="{! v.zoomLevel }" markersTitle="{! v.markersTitle }" showFooter="{ !v.showFooter }" > </lightning:map> </div> </aura:component>
({ init : function(component, event, helper) { //initialize the map component.set('v.center', { location: { City: 'Fréjus' } }); component.set('v.zoomLevel', 9); component.set('v.markersTitle', 'Some people'); component.set('v.showFooter', true); }, checkboxChanged : function(component, event, helper) { //swap between two lists of markers var check = component.find('checkbox').get('v.checked') if(check == true) //list 1 { component.set("v.mapMarkers", [ { location: { City: 'Cap-d\'Ail', Country: 'France', }, icon: 'custom:custom26', title: 'Cap-d\'Ail' }, { location: { City: 'Beaulieu-sur-Mer', Country: 'France', }, icon: 'custom:custom96', title: 'Beaulieu-sur-Mer' }]); } else //list 2 { component.set("v.mapMarkers", [{ location: { City: 'Fréjus', Country: 'France', }, icon: 'custom:custom88', title: 'Fréjus' }, { location: { City: 'Sainte-Maxime', Country: 'France', }, icon: 'custom:custom92', title: 'Sainte-Maxime' }, { location: { City: 'Saint-Tropez', Country: 'France', }, icon: 'custom:custom26', title: 'Saint-Tropez' } ]); } }, clear : function(component, event, helper) { //clear the current list showed component.set("v.mapMarkers", new Array()); } })
I know it's early to have much information about it, but this tag is really interesting.
Thanks for any help !