Блог

Действительно пытался не публиковать это, поскольку я видел похожие вопросы, но я не могу ничего отобразить в библиотеке листовок react после прочтения в Интернете.

Следующие фрагменты кода показывают разметку для карты и наложение, которое я пытаюсь создать.

Большое спасибо, любая помощь приветствуется.

Глядя на другие вопросы онлайн, люди ссылаются на то, чтобы сделать положение контейнера Map: абсолютным и установить z-индекс равным 400 , что, похоже, не имеет значения для меня с разметкой ниже.

Разметка карты

               <Map
                zoomControl={false}
                doubleClickZoom= {false}
                closePopupOnClick= {false} 
                dragging= {false}
                zoomSnap= {false} 
                zoomDelta= {false} 
                trackResize= {false}
                scrollWheelZoom= {false}
                touchZoom={false}
                className="map"
                worldCopyJump={true}
                center={position}
                zoom={this.state.zoom}>

                <TileLayer
                  attribution="amp;amp;copy <a href=amp;quot;http://osm.org/copyrightamp;quot;>OpenStreetMap</a> contributors and Chat location by Iconika from the Noun Project"
                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />

                {this.state.pins.map(pin => (
                  <Marker
                    onClick={() => this.showPanel(pin)}
                    key={pin._id}
                    position={[pin.latitude, pin.longitude]}
                    icon={pinIcon}>
                  </Marker>
                ))}

              </Map>
  

Наложение разметки

   <div ref={ref => this.el = ref}>
            <button onClick={() => this.setState({ isPaneOpen: true })}>Click me to open right pane!</button>


            <SlidingPane
                className='some-custom-class'
                overlayClassName='some-custom-overlay-class'
                isOpen={ this.state.isPaneOpen }
                title='Hey, it is optional pane title.  I can be React component too.'
                subtitle='Optional subtitle.'
                onRequestClose={ () => {
                    // triggered on "<" on left top click or on outside click
                    this.setState({ isPaneOpen: false });
                } }>
                <div className="container-fluid padding">
                </div>
             </SlidingPane>
  

Обновить

Теперь я переместил наложение в функцию, показанную ниже

 function MyOverLay(props) {
  return <SlidingPane
      className='some-custom-class'
      overlayClassName='some-custom-overlay-class'
      isOpen={ props.isPaneOpen }
      title='Book here
  </SlidingPane>
}
  

Изменение в разметке показано ниже

Новая разметка

 <div>

        <MyOverLay isPaneOpen={this.state.isPaneOpen} />

          <div className="container-fluid padding">

            <div className="row padding">

              <div className="col-lg-8">

                <Map zoomControl={false}
                doubleClickZoom= {false}
                closePopupOnClick= {false} 
                dragging= {false}
                zoomSnap= {false} 
                zoomDelta= {false} 
                trackResize= {false}
                scrollWheelZoom= {false}
                touchZoom={false}
                className="map"
                worldCopyJump={true}
                center={position}
                zoom="13">
                <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
                <Marker
                    position={[10, -10]}
                    icon={messageIcon}>
                </Marker>
            </Map>

          </div>
  

это идеальный ответ

 .leaflet-control { z-index: 0 !important}
.leaflet-pane { z-index: 0 !important}
.leaflet-top, .leaflet-bottom {z-index: 0 !important}
  

Единственное решение, о котором я могу думать, — это использование портала React. Это особенность React, которая может добавлять компонент вне «корневого» компонента внутри элемента body. Учитывая, что дочерние элементы в нижней части родительского элемента имеют более высокий индекс стекирования, чем элементы в верхней части, он может «наложить» любой компонент внутри корневого компонента. Попробуйте обернуть свой компонент следующим образом:

 import React from 'react';
import ReactDOM from 'react-dom';

const OverlayComponent = () => {
   return ReactDOM.createPortal(
      <MyComponent />,
      document.body
   );
};
  

только что была такая же проблема. Для тех, кто все еще ищет ответ — Самый высокий z-индекс в leaflet-react предназначен для кнопок масштабирования и равен

 .leaflet-top, .leaflet-bottom 
{
    position: absolute;
    z-index: 1000;
    pointer-events: none;
}
  

итак, если вы перейдете выше, вы можете отобразить элемент перед картой.
Приветствия

Удалось заставить его работать, управляя значениями z-индекса в CSS для всех панелей, которые карта отображает на странице. Опция zIndex, доступная на TileLayer, похоже, не работает для меня, но следующее решило проблему. Заметил — тестировал это только в Chrome.

 div.map.leaflet-container.leaflet-touch.leaflet-retina.leaflet-fade-anim {
    /*border: 5px solid red;*/
    z-index: 1;
}

div.slide-pane__content {
    /*border: 5px solid black;*/
    z-index: 100;
}

div.ReactModal__Content.ReactModal__Content--after-open.slide-pane.slide-pane_from_right.some-custom-class {
    /*border: 5px solid orange;*/
    z-index: 100;
}

div.slide-pane__header {
    /*border: 5px solid orange;*/
    z-index: 100;
}

div.ReactModal__Overlay.ReactModal__Overlay--after-open.slide-pane__overlay.some-custom-overlay-class {
    /*border: 5px solid blue;*/
    z-index: 100;

}