0

image disappearingI am trying to use a lightning map in communities to visualize some data and I started by using the example in the documentation to simulate what I need.

I want to have two options. Either show a list or a map with the list being the default. However when I click the map link(icon) the map shows for a split second and then list template is shown.

Any ideas what I am doing wrong?

<template>
    <lightning-card  >
        <div class="slds-grid slds-gutters slds-p-around_medium slds-wrap">
            <div class="slds-col slds-size_8-of-12">
            Displaying {num} of {total} projects
            </div>
            <div class="slds-col slds-size_2-of-12 slds-float_right">
                View results by:
            </div>
            <div class="slds-col slds-size_2-of-12 ">
                <div class="slds-float_left" >
                    
                    <div class="slds-box  slds-box_xx-small box"> 
                        
                        <a href="#" onclick={viewList}>
                        <lightning-icon icon-name="utility:list" alternative-text="list" title="List" class="my-icon"></lightning-icon></a>
                        <a href="#" onclick={viewMaps}>
                        <lightning-icon icon-name="utility:location" alternative-text="location" title="Location" class="my-icon"></lightning-icon></a>
                    </div>
                </div>
            </div>
        </div>
        <template if:true={mapVisible}>
            <div class="slds-p-around_medium" >
                 <p >Maps content</p>
                 <lightning-map
                     map-markers={mapMarkers}>
                 </lightning-map>     
             </div>
         </template>
    <template if:false={mapVisible}>
        <p> Current list selection</p>
    </template>
   
        <p slot="footer"></p>
    </lightning-card>
</template>

The Js..

       import { LightningElement } from 'lwc';


    export default class SearchResults extends LightningElement {
        num = 0;
        total = 0;
   
    mapVisible = false;
    
        mapMarkers = [
            {
                location: {
                    // Location Information
                    City: 'San Francisco',
                    Country: 'USA',
                    PostalCode: '94105',
                    State: 'CA',
                    Street: '50 Fremont St',
                },

                // For onmarkerselect
                value: 'SF1',

                // Extra info for tile in list & info window
                icon: 'standard:account',
                title: 'Julies Kitchen', // e.g. Account.Name
                description: 'This is a long description',
            },
            {
                location: {
                    // Location Information
                    City: 'San Francisco',
                    Country: 'USA',
                    PostalCode: '94105',
                    State: 'CA',
                    Street: '30 Fremont St.',
                },

                // For onmarkerselect
                value: 'SF2',

                // Extra info for tile in list
                icon: 'standard:account',
                title: 'Tender Greens', // e.g. Account.Name
            },
        ];

        selectedMarkerValue = 'SF1';


    viewList(){
        console.log('View List');
       this.mapVisible = false;
        
    }
    
        viewMaps(){
            console.log('Show Maps');
            this.mapVisible = true;
            
        console.log('Visible ' + this.mapVisible);
        
        }
    }
3
  • Maybe check location on your browser? I set up your code and with no modifications, it works fine. Could use a format though... May 4 at 18:16
  • That's interesting. I have tried with Firefox and it is showing after clicking twice! So strange. I did not change any location settings. In chrome, still disappearing on click. I allowed in the settings but still behaving the same way. Thanks Caspar for taking the time to help I really appreciate.
    – Pauline
    May 4 at 19:41
  • I tried in chrome too. I see you have some other code/markup - maybe try what I did and just display this component. May 4 at 20:38
0

I found that the issue was that the page was refreshing. The reason was that I had used a href="#". To make the link not refresh on click I changed to..

<a href="javascript: void(0);" onclick={viewMap}>  <lightning-icon icon-name="utility:list" alternative-text="list" title="List" class="my-icon" ></lightning-icon></a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.