React Leaflet LayersControll - пример объекта baseLayer

Question

Я пытаюсь добавить LayersControll на карту response-lealfet.

Я добавил значок управления слоями

но при наведении он пуст.

Существует также пример кода

 <Map center={this.props.configuration.center}
                 zoom={this.props.configuration.zoom}
                 minZoom={this.props.configuration.minZoom}
                 maxZoom={this.props.configuration.maxZoom}
                 attributionControl={false}
                 doubleClickZoom={false}
                 zoomControl={false}
                 editable={true}
                 onZoomEnd={this.props.configuration.onZoomEnd}
                 onZoomStart={this.props.configuration.onZoomStart}
                 bounceAtZoomLimits={false}
                 dragging={true}>

                <FeatureGroup>
                    <LayersControl
                        baseLayers={{
                            url: TILES_URL,
                            id: 'MapID'}}
                    >
                        <TileLayer url={TILES_URL}/>
                        <ZoomControl position="topright" />
                        <Marker position={[0, 0]}>
                            <Popup>
                                <span>Great marker!</span>
                            </Popup>
                        </Marker>

                    </LayersControl>

                    {this.props.children}
                </FeatureGroup>

            </Map>

Answer 1

По реактивно-листовочной документации

https://react -leaflet.js.org / docs / ru / examples.html

есть пример для слоев
https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/layers-control.js

так что рабочим примером будет

сначала нам нужно импортировать компоненты

import { Map, LayersControl, ... } from 'react-leaflet';
const { BaseLayer, Overlay } = LayersControl;

  <LayersControl>
       <BaseLayer checked name="OpenStreetMap.Mapnik">
             <TileLayer url={TILES_URL}/>
       </BaseLayer>
  </LayersControl>