Всплывающее окно react-map-gl не отображается при наведении в React

Я использую react-map-gl для отображения карты Mapbox в моем приложении Next.js. Я хочу показать всплывающее окно, когда пользователь наводит курсор на сегмент линии на карте. Вот мой код:

import React from "react";
import Map, {Popup, Source, Layer} from 'react-map-gl';

import protectedSegments from '../public/static/gis/protected-segments.json'

export default function CIMap({props}) {
    const [hoverInfo, setHoverInfo] = React.useState(null);

    const protectedSegmentStyle = {
        'id': 'protectedSegmentLayer',
        'type': 'line',
        'paint': {
            'line-width': 4
        }
    }

    const onHover = React.useCallback(event => {
        const segment = event.features && event.features[0];
        setHoverInfo({
          longitude: event.lngLat.lng,
          latitude: event.lngLat.lat,
          roadName: segment && segment.properties.road,
        });
    }, []);
    const selectedSegment = (hoverInfo && hoverInfo.roadName) || '';
    console.info("selectedSegment: ", selectedSegment)
    console.info("hoverInfo: ", hoverInfo)

    return (
        <Map
          initialViewState = {{
            longitude: -0.114835,
            latitude: 51.545553,
            zoom: 11.5
          }}
          style = {{width: 600, height: 400}}
          mapStyle = "mapbox://styles/mapbox/light-v9"
          mapboxAccessToken = {process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN}
          onMouseMove = {onHover}
          interactiveLayerIds = {['protectedSegmentLayer']}
        >

          <Source type = "geojson" data = {protectedSegments}>
            <Layer {...protectedSegmentStyle} />
          </Source>

          {selectedSegment && (
              <Popup
                longitude = {hoverInfo.longitude}
                latitude = {hoverInfo.latitude}
                offset = {[0, -10]}
                closeButton = {false}
              >
                {selectedSegment}
              </Popup>
            )}
        </Map>
        )
}

Сами сегменты линий видны на карте. Когда я перемещаю мышь, на консоль выводятся как selectedSegment, так и hoverInfo. Когда я навожу курсор на сегмент линии, консоль показывает правильные значения. Но всплывающее окно никогда не появляется.

Я на Mac, и эта карта находится в самом низу страницы. Я заметил, что когда я навожу курсор на одну из строк, на секунду показывается большой палец прокрутки, слегка прокручиваемый снизу вверх. Когда я выхожу из сегмента, снова появляется ползунок прокрутки, на этот раз прямо Внизу. Получается, что страница каким-то образом меняет размер и скрывает всплывающее окно за нижней частью области просмотра? Я попытался удалить атрибут offset, но ничего не изменилось.

Я также должен отметить, что мой компонент CIBox помещен внутри компонента Material UI Box, если это имеет значение.

Я скопировал этот код прямо из примера react-map-gl. Любые идеи, что я делаю неправильно?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
84
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема заключалась в том, что я не включил необходимый файл CSS.

Другие вопросы по теме