Open CynicalDuck opened 2 years ago
Possible solution, that seems working for me.
For onMapReady
prop it says Due to the asynchronous nature of the Bing Maps API you may encounter errors if you change props before the map has finished an initial load. You can pass a function to the onMapReady prop that will only run when the map has finished rendering.
So if you change the props of <BingMapsReact>
before it loads the map it throws this error.
When my component loads, it makes several API requests to my servers and Bing maps. At the same time, I'm initializing the bing maps in my component. When my API request's response arrives back before the bing maps initialize and changes the state, that eventually changes the pushPins prop of the bing maps. This throws an error as below.
mapcontrol?callback=makeMap:12 Uncaught TypeError: Cannot read properties of undefined (reading 'heading')
at n.constructView
and
Uncaught TypeError: Microsoft.Maps.NetworkCallbacks.f_logCallbackRequest is not a function
at VM2505 Log:1:33
To fix this error, I made very simple changes.
const [bingMapReady, setBingMapReady] = useState(false) // added a new state to use in bingmapsreact
..
..
..
..
return (
..
..
.. // other components etc.
<BingMapsReact
pushPins={bingMapReady ? bingPushPins : null} // null is a default value for pushPins, so no prop updated.
onMapReady={function () {
setBingMapReady(true)
}}
// other BingMapsReact props of course.
>
)
..
..
This seems working for me, for now. let me know whether this fixes your issue. Good luck!
I am having the same issue. Just started this week.
Thanks for your suggestion but it is still not working for me. Would love any suggestions.
What version are you on? "bingmaps-react": "^1.2.10",
@bnewman20 did you take a look at @selcuktoklucu 's solution? Is your situation similar?
@CynicalDuck any luck with @selcuktoklucu 's suggestion?
@milespratt Thanks for the reply! Yes, I did try the solution. It appears to work sometimes and other times the same error.
The 2 Types of errors I am seeing: Maps.NetworkCallbacks.f_logCallbackRequest:1:33 Uncaught TypeError: Microsoft.Maps.NetworkCallbacks.f_logCallbackRequest is not a function
mapcontrol?callback=makeMap:11 Uncaught TypeError: Cannot read properties of null (reading 'prototype')
My code is:
<BingMapsReact bingMapsKey="1234556" height={500} onMapReady={() => { setBingMapReady(true); }} width="100%" />
Thanks for the info @bnewman20! Would you mind sharing a bit more of your code? I'd like to see how you're rendering the bingmaps component.
Of course! Thank you!
export default function Locations() {
// Queries
const list = GetAPI({ endpoint: "" });
const [Data, setData] = useState();
useEffect(() => {
if (!list.isLoading) {
const Sorted = list.data.sort((a, b) => {
const nameA = a.name.toLowerCase();
const nameB = b.name.toLowerCase();
if (nameA < nameB) return -1;
if (nameA > nameB) return 1;
return 0;
});
setData(Sorted);
}
}, [list.isLoading, list.isFetching]);
const [bingMapReady, setBingMapReady] = useState(false); // added a new state to use in bingmapsreact
const pushPins = [
{
center: {
latitude: 29.749907,
longitude: -95.358421,
},
options: {
title: " 202220",
},
},
{
center: {
latitude: 29.749905,
longitude: -95.358421,
},
options: {
title: "202310",
},
},
];
const [openModal, setOpenModal] = useState(false);
const [itemSelected, setItemSelected] = useState(null);
const openModalHandler = (data) => {
setItemSelected(data);
setOpenModal(true);
};
const closeModalHandler = () => {
setItemSelected(null);
setOpenModal(false);
};
return (
<DashboardLayout>
<DashboardNavbar />
<Modal
open={openModal}
onClose={closeModalHandler}
disableScrollLock
sx={{ overflow: "scroll" }}
>
<>
<Modal itemSelected={itemSelected} closeModalHandler={closeModalHandler} />
</>
</Modal>
<MDBox pt={3} pb={3}>
<Card>
<Grid
container
direction="row"
justifyContent="flex-start"
alignItems="center"
pl={3}
pt={3}
spacing={1}
>
<Grid item>
<MDTypography variant="h5" fontWeight="medium">
Locations
</MDTypography>
</Grid>
</Grid>
<MDBox p={3}>
<BingMapsReact
bingMapsKey="ASDFASDFASDFASDf"
height={500}
mapOptions={{
navigationBarMode: "square",
showBreadcrumb: true,
}}
onMapReady={() => {
setBingMapReady(true);
}}
width="100%"
pushPins={bingMapReady ? pushPins : null} // null is a default value for pushPins, so no prop updated.
/>
</MDBox>
{Data &&
Data.map((item) => (
<Card key={item.id} Data={item} openModalHandler={openModalHandler} />
))}
</Card>
</MDBox>
<Footer />
</DashboardLayout>
);
}
I'm experiencing the same issue. Any update on this?
@kyleduvall Can you please share your code? Hoping to take a look this week.
@bnewman20 sorry for the delay, I'll get back to you soon.
Unfortunately, I can't share the code as I no longer have access to it. I was able to work around the issue by using the solution suggested in this SO post instead of using this package. Though, I did note that I kept seeing this callback error in my console, however, the map rendered properly.
I'm expreiencing the same issue when I use more than one instance of Bingmapsreact.
Unfortunately the workaround proposed by @selcuktoklucu doesn't work
Code looks like:
import BingMapsReact from "bingmaps-react";
import { useState } from "react";
import { mapsKey } from '../../config'
export const Map = ({ latitude, longitude, name, width = 300, height = 300 }: any) => {
const [bingMapReady, setBingMapReady] = useState(false) // added a new state to use in bingmapsreact
const pushPin = {
center: {
latitude: latitude,
longitude: longitude,
},
options: {
title: name,
},
}
const pushPins = bingMapReady ? [pushPin] : null;
//const viewOptions = { center: pushPin.center };
return (
<BingMapsReact
bingMapsKey={mapsKey}
onMapReady={function () {
setBingMapReady(true)
}}
height={width}
width={height}
pushPins={pushPins}
/>
)
}
I was able to fix this issue by removing React Strict mode.
And make sure to specify width and height property on the BingMapsReact component.
Hi,
I have come over this issue when using this package. Any idea why?
Code: