stacking order
bluerface opened this issue · 9 comments
@bluerface, could you please share code snippet with me?
Im not sure which part is relevant. Im using react leaflet, looping through a list of objects representing locations, and assigning them one of two icons
ownIcon = (Leaflet as any).BeautifyIcon.icon({
...iconOptions,
icon: 'css-circle',
innerIconAnchor: [-4, 8],
borderColor: color(getCssVar(Colors.purple))
.darken(10)
.toString(),
backgroundColor: Colors.purple,
})
nearbyIcon = (Leaflet as any).BeautifyIcon.icon({
...iconOptions,
icon: 'add-2-1',
innerIconAnchor: [-3, 6],
borderColor: color(getCssVar(Colors.blue))
.darken(10)
.toString(),
backgroundColor: Colors.blue,
})
{pins.map(location => (
<Pin
key={location.id}
location={location}
icon={this.props.ownLocationIds.has(location.id) ? this.ownIcon : this.nearbyIcon}
/>
))}
render() {
const { location } = this.props
return (
<Marker position={[location.xCoord, location.yCoord]} icon={this.props.icon}>
<Popup>
<div onClick={() => Actions.searchMapBounds(this.context.map)}>
<h1>{location.name}</h1>
<p>{location.address}</p>
<p>{localize('locations.km', location.distance + ' ')}</p>
</div>
</Popup>
</Marker>
)
}
if I revert to the default icon the stacking is correct
It seems innerIconAnchor is creating a problem. Please make it equal both for nearByIcon and ownIcon or remove this property and check if it works.
I am now running into an issue where the zindex offset is not respected. I make sure my selected pin is +600, and the zindex of the container is higher than the others as expected, but then the icon is below the others even though its index is higher. Even if I set the index on the pin itself, it still shows behind the others
The z-index on the parent (.leaflet-zoom-animated) seems to be ignored unless the element is positioned (I have used position: relative; on .leaflet-zoom-animated and that fixes the zindex but breaks the positioning.) Does leaflet have a position rule that is reset by this library? Or is there positioning on the icon that is over-ridden?
do you have any public URL for your work? you can apply z-index with !important property, maybe that works for you.
its not that the z-index is overridden, it is that it is ignored