Я использую 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. Любые идеи, что я делаю неправильно?
Проблема заключалась в том, что я не включил необходимый файл CSS.