stacking order

[Zoe Lawrence]

Im not sure if this is an issue in leaflet or this plugin, but my pins dont always stack correctly...

[Muhammad Arslan Sajid]

@bluerface, could you please share code snippet with me?

[Zoe Lawrence]

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>
        )
    }

[Zoe Lawrence]

if I revert to the default icon the stacking is correct

[Muhammad Arslan Sajid]

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.

[Zoe Lawrence]

Removing it did not seem to work, some of them are in the right order, not all

[Zoe Lawrence]

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

[Zoe Lawrence]

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?

[Muhammad Arslan Sajid]

do you have any public URL for your work? you can apply z-index with !important property, maybe that works for you.

[Zoe Lawrence]

its not that the z-index is overridden, it is that it is ignored