milespratt/bingmaps-react

An easy to use Bing Maps React component.

bingmaps-react's Issues

Error - Module not found

HI,

I am building a spfx react webpart and have installed using npm install bingmaps-react

I have imported using the below

Added the following into the component

however when I run gulp serve I get the follow error

Please advise a resolution or guidance

Thanks in advance

Touch not working even demo also

Hi,

do you have idea how we can apply for touch as its not working for demo also.

Please apply a license this software.

Please update the package.json within this project to include a license.

Thank you,

Jeff

Window is not defined

I tried to use this per the instructions but I get this error:

window is not defined

Binding pushpins does not work

If you bind the pushpins property to a state variable in the parent, like this...

const [pushpins, setPushpins] = useState([]);

...

<BingMap pushPins={pushpins} ... />

And then update the pushpins variable via an API for example, the map does not load and you get errors like this:
Uncaught TypeError: Microsoft.Maps.NetworkCallbacks.f_logCallbackRequest is not a function

Looks like the calls are as follows: useEffect, initMap, appendBingMapsScript, useEffect, initMap and here it calls again appendBingMapsScript, which it shouldn't. Then it calls makeMap twice.

Internal error: ReferenceError: document is not defined

Hello!
I am getting this error when rendering the map in a Next.js app

node_modules/react-bingmaps/lib/components/ReactBingmaps/ReactBingmaps.js (49:2) @ new ReactBingmaps
⨯ Internal error: ReferenceError: document is not defined
at new ReactBingmaps (./node_modules/react-bingmaps/lib/components/ReactBingmaps/ReactBingmaps.js:66:9)

The code that is crashing is:
if (document.querySelector('script[src="' + scriptURL + '"]') === null) { _this.loadScript(scriptURL); window.bingmapsCallback = function () { Microsoft = window.Microsoft; this.afterDependencyLoad(pendingProps); }.bind(_this); } return _this;

the thing is that my build process is failing due to this... anyone can give me a hand? thanks in advance!

Use multiple Instances of BingMapsReact Component

I want to use multiple instances of BingMapsReact component on one screen. When I try to do so i get the following errors on each instance:

mapcontrol?callback=makeMap:12 Uncaught TypeError: Cannot read properties of undefined (reading 'heading') at n.constructView (VM3541 2nIzc7VnJnL4bbR8O2puCQKoiKs.js:1:201695) at u._setViewInternal (VM3548 dcHS7nT2K1gkKSdMvs59EvdUTfc.js:1:83546) at u.setView (VM3548 dcHS7nT2K1gkKSdMvs59EvdUTfc.js:1:82562) at setMapViewOptions (index.js:102:1) at index.js:140:1 at Microsoft.Maps.notifyMapReadyForBootstrap (mapcontrol?callback=makeMap:12:7274) at VM3548 dcHS7nT2K1gkKSdMvs59EvdUTfc.js:1:120205 at VM3548 dcHS7nT2K1gkKSdMvs59EvdUTfc.js:1:120304

and

Uncaught TypeError: Microsoft.Maps.NetworkCallbacks.f_logCallbackRequest is not a function at Log?entry=0&fmt=1&type=3&group=MapControl&name=MVC&version=v8&mkt=de-AT&auth=Au3j6PhQC5-8vZV4H33Ltc7S1ww2dhsp8wVs4B-D42R_ScS2kwCEJ_UXATcPUwfA&jsonp=Microsoft.Maps.NetworkCallbacks.f_logCallbackRequest:1:33 (anonym) @ Log?entry=0&fmt=1&type=3&group=MapControl&name=MVC&version=v8&mkt=de-AT&auth=Au3j6PhQC5-8vZV4H33Ltc7S1ww2dhsp8wVs4B-D42R_ScS2kwCEJ_UXATcPUwfA&jsonp=Microsoft.Maps.NetworkCallbacks.f_logCallbackRequest:1

Any ideas what goes wrong here?

Refactor script injection

Bing maps script injection is not 100% reliable. Refactor to ensure proper loading and injection.

Microsoft.Maps.NetworkCallbacks.f_logCallbackRequest is not a function

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;

Height is causing Cannot read properties of null (reading '0') error

When configuring the BingMapsReact props, if I don't set the height or set the height to "auto", "100%", or any pixel value below 420px, I am receiving the error shown below when trying to open the Radial Menu to change the map view:

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading '0')

Call Stack
r._adjustSlotText
https://r.bing.com/rp/X0_TMcGQC7zntMW6Vi6WyFCNg-U.br.js (1:123275)
r.showDropDownMenu
https://r.bing.com/rp/X0_TMcGQC7zntMW6Vi6WyFCNg-U.br.js (1:117604)
t._onMouseEnter
https://r.bing.com/rp/X0_TMcGQC7zntMW6Vi6WyFCNg-U.br.js (1:165956)
Object.onMouseEnter
https://r.bing.com/rp/X0_TMcGQC7zntMW6Vi6WyFCNg-U.br.js (1:181284)
HTMLDivElement.u
https://r.bing.com/rp/mLLNMN31k1B6sTH9H7fCgKYukSg.br.js (1:18119)
t.
https://r.bing.com/rp/mIacWs8_crQzFfDVp3oAu1voxBk.br.js (1:23148)

If I set the height to 500px, the menu opens without errors but 500px height will not work with the component I am trying to develop.

React error due to eslint

First and foremost thanks for the project. I found the following problem in a fresh created project. Could you help me with the issue?

Cannot find module 'bingmaps-react' or its corresponding type declarations.ts(2307)

Install the latest version 1.1.1 and getting the error --> Cannot find module 'bingmaps-react' or its corresponding type declarations.ts(2307)
import BingMapsReact from "bingmaps-react";

Add support for properties that require Map constructor.

The current implementation allows for new mapOptions, viewOptions, and pushPins props without reloading the map. This is great when you want to change the visible map data or change some properties but doesn't allow you to change map options that require the map constructor without reloading the app with new config settings.

List of map options here https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/mapoptions-object

Add support for info boxes

Cannot find module 'bingmaps-react' while testing with jest

The module works fine while running the app, but we get the following error in the jest test environment:

Cannot find module 'bingmaps-react' from 'src/components/stateless/atomic/Map/index.js'

Is there a workaround to this problem, or a simple fix I'm missing?

Add option configurator

Typescript refactor

Add more prop examples

sj_evt is not defined

I am getting this in the console when trying to switch to streetside view.

I have tried to disable streetside view with either the disableStreetside attribute in the BingMapsReact component or with this config under viewOptions and/or mapOptions.

Any insight on either how to solve the issue and allow streetside, or to disable streetside view, as its not a requirement for my application.

TIA :)

Add support for push pins

the specified credentials are invalid

Hi,

I was using react-bingmaps and same key working but when I replacing that and adding bingmaps-react it's start throwing me error the specified credentials are invalid. Kindly suggest.

Question - styling pushPinsWithInfoboxes

Is there a way to style pushpin infoboxes?

This is what I have so far

                const coordinate = {
                    center: {
                        longitude: event.attributes.longitude,
                        latitude: event.attributes.latitude,
                    },
                    options: {
                        title: `Event ${event.id}`,
                        description: `<img src="${'https://wl.blob.core.windows.net/uploads/001 (7).jpg'}" alt="some image" width="200px" height="200px"/>`
                    }
                }

            <BingMapsReact
                bingMapsKey="foobar"
                height="100%"
                mapOptions={{
                    navigationBarMode: "square",
                }}
                width="100vw"
                viewOptions={{
                    center: { latitude: coordinates[0].center.latitude, longitude: coordinates[0].center.longitude },
                    mapTypeId: "grayscale",
                }}
                pushPinsWithInfoboxes={coordinates}
            />

Add logic to reliably account for multiple maps on one page

Displaying multiple maps is unreliable due to the dynamic nature of loading the bing maps script. I'm not sure I can solve for this 100% while the dependency on the external script exists, there are certainly some checks I can add to make the component more robust and reliable.

nextjs : ReferenceError: window is not defined

<BingMapsReact
bingMapsKey="my_api_key"
height="500px"
mapOptions={{
navigationBarMode: "square"
}}
width="500px"
viewOptions={{
center: { latitude: dt.latitude, longitude: dt.longitude},
mapTypeId: "grayscale"
}}
/>

Iphone and andorid app on click issue

Hi,

I am creating booking through map but somehow onclick is not working on iphone and android mobiles. Please let me know if any idea.

Multiple errors on initial load

I'm running Next.js and getting the following errors. If I leave the page and return it ignores the errors and load correctly.

I get a invalid key even when its a valid key

Map doesn't render when passing options?

This is the exact component I am trying to run, on initial render it doesn't render anything, unless I go into my IDE and change something and save it.

However , it seems to render correctly if I only pass my bing map key into it..

lat and lng are props which come from parent component but I also tested this with hard coded values, same result

interface Props {
  lat: number
  lng: number
}

export default function BingMap({ lat, lng }: Props) {
  return (
    <BingMapsReact
      pushPins={[
        {
          center: { latitude: lat, longitude: lng },
        },
      ]}
      bingMapsKey={process.env.NEXT_PUBLIC_BING_MAPS_KEY}
      mapOptions={{
        navigationBarMode: 'square',
      }}
      viewOptions={{
        center: { latitude: lat, longitude: lng },
        zoom: 17,
      }}
    />
  )
}

Map in ScrollView

How can I use the map inside a ScollView component ?
When I try to move the map, the ScollView takes the priority so the map doesn't move.

We are facing issue on offline mode.

Highlighted line-throwing error in case of offline mode. your suggestion will be highly appreciated.

var offlineWebApi = top.Xrm.WebApi;
if(top.Xrm.WebApi.offline.isAvailableOffline('bookableresource') == true)
{
offlineWebApi = top.Xrm.WebApi.offline;
}
offlineWebApi.retrieveMultipleRecords('bookableresource','?$select=bookableresourceid&$filter=_owninguser_value eq (4d6d1bcd-7320-eb11-a813-000d3ae8e48a)').
then(x=>{