Popup не отображает данные в MarkerClusterGroup react leaflet?

Question

[Lorem Ipsum]

Всем привет! С Сервера приходят данные в json, после получения я отображаю на карте Leaflet. Так как маркеров получается много, то я объединяю их в кластеры с помощью MarkerClusterGroup, кластеры появляются вместе с маркерами, но попапы по клику не отображают информацию, без кластеров все работает нормально. Кто делал подобное? Нужна помощь, гугл не помог(

import React, {Component} from "react";
import MapService from "../../services/map-service";

import {Map, TileLayer, Marker, Popup} from "react-leaflet";
import MarkerClusterGroup from 'react-leaflet-markercluster';

import Spinner from "../../spinner";
import ErrorIndicator from "../../error-indicator";

import {ListGroup, ListGroupItem} from "react-bootstrap";

import "./geo-map.css";
import 'react-leaflet-markercluster/dist/styles.min.css';

export default class GeoMap extends Component {

    mapService = new MapService();

    state = {
        data: [],
        loading: true,
        error: false
    };

    componentDidMount() {
        this.updateMap();
    }

    onGeoDataLoaded = (data) => {
        this.setState({
            data: data,
            loading: false,
            error: false
        });
    };

    onError = (error) => {
        this.setState({
            error: true,
            loading: false
        })
    };

    updateMap() {
        this.mapService.getProjects().then(this.onGeoDataLoaded).catch(this.onError);
    }

    render() {

        const {data, loading, error} = this.state;

        const hasData = !(loading || error);
        const errorView = error ? <ErrorIndicator/> : null;
        const spinner = loading ? <Spinner/> : null;
        const mapView = hasData ? <MapView data={data}/> : null;

        return (
            <div className="geo-map">
                {errorView}
                {spinner}
                {mapView}
            </div>
        )
    }
}

const createMarkers = (data) => {
    return data.data.map((item, index) => (
        <Marker key={item.id} position={[item.geoJson.coordinates[1], item.geoJson.coordinates[0]]}>
            <Popup maxWidth="auto">
                <ListGroup variant="flush">
                    <ListGroupItem>
                        <strong>Наименование</strong><br/>
                        {item.name}
                    </ListGroupItem>
                    <ListGroupItem>
                        <strong>Дата закрытия контракта</strong><br/>
                        {item.endDate}
                    </ListGroupItem>
                    <ListGroupItem>
                        <strong>Заказчик</strong><br/>
                        {item.contractor}
                    </ListGroupItem>
                    <ListGroupItem>
                        <strong>Номер договора</strong><br/>
                        {item.contractNumber}
                    </ListGroupItem>
                    <ListGroupItem>
                        <strong>Путь к полевым мат.</strong><br/>
                        {item.dataPathRequest}
                    </ListGroupItem>
                    <ListGroupItem>
                        <strong>Путь к камер. мат.</strong><br/>
                        {item.dataPathResponse}
                    </ListGroupItem>
                    <ListGroupItem>
                        <strong>Путь к паспорту </strong><br/>
                        {item.passportPath}
                    </ListGroupItem>
                </ListGroup>
            </Popup>
        </Marker>
    ))
};

const MapView = (data) => {
    console.log("Data from state", data);
    const markers = createMarkers(data);
    return (
        <Map center={[39.90, 48.98]} zoom={4} maxZoom={22} attributionControl={true} zoomControl={true}
             doubleClickZoom={true} scrollWheelZoom={true} dragging={true} animate={true} easeLinearity={0.35}>
            <TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'/>
            <MarkerClusterGroup>
                {
                    markers
                }
            </MarkerClusterGroup>
        </Map>
    )
};

Answer 1

[EmelyanovKonstantin]

Посмотри так.

<MarkerClusterGroup>
                {
                    markers
                }
                onMarkerClick={(marker) => console.log(marker, marker.getLatLng())}
</MarkerClusterGroup>

Если способ не устарел. Можно добавлять инфу из данных.

Comments

[Lorem Ipsum]

спасибо за ответ, но куда именно повесить even onMarkerClick? На сам маркер?
Добавил на маркер, но он не отрабатывает

[EmelyanovKonstantin]

Lorem Ipsum, Никуда не вешать. Запустить в таком виде.

[Lorem Ipsum]

EmelyanovKonstantin,

[Lorem Ipsum]

EmelyanovKonstantin, К сожалению не работает(

[EmelyanovKonstantin]

По идее структура markers описывает popup. Они уже должны отображаться.
В упрощённом виде это:

<Marker position={[49.8397, 24.0297]} icon={redMarker}>
      <Popup>
        <div>
          <b>Hello world!</b>
          <p>I am a clustered popup.</p>
        </div>
      </Popup>
</Marker>

Возможно что-то с :

<ListGroup variant="flush">
<ListGroupItem>

[Lorem Ipsum]

EmelyanovKonstantin, убрал <ListGroup variant="flush"> <ListGroupItem>, проблема осталась(

[EmelyanovKonstantin]

Вот пример:
https://yuzhva.github.io/react-leaflet-markerclust...

[Lorem Ipsum]

EmelyanovKonstantin, Спасибо за помощь, утром буду разбираться)!

[Lorem Ipsum]

EmelyanovKonstantin, Добрый день, вообщем так и не получилось до сих пор поправить popup, даже на stackoverflow спросил, но не разобрался, в комментариях можно посмотреть. Может у Вас есть мысли какие еще?(

[EmelyanovKonstantin]

Lorem Ipsum, здесь всё работает при тестовых данных:
codesandbox.io/s/otgr-geoportal-w5y9q
А при запросе data с MapService проблема решилась?

[Lorem Ipsum]

EmelyanovKonstantin, Это мой сэндбокс) сегодня на stackoverflow спрашивал, потом туда залил)
Константин, решил проблему, из головы вылетело отписать сюда. Сам не разобрался почему не отображались popup'ы, но после того как в codesandbox поменял данные на статические, как мне посоветовали сделать, и скачал обратно на локалку, получил данные с сервера, все заработало) мистика какая-то