Microsoft.Maps.NetworkCallbacks.f_logCallbackRequest is not a function

[CynicalDuck]

Hi,

I have come over this issue when using this package. Any idea why?

Code:

import Card from "@mui/material/Card";

// Material Dashboard 2 React components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";

// Bingmaps
import BingMapsReact from "bingmaps-react";

const Map = () => {
  const pushPin = {
    center: {
      latitude: 27.98785,
      longitude: 86.925026,
    },
    options: {
      title: "Mt. Everest",
    },
  };

  const pushPins = [pushPin];

  return (
    <Card>
      <MDBox
        mx={2}
        mt={-3}
        py={3}
        px={2}
        variant="gradient"
        bgColor="info"
        borderRadius="lg"
        coloredShadow="info"
      >
        <MDTypography variant="h6" color="white">
          Map
        </MDTypography>
      </MDBox>
      <MDBox pt={1} pb={2} px={2}>
        <MDBox component="ul" display="flex" flexDirection="column" p={0} m={0}></MDBox>
        <BingMapsReact
          bingMapsKey="API_KEY"
          pushPins={pushPins}
          viewOptions={{ center: { latitude: 27.98785, longitude: 86.925026 } }}
        />
      </MDBox>
    </Card>
  );
};

export default Map;

[selcuktoklucu]

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!

[bnewman-tech]

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",

[milespratt]

@bnewman20 did you take a look at @selcuktoklucu 's solution? Is your situation similar?

[milespratt]

@CynicalDuck any luck with @selcuktoklucu 's suggestion?

[bnewman-tech]

@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%" />

[milespratt]

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.

[bnewman-tech]

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>
  );
}

[kyleduvall]

I'm experiencing the same issue. Any update on this?

[milespratt]

@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.

[kyleduvall]

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.

[ruthoferroman]

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}

        />
    )
}

[Badbeef1]

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.