Карта исчезает, когда открывается всплывающее окно, вместо того, чтобы показывать позади нее ⇐ Javascript

[Anonymous]

Я использую React-Map-GL, чтобы создать карту кластера с всплывающими окнами, которые появляются, когда пользователи нажимают на точки карты. Когда всплывающее окно запускается, карта полностью исчезает вместо того, чтобы оставаться видимой под всплывающим окном, как и ожидалось. Открывается, вся карта исчезает из просмотра < /li>
[*] Всплывающее окно существует в одиночестве внизу контейнера < /li>
< /ul>
Вот мой код: < /p>
const ClusterMap = ({
data: dataId,
container: Container,
header = "Cluster Map",
subHeader = "",
exportData,
detailsComponent,
children,
expand,
DataStringQuery,
...props
}: VisualProps) => {
const [popupInfo, setPopupInfo] = useState(null);
const mapRef = useRef(null);
const { data, loading } = useDataStoreData(dataId);
const geoJsonData = useGeoJson(data);
console.log("=====geoJsonData", geoJsonData);

if (loading) {
return ;
}

if (!geoJsonData) {
return No data available for this map;
}
console.log("=====popupInfo", popupInfo);

const firstItem = geoJsonData.features[0];
const initialLatitude = firstItem.geometry.coordinates[1];
const initialLongitude = firstItem.geometry.coordinates[0];
// Define sourceId and layers after GeoJSON data is processed
const sourceId = "clusters";
const [clusterLayer, clusterCountLayer, unclusteredPointLayer] =
createClusterLayers(sourceId);

// Define mapchildren with GeoJSON data
const mapchildren = (







{popupInfo && (
{
mapRef.current?.resize();
setPopupInfo(null);
}}
anchor="bottom"
offset={[0, -10]}
>
{popupInfo.text}

)}

);

const content = (
{
console.log("==========map", map);
if (map && map.target) {
map.target.on("click", "unclustered-point", (e) => {
e.preventDefault();
if (e.features && e.features.length > 0) {
const feature = e.features[0];
console.log("Direct map click handler triggered", feature);

const coordinates = feature.geometry.coordinates.slice();
console.log("Coordinates:", coordinates);
const title = `${feature.properties?.facility_name} : ${feature.properties?.keph_level}`;

setPopupInfo({
lngLat: coordinates as [number, number],
text: title,
});
}
});
}

// Call the original onLoad if it exists
if (props.userOptions?.onLoad) {
props.userOptions.onLoad(map);
}
},
}}
>
{mapchildren}

);
console.log("=============here", popupInfo, mapchildren);

return Container ? (

{content}

) : (
content
);
};
< /code>
Я пробовал: < /p>

• Добавление явной высоты /ширины в контейнер карты (искажает макет) < /li>
  Использование различных позиций якоря для Popupe < /li>
  . Повторное настройку на предприятие. Popup

Я не вижу никаких ошибок в консоли, и само всплывающее окно правильно отображается - просто карта внизу исчезает.>

Подробнее здесь: https://stackoverflow.com/questions/795 ... -behind-it