0

I have an aura component map made with leaflet. Everything works fine, except that when I scroll down the page, the map doesn't disappear behind the top part of the screen like it should.

See attached pictures - the first one is how it regularly looks within the page, the second one shows how the map doesn't disappear with the rest of the component. Everything above the green line shouldn't be seen.

How do I fix this?

P.S. - This component was made by someone else, so I don't know much about how it works. I'm just trying to fix the bug.

*Edited to add code below

enter image description here

enter image description here

.cmp

<aura:component implements="force:appHostable, flexipage:availableForAllPageTypes, flexipage:availableForRecordHome, force:hasRecordId, forceCommunity:availableForAllPageTypes" access="global" extends="c:Base">
  <aura:attribute name="mapMarkers" type="Object" />
  <aura:attribute name="markersTitle" type="String" />
  <aura:attribute name="zoomLevel" type="Integer" />
  <aura:attribute name="listView" type="String" />
  <!-- <aura:attribute name="center" type="Object"/> -->
  <aura:attribute name="jsLoaded" type="boolean" default="false"/>

  <ltng:require styles="{!$Resource.leaflet + '/leaflet.css'}" 
  scripts="{!$Resource.leaflet + '/leaflet.js'}"
 afterScriptsLoaded="{!c.jsLoaded}" />

  <!-- the map component -->
 <div aura:id="map"></div>

</aura:component>

.css

.THIS {
  width: 100%;
  height: 100%;
}

.THIS .pin {
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.THIS .bounce {
  animation-name: bounce-1;
  animation-timing-function: linear;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0);
  }
}

Controller.js

({
    jsLoaded: function(component) {
        component.set("v.jsLoaded", true);
    },

    onInIt: function(component,event,helper){
        helper.rerender(component);
    }
})

Helper.js (there's no active code here - there's code written but it's all commented out)

({
});
Improve this question
4
  • 2
    You probably need to set the z-index of the leaflet container to a value lower than of the standard header.
    – Raul
    May 23, 2020 at 18:26
  • @raul Can you explain more how to do that? Like I said, I'm not familiar with how this map component works, so I don't quite know what that means
    – nfoley
    May 23, 2020 at 19:58
  • We had similar issues with lightning spinners or custom modal, I don't know your code, could you please post a minimal version of your code for us to look further and point you on right track.
    – Raul
    May 23, 2020 at 20:18
  • @Raul I added the code from the aura component - let me know if that's what you meant, or if you were referring to a different file
    – nfoley
    May 23, 2020 at 21:04

1 Answer 1

Reset to default
1

As Raul also mentioned you have to set Z-index property on div like this

  <div aura:id="map" style="z-index:90;"></div>
Improve this answer
1
  • That works perfectly, thanks!
    – nfoley
    May 24, 2020 at 22:15

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.